feat(bd-2vw): display raw lore data in debug view

Add DebugView component to show raw lore status data for visual
verification that the data pipeline works end-to-end:
- Frontend -> Tauri IPC -> Rust backend -> lore CLI -> parsed data

New files:
- src/components/DebugView.tsx - Debug component with health indicator
- src/hooks/useLoreData.ts - TanStack Query hook for lore status
- tests/components/DebugView.test.tsx - Component tests
- tests/hooks/useLoreData.test.ts - Hook tests

Modified:
- src/App.tsx - Add QueryClientProvider wrapper
- src/stores/nav-store.ts - Add 'debug' ViewId
- src/components/AppShell.tsx - Add Debug nav tab and view routing
- tests/components/AppShell.test.tsx - Update tests for new nav

tests/components/AppShell.test.tsx

@@ -1,13 +1,29 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { AppShell } from "@/components/AppShell";
 import { useNavStore } from "@/stores/nav-store";
 import { useFocusStore } from "@/stores/focus-store";
 import { useCaptureStore } from "@/stores/capture-store";
+import { useInboxStore } from "@/stores/inbox-store";
 import { simulateEvent, resetMocks } from "../mocks/tauri-api";
 import { makeFocusItem } from "../helpers/fixtures";
 
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
+  );
+}
+
 describe("AppShell", () => {
   beforeEach(() => {
     useNavStore.setState({ activeView: "focus" });
@@ -23,35 +39,48 @@ describe("AppShell", () => {
       lastCapturedId: null,
       error: null,
     });
+    useInboxStore.setState({
+      items: [],
+    });
     resetMocks();
   });
 
   it("renders navigation tabs", () => {
-    render(<AppShell />);
+    renderWithProviders(<AppShell />);
     expect(screen.getByText("Focus")).toBeInTheDocument();
     expect(screen.getByText("Queue")).toBeInTheDocument();
     expect(screen.getByText("Inbox")).toBeInTheDocument();
+    expect(screen.getByText("Debug")).toBeInTheDocument();
   });
 
   it("shows Focus view by default", () => {
-    render(<AppShell />);
+    renderWithProviders(<AppShell />);
     expect(screen.getByText(/all clear/i)).toBeInTheDocument();
   });
 
   it("switches to Queue view when Queue tab is clicked", async () => {
     const user = userEvent.setup();
-    render(<AppShell />);
+    renderWithProviders(<AppShell />);
 
     await user.click(screen.getByText("Queue"));
     expect(await screen.findByText(/no items/i)).toBeInTheDocument();
   });
 
-  it("switches to Inbox placeholder", async () => {
+  it("switches to Inbox view and shows inbox zero", async () => {
     const user = userEvent.setup();
-    render(<AppShell />);
+    renderWithProviders(<AppShell />);
 
     await user.click(screen.getByText("Inbox"));
-    expect(await screen.findByText(/coming in Phase 4b/i)).toBeInTheDocument();
+    // When inbox is empty, shows "Inbox Zero" / "All caught up!"
+    expect(await screen.findByText(/inbox zero/i)).toBeInTheDocument();
+  });
+
+  it("switches to Debug view when Debug tab is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<AppShell />);
+
+    await user.click(screen.getByText("Debug"));
+    expect(await screen.findByText(/lore debug/i)).toBeInTheDocument();
   });
 
   it("shows queue count badge when items exist", () => {
@@ -60,12 +89,12 @@ describe("AppShell", () => {
       queue: [makeFocusItem({ id: "b" }), makeFocusItem({ id: "c" })],
     });
 
-    render(<AppShell />);
+    renderWithProviders(<AppShell />);
     expect(screen.getByText("3")).toBeInTheDocument();
   });
 
   it("opens quick capture overlay on global shortcut event", async () => {
-    render(<AppShell />);
+    renderWithProviders(<AppShell />);
 
     act(() => {
       simulateEvent("global-shortcut-triggered", "quick-capture");
@@ -89,7 +118,7 @@ describe("AppShell", () => {
       ],
     });
 
-    render(<AppShell />);
+    renderWithProviders(<AppShell />);
 
     // Navigate to queue and wait for transition
     await user.click(screen.getByText("Queue"));

tests/components/DebugView.test.tsx

@@ -0,0 +1,148 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { DebugView } from "@/components/DebugView";
+import { setMockResponse, resetMocks } from "../mocks/tauri-api";
+
+function renderWithProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
+  );
+}
+
+describe("DebugView", () => {
+  beforeEach(() => {
+    resetMocks();
+  });
+
+  it("shows loading state initially", () => {
+    renderWithProviders(<DebugView />);
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  });
+
+  it("displays raw JSON data when loaded", async () => {
+    const mockStatus = {
+      last_sync: "2026-02-26T12:00:00Z",
+      is_healthy: true,
+      message: "Lore is healthy",
+      summary: {
+        open_issues: 5,
+        authored_mrs: 2,
+        reviewing_mrs: 3,
+      },
+    };
+
+    setMockResponse("get_lore_status", mockStatus);
+    renderWithProviders(<DebugView />);
+
+    await waitFor(() => {
+      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+    });
+
+    // Check that the debug heading is present
+    expect(screen.getByText(/lore debug/i)).toBeInTheDocument();
+
+    // Check that the JSON is displayed (look for key properties)
+    expect(screen.getByText(/is_healthy/)).toBeInTheDocument();
+    expect(screen.getByText(/open_issues/)).toBeInTheDocument();
+    expect(screen.getByText(/reviewing_mrs/)).toBeInTheDocument();
+  });
+
+  it("shows error state when fetch fails", async () => {
+    setMockResponse("get_lore_status", Promise.reject(new Error("Connection failed")));
+    renderWithProviders(<DebugView />);
+
+    await waitFor(() => {
+      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/error/i)).toBeInTheDocument();
+  });
+
+  it("shows health status indicator", async () => {
+    const mockStatus = {
+      last_sync: "2026-02-26T12:00:00Z",
+      is_healthy: true,
+      message: "Lore is healthy",
+      summary: {
+        open_issues: 5,
+        authored_mrs: 2,
+        reviewing_mrs: 3,
+      },
+    };
+
+    setMockResponse("get_lore_status", mockStatus);
+    renderWithProviders(<DebugView />);
+
+    await waitFor(() => {
+      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("health-indicator")).toBeInTheDocument();
+    expect(screen.getByTestId("health-indicator")).toHaveClass("bg-green-500");
+  });
+
+  it("shows unhealthy indicator when lore is not healthy", async () => {
+    const mockStatus = {
+      last_sync: null,
+      is_healthy: false,
+      message: "lore not configured",
+      summary: null,
+    };
+
+    setMockResponse("get_lore_status", mockStatus);
+    renderWithProviders(<DebugView />);
+
+    await waitFor(() => {
+      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("health-indicator")).toHaveClass("bg-red-500");
+  });
+
+  it("displays last sync time when available", async () => {
+    const mockStatus = {
+      last_sync: "2026-02-26T12:00:00Z",
+      is_healthy: true,
+      message: "Lore is healthy",
+      summary: null,
+    };
+
+    setMockResponse("get_lore_status", mockStatus);
+    renderWithProviders(<DebugView />);
+
+    await waitFor(() => {
+      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+    });
+
+    // The timestamp appears in both the status section and raw JSON
+    const syncTimeElements = screen.getAllByText(/2026-02-26T12:00:00Z/);
+    expect(syncTimeElements.length).toBeGreaterThan(0);
+  });
+
+  it("shows 'never' when last_sync is null", async () => {
+    const mockStatus = {
+      last_sync: null,
+      is_healthy: false,
+      message: "lore not configured",
+      summary: null,
+    };
+
+    setMockResponse("get_lore_status", mockStatus);
+    renderWithProviders(<DebugView />);
+
+    await waitFor(() => {
+      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/never/i)).toBeInTheDocument();
+  });
+});