Dev

app/[lang]/(dashboard)/inspector/page.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from "next";
+import { getDictionary } from "@/features/shared/i18n/get-dictionary";
+import { DEFAULT_LOCALE, isLocale, type Locale } from "@/features/shared/i18n/locale";
+import { getEntries } from "@/lib/aws/inspector-buffer";
+import { InspectorClient } from "@/features/inspector/components/inspector-client/inspector-client";
+
+export const dynamic = "force-dynamic";
+
+type Props = {
+  params: Promise<{ lang: string }>;
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { lang } = await params;
+  const locale: Locale = isLocale(lang) ? lang : DEFAULT_LOCALE;
+  const dict = getDictionary(locale);
+  return {
+    title: dict.inspector.title,
+  };
+}
+
+export default async function InspectorPage({ params }: Props) {
+  const { lang } = await params;
+  const locale: Locale = isLocale(lang) ? lang : DEFAULT_LOCALE;
+  const dict = getDictionary(locale);
+
+  // Read directly from buffer on RSC — no SDK call needed.
+  const initialEntries = [...getEntries()].sort((a, b) => b.timestamp - a.timestamp);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+        <div>
+          <h1 className="text-xl font-semibold">{dict.inspector.title}</h1>
+          <p className="text-sm text-muted-foreground">{dict.inspector.description}</p>
+        </div>
+      </div>
+      <InspectorClient
+        initialEntries={initialEntries}
+        dict={{
+          toolbar: dict.inspector.toolbar,
+          empty: dict.inspector.empty,
+          card: dict.inspector.card,
+          detail: dict.inspector.detail,
+        }}
+      />
+    </div>
+  );
+}

features/dynamodb/lib/client.test.ts

@@ -8,6 +8,12 @@ vi.mock("@/lib/aws/config", () => ({
 import { createAwsConfig } from "@/lib/aws/config";
 import { getDynamoDBClient, getDynamoDBDocumentClient } from "./client";
 
+function hasInspectorMiddleware(client: { middlewareStack: { identify: () => string[] } }) {
+  return client.middlewareStack.identify().some((entry) =>
+    entry.startsWith("InspectorMiddleware"),
+  );
+}
+
 const fakeConfig = {
   endpoint: "http://localhost:4566",
   region: "us-east-1",
@@ -38,6 +44,11 @@ describe("getDynamoDBClient", () => {
     const second = await getDynamoDBClient();
     expect(first).not.toBe(second);
   });
+
+  it("has InspectorMiddleware registered (INSPECTOR tag, deserialize step)", async () => {
+    const client = await getDynamoDBClient();
+    expect(hasInspectorMiddleware(client)).toBe(true);
+  });
 });
 
 describe("getDynamoDBDocumentClient", () => {

features/dynamodb/lib/client.ts

@@ -2,6 +2,7 @@ import "server-only";
 import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
 import { DynamoDBDocumentClient } from "@aws-sdk/lib-dynamodb";
 import { createAwsConfig } from "@/lib/aws/config";
+import { withInspectorMiddleware } from "@/lib/aws/inspector-middleware";
 
 /**
  * Returns a fresh DynamoDBClient on every call.
@@ -15,7 +16,7 @@ import { createAwsConfig } from "@/lib/aws/config";
  */
 export async function getDynamoDBClient(): Promise<DynamoDBClient> {
   const config = await createAwsConfig();
-  return new DynamoDBClient(config);
+  return withInspectorMiddleware(new DynamoDBClient(config), "DynamoDB");
 }
 
 /**

features/inspector/components/inspector-client/inspector-client.test.tsx

@@ -0,0 +1,224 @@
+import { cleanup, render, screen, act } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { RequestEntry } from "@/features/inspector/lib/types/types";
+import type { InspectorDict } from "@/features/inspector/i18n/en";
+import type { WidenStringLiterals } from "@/features/shared/i18n/widen-literals";
+
+// ── Mocks ─────────────────────────────────────────────────────────────────────
+// vi.mock() is hoisted to the top of the file, BEFORE any const declarations.
+// To reference mock functions inside a vi.mock factory, they must be declared
+// with vi.hoisted() which runs at the same "hoisted" phase as vi.mock itself.
+
+const {
+  mockSeedEntries,
+  mockStartPolling,
+  mockStopPolling,
+  mockRehydrate,
+  mockStoreState,
+} = vi.hoisted(() => {
+  const state = {
+    entries: [] as RequestEntry[],
+    isLoading: false,
+    view: "list" as "list" | "timeline",
+  };
+  return {
+    mockSeedEntries: vi.fn(),
+    mockStartPolling: vi.fn(),
+    mockStopPolling: vi.fn(),
+    mockRehydrate: vi.fn().mockResolvedValue(undefined),
+    mockStoreState: state,
+  };
+});
+
+vi.mock(
+  "@/features/inspector/stores/use-inspector-store/use-inspector-store",
+  () => {
+    const mockStore = vi.fn(() => ({
+      entries: mockStoreState.entries,
+      filters: { service: "", status: "all", text: "" },
+      status: mockStoreState.isLoading ? "polling" : "idle",
+      isLoading: mockStoreState.isLoading,
+      lastUpdatedAt: null,
+      isPolling: mockStoreState.isLoading,
+      view: mockStoreState.view,
+      seedEntries: mockSeedEntries,
+      startPolling: mockStartPolling,
+      stopPolling: mockStopPolling,
+      setFilter: vi.fn(),
+      clearBuffer: vi.fn(),
+      setView: vi.fn(),
+    }));
+    mockStore.persist = { rehydrate: mockRehydrate };
+    return { useInspectorStore: mockStore };
+  },
+);
+
+vi.mock("@/features/inspector/components/inspector-toolbar/inspector-toolbar", () => ({
+  InspectorToolbar: () => <div data-testid="inspector-toolbar" />,
+}));
+
+vi.mock("@/features/inspector/components/request-list/request-list", () => ({
+  RequestList: ({ entries }: { entries: RequestEntry[] }) => (
+    <div data-testid="request-list" data-count={entries.length} />
+  ),
+}));
+
+vi.mock("@/features/inspector/components/inspector-timeline/inspector-timeline", () => ({
+  InspectorTimeline: ({ entries }: { entries: RequestEntry[] }) => (
+    <div data-testid="inspector-timeline" data-count={entries.length} />
+  ),
+}));
+
+vi.mock("@/features/inspector/components/inspector-empty/inspector-empty", () => ({
+  InspectorEmpty: () => <div data-testid="inspector-empty" />,
+}));
+
+vi.mock("@/features/inspector/components/inspector-skeleton/inspector-skeleton", () => ({
+  InspectorSkeleton: ({ withSpine }: { withSpine: boolean }) => (
+    <div data-testid="inspector-skeleton" data-with-spine={withSpine} />
+  ),
+}));
+
+import { InspectorClient } from "./inspector-client";
+
+// ── Fixtures ──────────────────────────────────────────────────────────────────
+
+type ClientDict = Pick<
+  WidenStringLiterals<InspectorDict>,
+  "toolbar" | "empty" | "card" | "detail"
+>;
+
+const dict: ClientDict = {
+  toolbar: {
+    filters: {
+      service: { label: "Service", all: "All services" },
+      status: { label: "Status", all: "All", success: "Success", error: "Error" },
+      text: { placeholder: "Search…" },
+    },
+    view: { label: "View", list: "List", timeline: "Timeline" },
+    clearBuffer: "Clear",
+    statusPolling: "Live",
+    statusError: "Error",
+    statusIdle: "Idle",
+    lastUpdated: "Updated {time} ago",
+  },
+  empty: { title: "No requests", body: "Make some AWS calls" },
+  card: { duration: "{ms}ms", attempts: "{n} attempts", retries: "{n} retries" },
+  detail: {
+    title: "Detail",
+    input: "Input",
+    output: "Output",
+    attempts: "Attempts",
+    duration: "Duration",
+    timestamp: "Timestamp",
+    error: "Error",
+    closeLabel: "Close",
+  },
+};
+
+function makeEntry(id: string): RequestEntry {
+  return {
+    id,
+    timestamp: 1700000000000,
+    service: "SQS",
+    operation: "SendMessageCommand",
+    input: {},
+    output: {},
+    durationMs: 10,
+    status: "success",
+    attempts: 1,
+  };
+}
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+  mockRehydrate.mockResolvedValue(undefined);
+  mockStoreState.entries = [];
+  mockStoreState.isLoading = false;
+  mockStoreState.view = "list";
+});
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe("InspectorClient", () => {
+  it("renders the toolbar", async () => {
+    await act(async () => {
+      render(<InspectorClient initialEntries={[]} dict={dict} />);
+    });
+    expect(screen.getByTestId("inspector-toolbar")).toBeInTheDocument();
+  });
+
+  it("renders the request list when entries exist", async () => {
+    mockStoreState.entries = [makeEntry("e1")];
+    await act(async () => {
+      render(<InspectorClient initialEntries={[]} dict={dict} />);
+    });
+    expect(screen.getByTestId("request-list")).toBeInTheDocument();
+  });
+
+  it("calls rehydrate on mount", async () => {
+    await act(async () => {
+      render(<InspectorClient initialEntries={[]} dict={dict} />);
+    });
+    expect(mockRehydrate).toHaveBeenCalledOnce();
+  });
+
+  it("calls seedEntries with initialEntries on mount", async () => {
+    const entries = [makeEntry("e1"), makeEntry("e2")];
+    await act(async () => {
+      render(<InspectorClient initialEntries={entries} dict={dict} />);
+    });
+    expect(mockSeedEntries).toHaveBeenCalledWith(entries);
+  });
+
+  it("calls startPolling on mount", async () => {
+    await act(async () => {
+      render(<InspectorClient initialEntries={[]} dict={dict} />);
+    });
+    expect(mockStartPolling).toHaveBeenCalledOnce();
+  });
+
+  // ── Task 3.12 / 3.13: view toggle ────────────────────────────────────────────
+
+  it("renders RequestList when view is 'list' and entries exist", async () => {
+    mockStoreState.entries = [makeEntry("e1")];
+    mockStoreState.view = "list";
+    await act(async () => {
+      render(<InspectorClient initialEntries={[]} dict={dict} />);
+    });
+    expect(screen.getByTestId("request-list")).toBeInTheDocument();
+    expect(screen.queryByTestId("inspector-timeline")).not.toBeInTheDocument();
+  });
+
+  it("renders InspectorTimeline when view is 'timeline' and entries exist", async () => {
+    mockStoreState.entries = [makeEntry("e1")];
+    mockStoreState.view = "timeline";
+    await act(async () => {
+      render(<InspectorClient initialEntries={[]} dict={dict} />);
+    });
+    expect(screen.getByTestId("inspector-timeline")).toBeInTheDocument();
+    expect(screen.queryByTestId("request-list")).not.toBeInTheDocument();
+  });
+
+  it("renders InspectorSkeleton when isLoading is true", async () => {
+    mockStoreState.isLoading = true;
+    await act(async () => {
+      render(<InspectorClient initialEntries={[]} dict={dict} />);
+    });
+    expect(screen.getByTestId("inspector-skeleton")).toBeInTheDocument();
+    expect(screen.queryByTestId("request-list")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("inspector-timeline")).not.toBeInTheDocument();
+  });
+
+  it("renders InspectorEmpty when no entries and not loading", async () => {
+    mockStoreState.entries = [];
+    mockStoreState.isLoading = false;
+    await act(async () => {
+      render(<InspectorClient initialEntries={[]} dict={dict} />);
+    });
+    expect(screen.getByTestId("inspector-empty")).toBeInTheDocument();
+    expect(screen.queryByTestId("request-list")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("inspector-timeline")).not.toBeInTheDocument();
+  });
+});