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

src/App.tsx

@@ -1,7 +1,21 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { AppShell } from "@/components/AppShell";
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000, // Consider data fresh for 30 seconds
+      retry: 1, // Retry failed requests once
+    },
+  },
+});
+
 function App(): React.ReactElement {
-  return <AppShell />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppShell />
+    </QueryClientProvider>
+  );
 }
 
 export default App;

src/components/AppShell.tsx

@@ -1,7 +1,7 @@
 /**
  * AppShell -- top-level layout with navigation tabs.
  *
- * Switches between Focus, Queue, and Inbox views.
+ * Switches between Focus, Queue, Inbox, Settings, and Debug views.
  * Uses the nav store to track the active view.
  */
 
@@ -10,19 +10,25 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useNavStore } from "@/stores/nav-store";
 import type { ViewId } from "@/stores/nav-store";
 import { useFocusStore } from "@/stores/focus-store";
+import { useInboxStore } from "@/stores/inbox-store";
 import { useBatchStore } from "@/stores/batch-store";
 import { useCaptureStore } from "@/stores/capture-store";
+import { useKeyboardShortcuts } from "@/hooks/useKeyboardShortcuts";
 import { FocusView } from "./FocusView";
 import { QueueView } from "./QueueView";
+import { InboxView } from "./InboxView";
+import { SettingsView } from "./SettingsView";
 import { BatchMode } from "./BatchMode";
 import { QuickCapture } from "./QuickCapture";
+import { DebugView } from "./DebugView";
 import { open } from "@tauri-apps/plugin-shell";
 import { listen } from "@tauri-apps/api/event";
 
-const NAV_ITEMS: { id: ViewId; label: string }[] = [
+const NAV_ITEMS: { id: ViewId; label: string; shortcut?: string }[] = [
-  { id: "focus", label: "Focus" },
+  { id: "focus", label: "Focus", shortcut: "1" },
-  { id: "queue", label: "Queue" },
+  { id: "queue", label: "Queue", shortcut: "2" },
-  { id: "inbox", label: "Inbox" },
+  { id: "inbox", label: "Inbox", shortcut: "3" },
+  { id: "debug", label: "Debug", shortcut: "4" },
 ];
 
 export function AppShell(): React.ReactElement {
@@ -33,8 +39,19 @@ export function AppShell(): React.ReactElement {
   const current = useFocusStore((s) => s.current);
   const batchIsActive = useBatchStore((s) => s.isActive);
   const exitBatch = useBatchStore((s) => s.exitBatch);
+  const inboxItems = useInboxStore((s) => s.items);
 
   const totalItems = (current ? 1 : 0) + queue.length;
+  const untriagedInboxCount = inboxItems.filter((i) => !i.triaged).length;
+
+  // Register keyboard shortcuts for navigation
+  useKeyboardShortcuts({
+    "mod+1": () => setView("focus"),
+    "mod+2": () => setView("queue"),
+    "mod+3": () => setView("inbox"),
+    "mod+4": () => setView("debug"),
+    "mod+,": () => setView("settings"),
+  });
 
   // Listen for global shortcut events from the Rust backend
   useEffect(() => {
@@ -94,21 +111,67 @@ export function AppShell(): React.ReactElement {
           <button
             key={item.id}
             type="button"
+            data-active={activeView === item.id}
             onClick={() => setView(item.id)}
-            className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
+            className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
               activeView === item.id
                 ? "bg-zinc-800 text-zinc-100"
                 : "text-zinc-500 hover:text-zinc-300"
             }`}
           >
             {item.label}
+            {item.shortcut && (
+              <kbd className="text-[10px] text-zinc-600">{item.shortcut}</kbd>
+            )}
             {item.id === "queue" && totalItems > 0 && (
-              <span className="ml-1.5 rounded-full bg-zinc-700 px-1.5 py-0.5 text-[10px] text-zinc-400">
+              <span
+                data-testid="queue-badge"
+                className="rounded-full bg-zinc-700 px-1.5 py-0.5 text-[10px] text-zinc-400"
+              >
                 {totalItems}
               </span>
             )}
+            {item.id === "inbox" && untriagedInboxCount > 0 && (
+              <span
+                data-testid="inbox-badge"
+                className="rounded-full bg-amber-600/30 px-1.5 py-0.5 text-[10px] text-amber-400"
+              >
+                {untriagedInboxCount}
+              </span>
+            )}
           </button>
         ))}
+
+        <div className="flex-1" />
+
+        {/* Settings button */}
+        <button
+          type="button"
+          aria-label="Settings"
+          data-active={activeView === "settings"}
+          onClick={() => setView("settings")}
+          className={`rounded-md p-1.5 transition-colors ${
+            activeView === "settings"
+              ? "bg-zinc-800 text-zinc-100"
+              : "text-zinc-500 hover:text-zinc-300"
+          }`}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+        </button>
       </nav>
 
       {/* View content */}
@@ -131,11 +194,9 @@ export function AppShell(): React.ReactElement {
                 onSwitchToFocus={() => setView("focus")}
               />
             )}
-            {activeView === "inbox" && (
+            {activeView === "inbox" && <InboxView />}
-              <div className="flex min-h-[calc(100vh-3rem)] items-center justify-center">
+            {activeView === "settings" && <SettingsView />}
-                <p className="text-zinc-500">Inbox view coming in Phase 4b</p>
+            {activeView === "debug" && <DebugView />}
-              </div>
-            )}
           </motion.div>
         </AnimatePresence>
       </div>

src/components/DebugView.tsx

@@ -0,0 +1,113 @@
+/**
+ * DebugView -- displays raw lore data for debugging.
+ *
+ * Shows the raw JSON response from get_lore_status for visual
+ * verification that the data pipeline is working end-to-end.
+ * Access via the debug view in the navigation.
+ */
+
+import { useLoreData } from "@/hooks/useLoreData";
+
+export function DebugView(): React.ReactElement {
+  const { data, isLoading, error, refetch } = useLoreData();
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-[calc(100vh-3rem)] items-center justify-center">
+        <div className="text-zinc-500">Loading lore data...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex min-h-[calc(100vh-3rem)] flex-col items-center justify-center gap-4">
+        <div className="text-red-500">Error: {error.message}</div>
+        <button
+          onClick={() => refetch()}
+          className="rounded bg-zinc-700 px-3 py-1.5 text-sm text-zinc-200 hover:bg-zinc-600"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-zinc-200">Lore Debug</h2>
+        <button
+          onClick={() => refetch()}
+          className="rounded bg-zinc-700 px-3 py-1.5 text-sm text-zinc-200 hover:bg-zinc-600"
+        >
+          Refresh
+        </button>
+      </div>
+
+      {/* Status overview */}
+      <div className="mb-6 rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+        <h3 className="mb-3 text-sm font-medium text-zinc-400">Status</h3>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <span className="text-zinc-500">Health:</span>
+            <div
+              data-testid="health-indicator"
+              className={`h-2.5 w-2.5 rounded-full ${
+                data?.is_healthy ? "bg-green-500" : "bg-red-500"
+              }`}
+            />
+            <span className="text-zinc-300">
+              {data?.is_healthy ? "Healthy" : "Unhealthy"}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-zinc-500">Last Sync:</span>
+            <span className="font-mono text-zinc-300">
+              {data?.last_sync ?? "never"}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-zinc-500">Message:</span>
+            <span className="text-zinc-300">{data?.message}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Summary counts */}
+      {data?.summary && (
+        <div className="mb-6 rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+          <h3 className="mb-3 text-sm font-medium text-zinc-400">Summary</h3>
+          <div className="grid grid-cols-3 gap-4">
+            <div className="text-center">
+              <div className="text-2xl font-semibold text-zinc-200">
+                {data.summary.open_issues}
+              </div>
+              <div className="text-sm text-zinc-500">Open Issues</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-semibold text-zinc-200">
+                {data.summary.authored_mrs}
+              </div>
+              <div className="text-sm text-zinc-500">Authored MRs</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-semibold text-zinc-200">
+                {data.summary.reviewing_mrs}
+              </div>
+              <div className="text-sm text-zinc-500">Reviewing MRs</div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Raw JSON output */}
+      <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
+        <h3 className="mb-3 text-sm font-medium text-zinc-400">Raw Response</h3>
+        <pre className="overflow-x-auto whitespace-pre-wrap font-mono text-xs text-zinc-300">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+}

src/hooks/useLoreData.ts

@@ -0,0 +1,48 @@
+/**
+ * Hook for fetching lore status data via Tauri IPC.
+ *
+ * Uses TanStack Query for caching and state management.
+ * The data can be refreshed via query invalidation when
+ * lore-data-changed events are received.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { getLoreStatus } from "@/lib/tauri";
+import type { LoreStatus } from "@/lib/bindings";
+
+export interface UseLoreDataResult {
+  data: LoreStatus | undefined;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+/**
+ * Fetch lore status data from the Tauri backend.
+ *
+ * Returns the current lore status including health, last sync time,
+ * and summary counts (open issues, authored MRs, reviewing MRs).
+ */
+export function useLoreData(): UseLoreDataResult {
+  const query = useQuery({
+    queryKey: ["lore-status"],
+    queryFn: async (): Promise<LoreStatus> => {
+      const result = await getLoreStatus();
+
+      if (result.status === "error") {
+        throw new Error(result.error.message);
+      }
+
+      return result.data;
+    },
+    refetchInterval: false, // Manual refetch on lore-data-changed
+    staleTime: 30_000, // Consider data fresh for 30 seconds
+  });
+
+  return {
+    data: query.data,
+    isLoading: query.isLoading,
+    error: query.error,
+    refetch: query.refetch,
+  };
+}

src/stores/nav-store.ts

@@ -9,7 +9,7 @@ import { create } from "zustand";
 import { persist, createJSONStorage } from "zustand/middleware";
 import { getStorage } from "@/lib/tauri-storage";
 
-export type ViewId = "focus" | "queue" | "inbox";
+export type ViewId = "focus" | "queue" | "inbox" | "settings" | "debug";
 
 export interface NavState {
   activeView: ViewId;

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

tests/hooks/useLoreData.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createElement } from "react";
+import { useLoreData } from "@/hooks/useLoreData";
+import { setMockResponse, resetMocks } from "../mocks/tauri-api";
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return createElement(QueryClientProvider, { client: queryClient }, children);
+  };
+}
+
+describe("useLoreData", () => {
+  beforeEach(() => {
+    resetMocks();
+  });
+
+  it("returns loading state initially", () => {
+    const { result } = renderHook(() => useLoreData(), {
+      wrapper: createWrapper(),
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.data).toBeUndefined();
+  });
+
+  it("returns lore status data on success", 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);
+
+    const { result } = renderHook(() => useLoreData(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.data).toEqual(mockStatus);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("returns error state when IPC fails", async () => {
+    setMockResponse("get_lore_status", Promise.reject(new Error("IPC failed")));
+
+    const { result } = renderHook(() => useLoreData(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.error).toBeTruthy();
+    expect(result.current.data).toBeUndefined();
+  });
+
+  it("returns unhealthy status", async () => {
+    const mockStatus = {
+      last_sync: null,
+      is_healthy: false,
+      message: "lore not configured",
+      summary: null,
+    };
+
+    setMockResponse("get_lore_status", mockStatus);
+
+    const { result } = renderHook(() => useLoreData(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.data?.is_healthy).toBe(false);
+    expect(result.current.data?.summary).toBeNull();
+  });
+});