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/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();
+  });
+});