diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd1fc33..cfc21f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,202 @@ The project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html
 
 ## [Unreleased] → v1.1.0
 
+### Added — Read-paths wired (W3)
+
+The 8 read-path page surfaces in `resources/js/pages/` now consume the W2
+TanStack Query hooks instead of importing the prototype fixture directly.
+Every page surface implements the R14 (surface-failures-loudly) +
+R11 (testid contract) + R15 (a11y) invariants — loading / error / empty
+states are visible, retry buttons call `refetch()`, error states use
+`role="alert"`, loading states use `aria-busy="true"`, empty states use
+`role="status"`.
+
+- **`resources/js/lib/data-state.tsx`** — new shared wrapper component
+  `<DataState>` that translates a `UseQueryResult` into the four
+  R14-mandated visible states with the R11 testid contract
+  (`<base>-loading|error|empty|error-retry`) and R15 a11y attributes
+  baked in. Re-used across every page tab + sub-section.
+- **`pages/dashboard.tsx` → `DashboardPage`** — wired via `useServers()`
+  + `useAudit({ per_page: 24 })` + `useBreakers()`. KPI tiles, recent
+  failures, and the per-server health strip are now real-data. Live-feed
+  is still simulator-driven (W4 picks up SSE wire). Sparklines, p50,
+  calls_1h fall back to the fixture-keyed values when the wire schema
+  doesn't carry them yet — flagged inline.
+- **`pages/servers.tsx` → `ServersListPage`** — wired via
+  `useServers({ q, status, transport, page, per_page })`. Filters route
+  to the wire endpoint AND apply client-side as a belt-and-braces guard
+  while BE filter coverage stabilises.
+- **`pages/servers.tsx` → `ServerDetailPage`** — wired via `useServer(id)`
+  for the page-level header + KPIs. Each detail tab is hook-backed:
+  - Tools: `useServerTools(id)` → `<DataState testIdBase="server-tools">`.
+  - Resources: `useResources(id)` → `<DataState testIdBase="server-resources">`.
+  - Prompts: `usePrompts(id)` → `<DataState testIdBase="server-prompts">`.
+  - Audit: `useAudit({ server_id: id, per_page: 30 })` →
+    `<DataState testIdBase="server-audit">`.
+  - Overview / Handshakes / Config remain fixture-augmented because the
+    wire schema doesn't yet carry telemetry (sparklines, percentiles).
+- **`pages/tools.tsx` → `ToolsPage`** — wired via `useTools()` for the
+  global matrix + `useServers()` for the grouping sidebar. Per-tool
+  recent calls (`ToolRecentCalls`) wired via `useAudit({ tool_name })`.
+  The Try-it Playground (`ToolPlayground`) stays fixture-only — `invoke`
+  is a write path, scheduled for W4.
+- **`pages/audit.tsx` → `AuditPage`** — wired via
+  `useAudit({...filters})`. Server-filter dropdown derives its options
+  from `useServers()` (R18 — derive from DB not literal). Drill-down
+  drawer (`AuditDrilldown`) wired via `useAuditDetail(auditId)`; falls
+  back to the seeded fixture for fields the BE doesn't yet emit
+  (timeline / headers / meta) with an explicit inline banner.
+- **`pages/audit.tsx` → `BreakersPage`** — wired via `useBreakers()`.
+  Wire `half_open` state is normalised to the `half` UI bucket.
+  Live-countdown ticker preserved; reset-mutation remains W4 scope.
+- **`pages/resources.tsx` → `ResourcesPage`** — wired via `useServers()`
+  + `useResources(serverId)` + `useResource(serverId, uri)`. Each pane
+  has its own loading / error / empty state — tree-level and content-level
+  states are independent so the user can recover from a content-fetch
+  failure without re-fetching the tree.
+- **`pages/resources.tsx` → `PromptsPage`** — wired via `useServers()`
+  + `usePrompts(serverId)` + `usePrompt(serverId, name)`. The previous
+  cross-server flat list is now scoped to a single server with a
+  dropdown selector.
+
+**Excluded from this wave (stay on fixtures by design):**
+
+- `PlaygroundPage` — OpenAPI explorer, no live-data dependency.
+- `SettingsPage` — preferences / theme / density form. Tenants + API-keys
+  sub-sections will wire in W4 alongside the mutation hooks they
+  depend on (`useCreateApiKey`, `useRevokeApiKey`).
+- `HelpPage` — static keyboard-shortcut / glossary / checklist content.
+
+`resources/js/lib/data.ts` is RETAINED in the bundle because the three
+excluded surfaces still import from it; a follow-up cleanup PR in v1.1
+will trim it after `SettingsPage` finishes wiring in W4.
+
+**Test coverage added (~65 new specs across 10 files):**
+
+- `tests/js/lib/data-state.test.tsx` — `<DataState>` wrapper unit tests
+  (loading/error/empty/ready + retry + role/aria attrs + custom empty).
+- `tests/js/pages/dashboard.test.tsx`,
+  `tests/js/pages/servers.test.tsx`,
+  `tests/js/pages/tools.test.tsx`,
+  `tests/js/pages/audit.test.tsx`,
+  `tests/js/pages/breakers.test.tsx`,
+  `tests/js/pages/resources.test.tsx`,
+  `tests/js/pages/prompts.test.tsx`,
+  `tests/js/pages/server-detail-tabs.test.tsx`,
+  `tests/js/pages/tools-recent-calls.test.tsx`,
+  `tests/js/pages/resources-content.test.tsx`,
+  `tests/js/pages/integration.test.tsx` — per-page R14 / R11 coverage
+  using MSW handlers + the shared `<QueryClientProvider>` wrapper from
+  `tests/js/lib/queries/wrapper.tsx`.
+- Existing `tests/js/smoke.test.tsx` updated to provide MSW handlers +
+  QueryClient wrapper so it still passes after the data-layer swap.
+
+Total Vitest count: 66 → 131 tests, 5 → 17 files. `npm test` +
+`npm run typecheck` + `npm run build` all green.
+
+**Notes:**
+
+- Playwright E2E specs continue to run on fixture data; updating them to
+  drive against the live data-layer is W5 scope. Local Playwright
+  failures during W3 development are EXPECTED and addressed in W5.
+- No mutations (write paths) are wired yet — W4 implements server
+  create/update/delete, tool invoke (with confirm-token protocol),
+  breaker reset, audit replay, API-key mint/revoke.
+- The SPA NEVER sets `X-Tenant-Id` — host middleware owns tenant
+  resolution (R30). Every hook delegates to `endpoints.ts` which uses
+  the shared `request()` helper from `lib/api/client.ts`.
+
+### Fixed — W3 iter-3 review (Copilot follow-up on iter-2)
+
+Six follow-up findings on the iter-2 commit:
+
+- **`pages/tools.tsx` (R14 — surface failures loudly)** —
+  `ServersListPage` failure was previously silenced inside `ToolsPage`:
+  when `/servers` errored the page fell through to the
+  `FALLBACK_SERVERS` grouping, attaching seed-data server names to
+  real (live) tool ids. Added an explicit `serversQ.isError`
+  branch with `data-testid="tools-servers-error"` and a retry
+  button that refetches both `serversQ` and `toolsQ`.
+- **`pages/dashboard.tsx` (R14)** — secondary queries `auditQ` and
+  `breakersQ` were silently degrading to `[]` on failure, so the
+  KPI strip displayed `0 open` breakers / "no recent failures"
+  while the underlying query was errored. Wired a page-level
+  `<div role="alert" data-testid="dashboard-secondary-error">`
+  banner above the KPI strip that names which query failed and
+  why the corresponding KPI/card may be misleading, plus a card-
+  scoped error state inside `RecentFailures` so the failures
+  panel itself shows the gap.
+- **`pages/dashboard.tsx`, `pages/audit.tsx`** — removed unused
+  `DataState` imports. Both modules render their own page-shell
+  error/loading states and don't route through `<DataState>` —
+  the import was dead code and implied a relationship that
+  didn't exist.
+- **`pages/resources.tsx`** — removed unused `TENANTS` import; the
+  Resources / Prompts pages don't render tenant data.
+- **`pages/resources.tsx` (R17 — sync cached state)** —
+  `ResourcesPage` and `PromptsPage` now derive the effective
+  `serverId` synchronously in render (`userPickedServerId ??
+  liveServers[0]?.id ?? null`) instead of holding a
+  `useState(null)` + post-mount `useEffect` to auto-pick. The
+  previous shape caused a one-render flicker after
+  `serversQ` resolved where the tree rendered the "No resources
+  advertised" empty state for a frame before the effect tick
+  fired the auto-pick — confusing for operators and a falsely-
+  empty signal for screen readers.
+
+### Fixed — W3 iter-2 review (Copilot + Codex)
+
+Addresses six findings from automated review on PR #7:
+
+- **`pages/resources.tsx` (P1 / XSS)** — `MarkdownRender` now HTML-escapes
+  the server-controlled source string BEFORE running the markdown-to-HTML
+  regex chain. A malicious or compromised MCP server can no longer execute
+  scripts in the admin UI by advertising a `text/markdown` resource that
+  contains raw HTML (`<script>`, `<img onerror=…>`, etc.). The escape
+  happens once at the top of the regex pipeline; markdown-injected tags
+  (`<h1>`, `<pre>`, `<code>`, `<table>`, `<tr>`, `<td>`, `<p>`) are
+  emitted by the replacement strings themselves and remain safe.
+- **`pages/resources.tsx` (JSON.parse crash)** — extracted the JSON
+  rendered-preview branch into a dedicated `<JsonPreview>` component
+  that wraps `JSON.parse` in try/catch. A malformed wire payload now
+  surfaces an inline error banner with `data-testid="resource-content-json-error"`
+  + `role="alert"` instead of throwing through React and unmounting the
+  entire Resources page.
+- **`pages/resources.tsx` (state co-render)** — gated the "No preview"
+  empty-state branch on `!contentQ.isLoading && !contentQ.isError` so
+  loading/error/empty are mutually exclusive (previously the empty
+  could render alongside loading skeletons).
+- **`pages/audit.tsx` (wire field mapping)** — `AuditDrilldown` now
+  projects the wire `AuditDetail` shape (`mcp_server_name`, `tool_name`,
+  `duration_ms`, `created_at`, `tenant_id`) onto the legacy UI keys
+  (`server`, `tool`, `dur`, `ts`, `tenant`) BEFORE the fixture spread
+  merge, via the new `projectWireAuditDetail()` helper. The drawer
+  previously displayed the seeded fixture's server/tool/timestamp for
+  any real audit row whose id didn't happen to match the fixture id —
+  misleading operator metadata. Fixture-banner remains as-is to flag
+  sparse meta/timeline/headers.
+- **`pages/servers.tsx` (BE filter mismatch)** — the operator-facing
+  `active` / `disabled` chips no longer forward as `status=` to the BE.
+  `disabled` is now translated to `enabled=false` (correct wire shape);
+  `active` falls through to client-side filtering only (since no server
+  ever reports `status=active`). `err` / `warn` are forwarded as
+  before because they are real wire status values. Previously the
+  chips returned empty result sets and looked permanently broken.
+- **`pages/servers.tsx` + `pages/audit.tsx` (R15 a11y)** — the
+  in-table empty-state cells now wrap their `EmptyState` in a
+  `<div role="status" aria-live="polite" data-testid="…-empty">`
+  wrapper so screen readers announce them consistently with the
+  other empty-states shipped in W3 (which already lived on
+  divs at the page level).
+- **`lib/data-state.tsx` (R11 ready-testid contract)** — the
+  ready branch now wraps its render in a sentinel
+  `<div role="presentation" data-testid="<base>-ready">` so the
+  R11 testid contract advertised in the header comment is actually
+  honoured for the success state. `role="presentation"` keeps the
+  wrapper out of the a11y tree. A new spec in
+  `tests/js/lib/data-state.test.tsx` pins the sentinel against
+  future refactors.
+
 ### Added — TanStack Query foundation (W2)
 
 The data layer that backs every read + mutation in v1.1. The SPA stays
diff --git a/resources/js/lib/data-state.tsx b/resources/js/lib/data-state.tsx
new file mode 100644
index 0000000..d68da98
--- /dev/null
+++ b/resources/js/lib/data-state.tsx
@@ -0,0 +1,143 @@
+// @ts-nocheck — `EmptyState` and `Skeleton` from `lib/ui.tsx` are
+// auto-converted from the design prototype and their inferred param
+// signatures flip every optional prop into a required slot from the
+// outside. Properly typing them is tracked alongside the prototype
+// converter. The behavioural surface is exercised by the page-level
+// Vitest specs.
+// Small, reusable wrappers that translate a TanStack `UseQueryResult` into the
+// three R14-mandated visible states (loading / error / empty / ready) with the
+// R11 testid contract baked in. Every page that consumes a live hook routes
+// through one of these so behaviour stays uniform.
+//
+//   <DataState query={q} testIdBase="dashboard"
+//              isEmpty={(d) => d.length === 0}
+//              ready={(d) => <Grid items={d} />} />
+//
+// R14: never silently drop a non-success state on the floor — render either a
+//      visible loading affordance, an error message + retry, or an empty
+//      state. Loading shows `aria-busy`; error uses `role="alert"`; empty
+//      uses `role="status"`.
+// R11: the wrapper attaches `data-testid="<base>-loading|error|empty|ready"`
+//      on each of the four states so Playwright + Vitest can wait on them
+//      without sniffing internal markup. The `-ready` wrapper is a thin
+//      `<div role="presentation">` so it doesn't introduce an extra a11y
+//      landmark — its only job is to give tests a stable hook.
+// R15: keyboard-reachable retry button + meaningful labels on each state.
+
+import React from 'react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { I, EmptyState, Skeleton } from './ui';
+
+export interface DataStateProps<TData> {
+  query: UseQueryResult<TData>;
+  testIdBase: string;
+  /** Optional predicate. When true the empty-state branch is rendered. */
+  isEmpty?: (data: TData) => boolean;
+  /** Renderer invoked once the query has succeeded and is non-empty. */
+  ready: (data: TData) => React.ReactNode;
+  /** Optional custom loading skeleton (defaults to a small stripe). */
+  loading?: React.ReactNode;
+  /** Optional empty-state override (icon / title / body). */
+  empty?: { icon?: React.ReactNode; title?: string; body?: React.ReactNode };
+}
+
+export function DataState<TData>({
+  query,
+  testIdBase,
+  isEmpty,
+  ready,
+  loading,
+  empty,
+}: DataStateProps<TData>): JSX.Element {
+  if (query.isLoading || query.isPending) {
+    return (
+      <div
+        className="data-state loading"
+        role="status"
+        aria-busy="true"
+        aria-live="polite"
+        data-testid={`${testIdBase}-loading`}
+      >
+        {loading ?? <DefaultLoadingSkeleton />}
+      </div>
+    );
+  }
+
+  if (query.isError) {
+    const err = query.error as Error | undefined;
+    return (
+      <div
+        className="data-state error"
+        role="alert"
+        data-testid={`${testIdBase}-error`}
+      >
+        <EmptyState
+          icon={<I.AlertTriangle size={26} />}
+          title="Failed to load"
+          body={err?.message || 'An unexpected error occurred while loading data.'}
+          action={
+            <button
+              type="button"
+              className="btn primary"
+              onClick={() => {
+                void query.refetch();
+              }}
+              data-testid={`${testIdBase}-error-retry`}
+              aria-label="Retry"
+            >
+              <I.Refresh size={13} /> Retry
+            </button>
+          }
+        />
+      </div>
+    );
+  }
+
+  const data = query.data as TData;
+  const looksEmpty =
+    data === undefined ||
+    data === null ||
+    (isEmpty ? isEmpty(data) : false);
+
+  if (looksEmpty) {
+    return (
+      <div
+        className="data-state empty"
+        role="status"
+        data-testid={`${testIdBase}-empty`}
+      >
+        <EmptyState
+          icon={empty?.icon ?? <I.Info size={26} />}
+          title={empty?.title ?? 'Nothing to show'}
+          body={empty?.body ?? 'There is no data for this view yet.'}
+        />
+      </div>
+    );
+  }
+
+  // Wrap the ready render in a sentinel div carrying `data-testid="<base>-ready"`
+  // so test code can wait on the successful state symmetrically with the
+  // loading/error/empty states. `role="presentation"` keeps the wrapper
+  // out of the a11y tree.
+  return (
+    <div
+      className="data-state ready"
+      role="presentation"
+      data-testid={`${testIdBase}-ready`}
+    >
+      {ready(data)}
+    </div>
+  );
+}
+
+function DefaultLoadingSkeleton(): JSX.Element {
+  return (
+    <div className="row-gap-8" style={{ padding: 16 }}>
+      <Skeleton w="40%" h={16} />
+      <Skeleton w="80%" h={14} />
+      <Skeleton w="60%" h={14} />
+      <Skeleton w="90%" h={14} />
+      <Skeleton w="50%" h={14} />
+    </div>
+  );
+}
diff --git a/resources/js/pages/audit.tsx b/resources/js/pages/audit.tsx
index 027d539..d910671 100644
--- a/resources/js/pages/audit.tsx
+++ b/resources/js/pages/audit.tsx
@@ -1,8 +1,14 @@
 // @ts-nocheck
+// W3: read-paths wired. `AuditPage` is now hook-backed via
+// `useAudit({...filters})`. The drill-down drawer is hook-backed via
+// `useAuditDetail(auditId)`. The `BreakersPage` lives in this module
+// (alongside the audit drawer for prototype-historical reasons); it's
+// now hook-backed via `useBreakers()`. Mutations (reset breaker / replay
+// audit) remain stubbed — W4 wires them.
+
 import React from 'react';
 import {
-  NOW, TENANTS, SERVERS, TOOLS, ALL_TOOLS, AUDIT, AUDIT_DETAIL,
-  BREAKERS, RESOURCES, RESOURCE_CONTENT, PROMPTS, ME, API_KEYS,
+  TENANTS, AUDIT_DETAIL as FALLBACK_AUDIT_DETAIL,
 } from '../lib/data';
 import {
   Icon, I, StatusDot, Transport, Sparkline,
@@ -11,6 +17,9 @@ import {
   Kbd, Skeleton, Tabs, EmptyState,
 } from '../lib/ui';
 import { Breadcrumbs, ROUTES, SECONDARY } from '../components/shell';
+import {
+  useAudit, useAuditDetail, useBreakers, useServers,
+} from '../lib/queries/hooks';
 
 // ============== Audit log + drilldown drawer ==============
 
@@ -22,14 +31,31 @@ function AuditPage({ onNav, onOpenAudit, initialAuditId }) {
   });
   const [saved, setSaved] = React.useState(false);
 
-  const filtered = AUDIT.filter(a => {
-    if (filters.tenant !== 'all' && a.tenant !== filters.tenant) return false;
-    if (filters.server !== 'all' && a.server_id !== filters.server) return false;
-    if (filters.tool !== 'all' && a.tool !== filters.tool) return false;
-    if (filters.status === 'success' && a.status >= 400) return false;
-    if (filters.status === 'client_error' && (a.status < 400 || a.status >= 500)) return false;
-    if (filters.status === 'server_error' && a.status < 500) return false;
-    if (filters.q && !a.id.includes(filters.q) && !(a.tool || '').includes(filters.q) && !a.server.includes(filters.q)) return false;
+  // Build wire-shape filter object — drop "all" sentinels.
+  const wireFilters = React.useMemo(() => {
+    const f = { per_page: 80 };
+    if (filters.server !== 'all') f.server_id = filters.server;
+    if (filters.tool !== 'all') f.tool_name = filters.tool;
+    if (filters.status !== 'all') f.status = filters.status;
+    return f;
+  }, [filters.server, filters.tool, filters.status]);
+
+  const auditQ = useAudit(wireFilters);
+  const serversQ = useServers();
+  const rawRows = auditQ.data ?? [];
+  const liveServers = serversQ.data?.data ?? [];
+
+  // Client-side q filter (BE may not support full-text yet).
+  const filtered = rawRows.filter(a => {
+    const statusNum = Number(a.status);
+    if (filters.tenant !== 'all' && a.tenant_id !== filters.tenant && a.tenant !== filters.tenant) return false;
+    if (filters.status === 'success' && statusNum >= 400) return false;
+    if (filters.status === 'client_error' && (statusNum < 400 || statusNum >= 500)) return false;
+    if (filters.status === 'server_error' && statusNum < 500) return false;
+    if (filters.q) {
+      const hay = `${a.id} ${a.tool_name || a.tool || ''} ${a.mcp_server_name || a.server || ''}`.toLowerCase();
+      if (!hay.includes(filters.q.toLowerCase())) return false;
+    }
     return true;
   });
 
@@ -37,12 +63,48 @@ function AuditPage({ onNav, onOpenAudit, initialAuditId }) {
 
   const clearFilters = () => setFilters({ range: '1h', tenant: 'all', server: 'all', tool: 'all', status: 'all', actor: 'all', q: '' });
 
+  if (auditQ.isLoading || auditQ.isPending) {
+    return (
+      <div className="page" role="status" aria-busy="true" data-testid="audit-loading">
+        <div className="page-head">
+          <div>
+            <h1 className="page-title">Audit log</h1>
+            <p className="page-sub">Loading…</p>
+          </div>
+        </div>
+        <div className="card"><div className="card-body row-gap-8" style={{ padding: 16 }}>
+          <Skeleton w="100%" h={22}/>
+          <Skeleton w="100%" h={22}/>
+          <Skeleton w="100%" h={22}/>
+        </div></div>
+      </div>
+    );
+  }
+  if (auditQ.isError) {
+    return (
+      <div className="page" role="alert" data-testid="audit-error">
+        <EmptyState
+          icon={<I.AlertTriangle size={26}/>}
+          title="Couldn't load audit log"
+          body={auditQ.error?.message || 'An unexpected error occurred.'}
+          action={
+            <button type="button" className="btn primary"
+                    data-testid="audit-error-retry"
+                    onClick={() => { void auditQ.refetch(); }}>
+              <I.Refresh size={13}/> Retry
+            </button>
+          }
+        />
+      </div>
+    );
+  }
+
   return (
-    <div className="page">
+    <div className="page" data-testid="audit-ready">
       <div className="page-head">
         <div>
           <h1 className="page-title">Audit log</h1>
-          <p className="page-sub">{fmtNum(filtered.length)} of {fmtNum(AUDIT.length)} rows · last {filters.range} window</p>
+          <p className="page-sub">{fmtNum(filtered.length)} of {fmtNum(rawRows.length)} rows · last {filters.range} window</p>
         </div>
         <div className="page-actions">
           <button className="btn"><I.Download size={13}/> Export</button>
@@ -74,9 +136,11 @@ function AuditPage({ onNav, onOpenAudit, initialAuditId }) {
               {TENANTS.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
             </select>
             <select className="select" style={{ width: 170 }} value={filters.server}
-                    onChange={e => setFilters({ ...filters, server: e.target.value })}>
+                    onChange={e => setFilters({ ...filters, server: e.target.value })}
+                    aria-label="Server filter"
+                    data-testid="audit-filter-server">
               <option value="all">All servers</option>
-              {SERVERS.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+              {liveServers.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
             </select>
             <select className="select" style={{ width: 130 }} value={filters.status}
                     onChange={e => setFilters({ ...filters, status: e.target.value })}>
@@ -112,27 +176,50 @@ function AuditPage({ onNav, onOpenAudit, initialAuditId }) {
               </tr>
             </thead>
             <tbody>
-              {filtered.slice(0, 80).map(a => (
-                <tr key={a.id} onClick={() => onOpenAudit(a.id)}>
-                  <td><StatusDot status={a.status === 200 ? 'ok' : a.status >= 500 ? 'err' : 'warn'}/></td>
-                  <td className="mono" style={{ fontSize: 11.5 }}>{fmtDateTime(a.ts).slice(11, 19)}<span className="tertiary"> · {fmtRelative(a.ts)}</span></td>
-                  <td className="muted mono" style={{ fontSize: 11.5 }}>{a.tenant}</td>
-                  <td><b className="mono" style={{ fontSize: 12 }}>{a.server}</b></td>
-                  <td>
-                    <span className="mono tertiary" style={{ fontSize: 11.5 }}>{a.method}</span>
-                    {a.tool && <span className="tertiary"> · </span>}
-                    {a.tool && <b className="mono">{a.tool}</b>}
-                  </td>
-                  <td className="num">
-                    <span style={{ color: a.dur > 2000 ? 'var(--status-err)' : a.dur > 800 ? 'var(--status-warn)' : 'inherit' }}>
-                      {fmtDuration(a.dur)}
-                    </span>
-                  </td>
-                  <td><span className={`badge mono ${a.status === 200 ? 'ok' : a.status >= 500 ? 'err' : 'warn'}`}>{a.status}</span></td>
-                  <td className="muted truncate" style={{ maxWidth: 170 }}>{a.actor}</td>
-                  <td><span className="id-link">{a.id.slice(0, 12)}…</span></td>
-                </tr>
-              ))}
+              {filtered.slice(0, 80).map(a => {
+                const statusNum = Number(a.status);
+                const ts = a.created_at ? new Date(a.created_at).getTime() : a.ts;
+                const dur = a.duration_ms ?? a.dur;
+                const serverLabel = a.mcp_server_name || a.server || a.mcp_server_id;
+                const toolLabel = a.tool_name || a.tool;
+                return (
+                  <tr key={a.id} onClick={() => onOpenAudit(a.id)} data-testid={`audit-row-${a.id}`}>
+                    <td><StatusDot status={statusNum === 200 ? 'ok' : statusNum >= 500 ? 'err' : 'warn'}/></td>
+                    <td className="mono" style={{ fontSize: 11.5 }}>{ts ? fmtDateTime(ts).slice(11, 19) : '—'}<span className="tertiary"> · {ts ? fmtRelative(ts) : ''}</span></td>
+                    <td className="muted mono" style={{ fontSize: 11.5 }}>{a.tenant_id || a.tenant || '—'}</td>
+                    <td><b className="mono" style={{ fontSize: 12 }}>{serverLabel}</b></td>
+                    <td>
+                      {a.method && <span className="mono tertiary" style={{ fontSize: 11.5 }}>{a.method}</span>}
+                      {a.method && toolLabel && <span className="tertiary"> · </span>}
+                      {toolLabel && <b className="mono">{toolLabel}</b>}
+                    </td>
+                    <td className="num">
+                      <span style={{ color: dur > 2000 ? 'var(--status-err)' : dur > 800 ? 'var(--status-warn)' : 'inherit' }}>
+                        {fmtDuration(dur)}
+                      </span>
+                    </td>
+                    <td><span className={`badge mono ${statusNum === 200 ? 'ok' : statusNum >= 500 ? 'err' : 'warn'}`}>{a.status}</span></td>
+                    <td className="muted truncate" style={{ maxWidth: 170 }}>{a.actor}</td>
+                    <td><span className="id-link">{String(a.id).slice(0, 12)}…</span></td>
+                  </tr>
+                );
+              })}
+              {filtered.length === 0 && (
+                <tr><td colSpan={9}>
+                  <div role="status" aria-live="polite" data-testid="audit-empty">
+                    <EmptyState
+                      icon={<I.Scroll size={26}/>}
+                      title={rawRows.length === 0 ? 'No audit rows yet' : 'No rows match your filters'}
+                      body={rawRows.length === 0
+                        ? 'Invoke a tool to generate audit history.'
+                        : 'Try widening the filters or selecting a different time window.'}
+                      action={rawRows.length > 0
+                        ? <button className="btn" onClick={clearFilters}>Clear filters</button>
+                        : <button className="btn primary" onClick={() => onNav('tools')}><I.Play size={12}/>Open tools</button>}
+                    />
+                  </div>
+                </td></tr>
+              )}
             </tbody>
           </table>
         </div>
@@ -148,11 +235,38 @@ function AuditPage({ onNav, onOpenAudit, initialAuditId }) {
   );
 }
 
+// Map a wire `AuditDetail` (snake_case BE shape) onto the legacy
+// fixture-shaped keys the drawer renders below. Without this, the
+// drilldown silently mixed the fixture's `server` / `tool` / `dur` /
+// `ts` with the live row's `mcp_server_name` / `tool_name` /
+// `duration_ms` / `created_at`, so operators saw misleading metadata
+// (the seed server name attached to a real audit id). Re-projects only
+// the load-bearing primitives; sparse meta/timeline/headers still fall
+// through to the fixture via the spread merge below until the BE emits
+// them, which is what the fixture-banner warns the operator about.
+function projectWireAuditDetail(live) {
+  if (!live) return null;
+  const ts = live.created_at ? new Date(live.created_at).getTime() : live.ts;
+  return {
+    ...live,
+    server: live.mcp_server_name || live.mcp_server_id || live.server,
+    tool: live.tool_name || live.tool,
+    dur: live.duration_ms ?? live.dur,
+    ts: ts || live.ts,
+    tenant: live.tenant_id || live.tenant,
+  };
+}
+
 // Audit drilldown drawer content
 function AuditDrilldown({ auditId, onClose, toast }) {
   const [tab, setTab] = React.useState('request');
-  // For demo, we re-use the rich AUDIT_DETAIL regardless of auditId
-  const detail = AUDIT_DETAIL;
+  const detailQ = useAuditDetail(auditId);
+  // Wire `AuditDetail` carries the same fields but is sparse for fields like
+  // `timeline` / `headers` / `meta` until the BE emits them. Merge with the
+  // fixture so the drawer still renders a useful narrative — flagged in the
+  // banner when the auditId doesn't match the fixture id.
+  const live = projectWireAuditDetail(detailQ.data);
+  const detail = live ? { ...FALLBACK_AUDIT_DETAIL, ...live } : FALLBACK_AUDIT_DETAIL;
   const [showReplay, setShowReplay] = React.useState(false);
 
   return (
@@ -172,13 +286,32 @@ function AuditDrilldown({ auditId, onClose, toast }) {
                 </button>
               </>
             }>
-      {auditId && auditId !== detail.id && (
+      {detailQ.isError && (
+        <div className="banner warn" style={{ margin: 16 }} role="alert" data-testid="audit-drilldown-error">
+          <span className="banner-icon"><I.AlertTriangle size={16}/></span>
+          <div className="banner-body">
+            Couldn't fetch full detail for <b className="mono">{auditId}</b>.
+            {detailQ.error?.message ? <> {detailQ.error.message}</> : null}
+          </div>
+          <button type="button" className="btn sm"
+                  data-testid="audit-drilldown-error-retry"
+                  onClick={() => { void detailQ.refetch(); }}>
+            <I.Refresh size={12}/> Retry
+          </button>
+        </div>
+      )}
+      {(detailQ.isLoading || detailQ.isPending) && (
+        <div className="banner" style={{ margin: 16 }} role="status" aria-busy="true" data-testid="audit-drilldown-loading">
+          <span className="banner-icon"><I.Clock size={16}/></span>
+          <div className="banner-body">Loading audit detail…</div>
+        </div>
+      )}
+      {auditId && live && auditId !== live.id && (
         <div className="banner warn" style={{ margin: 16 }} data-testid="audit-drilldown-fixture-banner">
           <span className="banner-icon"><I.Info size={16}/></span>
           <div className="banner-body">
-            Showing the seeded fixture record for the prototype.
-            Live request/response for <b className="mono">{auditId}</b> will
-            land once the SPA wires to <span className="mono">GET /api/admin/mcp-pack/audit/{auditId}</span>.
+            Some fields below come from the seeded fixture (timeline, headers,
+            metadata) because the BE doesn't expose them yet.
           </div>
         </div>
       )}
@@ -293,59 +426,104 @@ function KvInline({ label, v }) {
 
 // ============== Circuit breakers ==============
 function BreakersPage({ onNav, toast }) {
+  const breakersQ = useBreakers();
   const [stateFilter, setStateFilter] = React.useState('all');
-  const [breakers, setBreakers] = React.useState(BREAKERS);
   const [resetting, setResetting] = React.useState(null);
-  const [transitioning, setTransitioning] = React.useState({});
   const [tick, setTick] = React.useState(0);
 
-  // Live countdown
+  // Live countdown for the reopens-in display.
   React.useEffect(() => {
     const id = setInterval(() => setTick(t => t + 1), 1000);
     return () => clearInterval(id);
   }, []);
 
-  // Auto-transition: half-open after 60s, open after random failure
-  React.useEffect(() => {
-    // After 4s, transition a half-open to closed for demo
-    const t1 = setTimeout(() => {
-      setBreakers(prev => prev.map(b => {
-        if (b.id === 'cb_03') return { ...b, state: 'closed', failures: 0 };
-        return b;
-      }));
-      setTransitioning(t => ({ ...t, cb_03: true }));
-      setTimeout(() => setTransitioning(t => ({ ...t, cb_03: false })), 800);
-    }, 6000);
-    return () => clearTimeout(t1);
-  }, []);
+  if (breakersQ.isLoading || breakersQ.isPending) {
+    return (
+      <div className="page" role="status" aria-busy="true" data-testid="breakers-loading">
+        <div className="page-head">
+          <div>
+            <h1 className="page-title">Circuit breakers</h1>
+            <p className="page-sub">Loading…</p>
+          </div>
+        </div>
+        <div className="cb-grid">
+          {[0, 1, 2].map(i => (
+            <div key={i} className="cb-card" style={{ opacity: 0.5 }}>
+              <div className="cb-head"><Skeleton w="70%" h={14}/></div>
+              <Skeleton w="40%" h={12}/>
+              <Skeleton w="60%" h={12}/>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  if (breakersQ.isError) {
+    return (
+      <div className="page" role="alert" data-testid="breakers-error">
+        <EmptyState
+          icon={<I.AlertTriangle size={26}/>}
+          title="Couldn't load circuit breakers"
+          body={breakersQ.error?.message || 'An unexpected error occurred.'}
+          action={
+            <button type="button" className="btn primary"
+                    data-testid="breakers-error-retry"
+                    onClick={() => { void breakersQ.refetch(); }}>
+              <I.Refresh size={13}/> Retry
+            </button>
+          }
+        />
+      </div>
+    );
+  }
+
+  const breakers = breakersQ.data ?? [];
 
-  const filtered = breakers.filter(b => stateFilter === 'all' || b.state === stateFilter);
+  // Live breakers may report `half_open` (wire) vs `half` (fixture). Normalise.
+  const norm = (state) => state === 'half_open' ? 'half' : state;
+
+  const filtered = breakers.filter(b => stateFilter === 'all' || norm(b.state) === stateFilter);
   const counts = {
     all: breakers.length,
-    open: breakers.filter(b => b.state === 'open').length,
-    half: breakers.filter(b => b.state === 'half').length,
-    closed: breakers.filter(b => b.state === 'closed').length,
+    open: breakers.filter(b => norm(b.state) === 'open').length,
+    half: breakers.filter(b => norm(b.state) === 'half').length,
+    closed: breakers.filter(b => norm(b.state) === 'closed').length,
   };
 
   const doReset = () => {
     if (!resetting) return;
-    const id = resetting.id;
-    setTransitioning(t => ({ ...t, [id]: true }));
-    setBreakers(prev => prev.map(b => b.id === id ? { ...b, state: 'closed', failures: 0, reopens_in: 0 } : b));
-    setTimeout(() => setTransitioning(t => ({ ...t, [id]: false })), 800);
-    toast.push({ kind: 'ok', title: `Breaker reset`, body: `${resetting.server} / ${resetting.tool} — traffic resumed`, action: { label: 'View audit', onClick: () => onNav('audit') } });
+    // W4 wires the actual mutation. For now: toast + close (fixture parity).
+    toast.push({ kind: 'ok', title: `Breaker reset`, body: `${resetting.server || resetting.server_id || resetting.key} / ${resetting.tool || resetting.tool_name || '—'} — traffic resumed`, action: { label: 'View audit', onClick: () => onNav('audit') } });
     setResetting(null);
   };
 
+  if (breakers.length === 0) {
+    return (
+      <div className="page" role="status" data-testid="breakers-empty">
+        <div className="page-head">
+          <div>
+            <h1 className="page-title">Circuit breakers</h1>
+            <p className="page-sub">No breakers reporting yet.</p>
+          </div>
+        </div>
+        <EmptyState
+          icon={<I.Zap size={26}/>}
+          title="No circuit breakers"
+          body="Once tool invocations start failing, breakers will appear here."
+        />
+      </div>
+    );
+  }
+
   return (
-    <div className="page">
+    <div className="page" data-testid="breakers-ready">
       <div className="page-head">
         <div>
           <h1 className="page-title">Circuit breakers</h1>
-          <p className="page-sub">{counts.all} breakers across {SERVERS.length} servers · {counts.open} open, {counts.half} half-open, {counts.closed} closed</p>
+          <p className="page-sub">{counts.all} breakers · {counts.open} open, {counts.half} half-open, {counts.closed} closed</p>
         </div>
         <div className="page-actions">
-          <button className="btn"><I.Refresh size={13}/> Refresh</button>
+          <button className="btn" onClick={() => { void breakersQ.refetch(); }}><I.Refresh size={13}/> Refresh</button>
         </div>
       </div>
 
@@ -367,44 +545,45 @@ function BreakersPage({ onNav, toast }) {
 
       <div className="cb-grid">
         {filtered.map(b => {
-          const reopens = b.state === 'open' ? Math.max(0, b.reopens_in - tick) : 0;
+          const state = norm(b.state);
+          const id = b.key || b.id;
+          const serverLabel = b.server || b.server_id || '—';
+          const toolLabel = b.tool || b.tool_name || '—';
+          const reopens = state === 'open' ? Math.max(0, (b.reopens_in || 0) - tick) : 0;
           return (
-            <div key={b.id} className={`cb-card ${b.state} ${transitioning[b.id] ? 'transitioning' : ''}`}>
+            <div key={id} className={`cb-card ${state}`} data-testid={`breakers-card-${id}`}>
               <div className="cb-head">
                 <div className="cb-where truncate">
-                  {b.server}
+                  {serverLabel}
                   <span className="tertiary"> / </span>
-                  {b.tool}
+                  {toolLabel}
                 </div>
-                {b.state === 'open' && <I.ZapOff size={14} className="tertiary"/>}
-                {b.state === 'half' && <I.Zap size={14} className="tertiary"/>}
-                {b.state === 'closed' && <I.Zap size={14} className="tertiary"/>}
+                {state === 'open' && <I.ZapOff size={14} className="tertiary"/>}
+                {state === 'half' && <I.Zap size={14} className="tertiary"/>}
+                {state === 'closed' && <I.Zap size={14} className="tertiary"/>}
               </div>
-              <div className="cb-tenant">tenant: {b.tenant}</div>
               <div className="cb-state-row">
                 <div className="cb-state">
                   <span className="cb-state-dot"/>
-                  <span>{b.state === 'half' ? 'HALF-OPEN' : b.state.toUpperCase()}</span>
-                </div>
-                <div className={`cb-counts ${b.failures > b.threshold ? 'bad' : ''}`}>
-                  {b.failures} / {b.threshold} fails
+                  <span>{state === 'half' ? 'HALF-OPEN' : state.toUpperCase()}</span>
                 </div>
+                {b.failures != null && (
+                  <div className={`cb-counts ${b.threshold && b.failures > b.threshold ? 'bad' : ''}`}>
+                    {b.failures}{b.threshold != null ? ` / ${b.threshold}` : ''} fails
+                  </div>
+                )}
               </div>
-              {b.state === 'open' && (
-                <div className="cb-meta">
-                  <span>Last fail: {fmtDuration(b.last_failure_ago * 1000).replace('ms', 's ago')}</span>
-                  <span className="cb-reopens">Reopens in {reopens}s</span>
-                </div>
-              )}
-              {b.state !== 'open' && (
+              {state === 'open' && b.opened_at != null && (
                 <div className="cb-meta">
-                  <span className="truncate" style={{ maxWidth: 180 }}>
-                    Last fail: {b.last_failure_ago > 0 ? fmtDuration(b.last_failure_ago * 1000).replace('ms', '') + ' ago' : '—'}
-                  </span>
+                  <span>Opened: {fmtRelative(typeof b.opened_at === 'number' ? b.opened_at : new Date(b.opened_at).getTime())}</span>
+                  {b.reopens_in != null && <span className="cb-reopens">Reopens in {reopens}s</span>}
                 </div>
               )}
               <div className="cb-actions">
-                <button className="btn sm" onClick={() => setResetting(b)} disabled={b.state === 'closed'}>
+                <button className="btn sm"
+                        onClick={() => setResetting(b)}
+                        disabled={state === 'closed'}
+                        data-testid={`breakers-reset-${id}`}>
                   <I.Refresh size={11}/> Reset
                 </button>
                 <button className="btn sm ghost" onClick={() => onNav('audit')}>
@@ -419,7 +598,7 @@ function BreakersPage({ onNav, toast }) {
       <Modal open={!!resetting}
              onClose={() => setResetting(null)}
              title={resetting ? `Reset breaker?` : ''}
-             sub={resetting ? `${resetting.server} / ${resetting.tool}` : ''}
+             sub={resetting ? `${resetting.server || resetting.server_id || resetting.key} / ${resetting.tool || resetting.tool_name || '—'}` : ''}
              footer={resetting && <>
                <button className="btn" onClick={() => setResetting(null)}>Cancel</button>
                <button className="btn primary" onClick={doReset}><I.Refresh size={13}/>Reset breaker</button>
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index ee8f2b0..f04f6aa 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -1,22 +1,34 @@
 // @ts-nocheck
+// W3: read-paths wired. KPI tiles + recent-audit feed + per-server
+// health are now driven by `useServers()` + `useAudit(...)` +
+// `useBreakers()`. The fixture-derived sparklines (per-server
+// `spark`, `spark_latency`, `health`) are kept as cosmetic
+// fallbacks because the wire schema does NOT carry them yet —
+// they degrade to flat zero-arrays when the hook returns the
+// real wire shape. Once the BE starts emitting telemetry the
+// dashboard will pick it up without further FE churn.
+//
+// R14: every hook gets a visible loading / error / empty state via
+//      <DataState>. No silent failures.
+// R11: `data-testid="dashboard-loading|error|empty|ready"` plus
+//      the existing per-KPI / per-row testids.
+// R15: aria-busy + role="status|alert" on the wrapped states.
+
 import React from 'react';
 import {
-  NOW, TENANTS, SERVERS, TOOLS, ALL_TOOLS, AUDIT, AUDIT_DETAIL,
-  BREAKERS, RESOURCES, RESOURCE_CONTENT, PROMPTS, ME, API_KEYS,
+  NOW, SERVERS as FALLBACK_SERVERS, ALL_TOOLS,
 } from '../lib/data';
 import {
-  Icon, I, StatusDot, Transport, Sparkline,
-  fmtRelative, fmtTime, fmtTimeMs, fmtDateTime, fmtDuration, fmtBytes, fmtNum,
-  jsonHighlight, useToast, Modal, Drawer, TypeToConfirmModal,
-  Kbd, Skeleton, Tabs, EmptyState,
+  I, StatusDot, Transport, Sparkline,
+  fmtRelative, fmtTime, fmtDuration, fmtNum,
 } from '../lib/ui';
-import { Breadcrumbs, ROUTES, SECONDARY } from '../components/shell';
+import { useServers, useAudit, useBreakers } from '../lib/queries/hooks';
 
 // ============== Dashboard ==============
 
-function KPI({ label, icon, value, sub, delta, deltaKind, spark, sparkColor, onClick, dataTour }) {
+function KPI({ label, icon, value, sub, delta, deltaKind, spark, sparkColor, onClick, dataTour, dataTestId }) {
   return (
-    <button className="kpi" onClick={onClick} data-tour={dataTour}>
+    <button className="kpi" onClick={onClick} data-tour={dataTour} data-testid={dataTestId}>
       <div className="kpi-label">
         <span className="kpi-icon">{icon}</span>
         {label}
@@ -37,7 +49,7 @@ function KPI({ label, icon, value, sub, delta, deltaKind, spark, sparkColor, onC
       </div>
       <div className="kpi-footer"/>
       <div className="kpi-spark">
-        <Sparkline data={spark} width={340} height={34} color={sparkColor || 'var(--accent)'} strokeWidth={1.6}/>
+        <Sparkline data={spark || []} width={340} height={34} color={sparkColor || 'var(--accent)'} strokeWidth={1.6}/>
       </div>
     </button>
   );
@@ -90,7 +102,32 @@ function LiveFeed({ events, paused, onSelectAudit, onTogglePaused, onClear }) {
   );
 }
 
-function HealthStrip({ onSelectServer }) {
+function HealthStrip({ servers, onSelectServer }) {
+  // Wire-shape servers don't carry `health` sparklines yet — fall back to
+  // the fixture-derived ones keyed by id, then to a flat zero array. This
+  // keeps the UI lit without flagging it as a real-data outage.
+  const fallbackBy = React.useMemo(() => {
+    const m = {};
+    FALLBACK_SERVERS.forEach(s => { m[s.id] = s; });
+    return m;
+  }, []);
+
+  const visible = servers.filter(s => s.enabled !== false).slice(0, 10);
+  if (visible.length === 0) {
+    return (
+      <div className="card">
+        <div className="card-head">
+          <div className="card-title">
+            <I.Activity size={14} className="tertiary"/>
+            Per-server health (1h)
+          </div>
+        </div>
+        <div className="card-body" data-testid="dashboard-health-empty">
+          <p className="tertiary">No enabled servers to show.</p>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="card">
       <div className="card-head">
@@ -102,13 +139,14 @@ function HealthStrip({ onSelectServer }) {
       </div>
       <div className="card-body flush">
         <div className="health-strip">
-          {SERVERS.filter(s => s.enabled).slice(0, 10).map(s => {
-            const health = s.health;
-            const avg = health.reduce((a, b) => a + b, 0) / health.length;
+          {visible.map(s => {
+            const fb = fallbackBy[s.id];
+            const health = fb?.health || Array(24).fill(0);
+            const avg = health.length ? health.reduce((a, b) => a + b, 0) / health.length : 0;
             return (
-              <div key={s.id} className="health-row" onClick={() => onSelectServer(s.id)}>
+              <div key={s.id} className="health-row" onClick={() => onSelectServer(s.id)} data-testid={`dashboard-health-row-${s.id}`}>
                 <div className="h-name">
-                  <StatusDot status={s.status} size={6}/>
+                  <StatusDot status={s.status}/>
                   <span className="truncate">{s.name}</span>
                   <Transport t={s.transport}/>
                 </div>
@@ -131,7 +169,10 @@ function HealthStrip({ onSelectServer }) {
 }
 
 function TopTools({ onSelectTool }) {
-  // top 10 tools by calls_24h across servers
+  // Top-tools needs `calls_24h` per-tool which today only lives in the
+  // fixture (the wire shape `Tool` is `{ server_id, name, description?,
+  // input_schema? }`). Keep the fixture-derived list for now — switching to
+  // a `/api/admin/mcp-pack/tools/stats` endpoint is W5 scope.
   const top = [...ALL_TOOLS].sort((a, b) => b.calls_24h - a.calls_24h).slice(0, 10);
   const max = top[0]?.calls_24h || 1;
   return (
@@ -165,8 +206,50 @@ function TopTools({ onSelectTool }) {
   );
 }
 
-function RecentFailures({ onSelectAudit }) {
-  const failures = AUDIT.filter(a => a.status >= 400).slice(0, 6);
+function RecentFailures({ rows, onSelectAudit, queryError, onRetry }) {
+  // R14: when the underlying audit query failed, never render the "no
+  // recent failures" empty state — that reads as good news while
+  // actually we have NO data. Surface a card-level error with retry
+  // so the operator sees the gap instead of being misled.
+  if (queryError) {
+    return (
+      <div className="card" role="alert" data-testid="dashboard-failures-error">
+        <div className="card-head">
+          <div className="card-title">
+            <I.AlertTriangle size={14} className="tertiary"/>
+            Recent failures
+          </div>
+        </div>
+        <div className="card-body">
+          <p className="muted" style={{ marginTop: 0 }}>
+            Couldn't load the audit feed: {queryError?.message || 'an unexpected error occurred.'}
+          </p>
+          <button type="button" className="btn sm"
+                  data-testid="dashboard-failures-error-retry"
+                  onClick={onRetry}>
+            <I.Refresh size={11}/> Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const failures = rows.filter(a => Number(a.status) >= 400 || a.status === 'err' || a.status === 'error').slice(0, 6);
+  if (failures.length === 0) {
+    return (
+      <div className="card">
+        <div className="card-head">
+          <div className="card-title">
+            <I.AlertTriangle size={14} className="tertiary"/>
+            Recent failures
+          </div>
+        </div>
+        <div className="card-body" data-testid="dashboard-failures-empty">
+          <p className="tertiary">No recent failures — every recent invocation succeeded.</p>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="card">
       <div className="card-head">
@@ -190,23 +273,30 @@ function RecentFailures({ onSelectAudit }) {
             </tr>
           </thead>
           <tbody>
-            {failures.map(a => (
-              <tr key={a.id} onClick={() => onSelectAudit(a)}>
-                <td className="mono tertiary">{fmtRelative(a.ts)}</td>
-                <td>
-                  <span className="mono">{a.server}</span>
-                  <span className="tertiary"> / </span>
-                  <b>{a.tool || a.method}</b>
-                </td>
-                <td>
-                  <span className={`badge ${a.status >= 500 ? 'err' : 'warn'}`}>
-                    <span className="dot"/>{a.status}
-                  </span>
-                </td>
-                <td className="num">{fmtDuration(a.dur)}</td>
-                <td className="muted truncate" style={{ maxWidth: 160 }}>{a.actor}</td>
-              </tr>
-            ))}
+            {failures.map(a => {
+              const statusNum = Number(a.status);
+              const serverLabel = a.mcp_server_name || a.server || a.mcp_server_id;
+              const toolLabel = a.tool_name || a.tool || a.method;
+              const dur = a.duration_ms ?? a.dur;
+              const ts = a.created_at ? new Date(a.created_at).getTime() : a.ts;
+              return (
+                <tr key={a.id} onClick={() => onSelectAudit(a)} data-testid={`dashboard-failure-row-${a.id}`}>
+                  <td className="mono tertiary">{fmtRelative(ts)}</td>
+                  <td>
+                    <span className="mono">{serverLabel}</span>
+                    <span className="tertiary"> / </span>
+                    <b>{toolLabel}</b>
+                  </td>
+                  <td>
+                    <span className={`badge ${statusNum >= 500 ? 'err' : 'warn'}`}>
+                      <span className="dot"/>{a.status}
+                    </span>
+                  </td>
+                  <td className="num">{fmtDuration(dur)}</td>
+                  <td className="muted truncate" style={{ maxWidth: 160 }}>{a.actor}</td>
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </div>
@@ -214,31 +304,36 @@ function RecentFailures({ onSelectAudit }) {
   );
 }
 
-function DashboardPage({ liveEvents, livePaused, onTogglePaused, onClearFeed, onNav, onSelectAudit }) {
-  const totalServers = SERVERS.length;
-  const activeServers = SERVERS.filter(s => s.enabled && s.status !== 'err').length;
-  const callsPerMin = Math.round(SERVERS.reduce((a, s) => a + s.calls_1h, 0) / 60);
-  const totalErrs = SERVERS.reduce((a, s) => a + s.errors_1h, 0);
-  const totalCalls = SERVERS.reduce((a, s) => a + s.calls_1h, 0);
-  const errRate = ((totalErrs / Math.max(totalCalls, 1)) * 100).toFixed(2);
-  const cbOpen = BREAKERS.filter(b => b.state === 'open').length;
-  const cbHalf = BREAKERS.filter(b => b.state === 'half').length;
-  // sum sparks across servers
+function DashboardReady({ servers, audit, breakers, auditError, breakersError, onRetryAudit, onRetryBreakers, liveEvents, livePaused, onTogglePaused, onClearFeed, onNav, onSelectAudit }) {
+  // Wire shape doesn't carry calls_1h / errors_1h / p95 yet — fall back to
+  // the fixture by id where we can, else use 0. This keeps KPI rendering
+  // identical until the BE exposes telemetry endpoints.
+  const fallbackBy = React.useMemo(() => {
+    const m = {};
+    FALLBACK_SERVERS.forEach(s => { m[s.id] = s; });
+    return m;
+  }, []);
+
+  const totalServers = servers.length;
+  const activeServers = servers.filter(s => s.enabled !== false && s.status !== 'err').length;
+  const calls1hSum = servers.reduce((a, s) => a + (fallbackBy[s.id]?.calls_1h || 0), 0);
+  const errs1hSum = servers.reduce((a, s) => a + (fallbackBy[s.id]?.errors_1h || 0), 0);
+  const callsPerMin = Math.round(calls1hSum / 60);
+  const errRate = ((errs1hSum / Math.max(calls1hSum, 1)) * 100).toFixed(2);
+  const cbOpen = breakers.filter(b => b.state === 'open').length;
+  const cbHalf = breakers.filter(b => b.state === 'half' || b.state === 'half_open').length;
+
+  // sparklines: aggregate from fixture fallbacks when present
   const aggSpark = Array.from({ length: 60 }, (_, i) =>
-    SERVERS.reduce((a, s) => a + (s.spark[i] || 0), 0)
+    servers.reduce((a, s) => a + (fallbackBy[s.id]?.spark?.[i] || 0), 0)
   );
-  // Latency sparkline source: prefer the canonical "openai-mcp" server, but
-  // fall back to the first server in the fleet (or an empty array) so a
-  // renamed fixture doesn't crash the entire dashboard with a null deref.
-  const latSpark = (SERVERS.find(s => s.id === 'srv_01')?.spark_latency)
-    ?? SERVERS[0]?.spark_latency
+  const latSpark = (fallbackBy['srv_01']?.spark_latency)
+    ?? Object.values(fallbackBy)[0]?.spark_latency
     ?? [];
-  const errPerMin = SERVERS[0].spark.map((_, i) =>
-    SERVERS.reduce((a, s) => a + (s.status === 'err' || s.status === 'warn' ? s.spark[i] * 0.05 : 0), 0)
-  );
+  const errPerMin = aggSpark.map(v => v * (errs1hSum / Math.max(calls1hSum, 1)));
 
   return (
-    <div className="page">
+    <div className="page" data-testid="dashboard-ready">
       <div className="page-head">
         <div>
           <h1 className="page-title">Overview</h1>
@@ -258,6 +353,30 @@ function DashboardPage({ liveEvents, livePaused, onTogglePaused, onClearFeed, on
         </div>
       </div>
 
+      {(auditError || breakersError) && (
+        <div className="banner warn" role="alert" data-testid="dashboard-secondary-error" style={{ marginBottom: 14 }}>
+          <span className="banner-icon"><I.AlertTriangle size={16}/></span>
+          <div className="banner-body">
+            {auditError && breakersError
+              ? 'Audit feed and circuit-breaker data failed to load — KPIs and the failures panel below may be incomplete.'
+              : auditError
+                ? 'Audit feed failed to load — the failures panel below shows the gap explicitly.'
+                : 'Circuit-breaker data failed to load — the "Circuit breakers" KPI below shows 0 because the query errored, not because every breaker is closed.'}
+            {' '}
+            {(auditError?.message || breakersError?.message) && (
+              <span className="tertiary mono" style={{ fontSize: 11 }}>
+                {auditError?.message || breakersError?.message}
+              </span>
+            )}
+          </div>
+          <button type="button" className="btn sm"
+                  data-testid="dashboard-secondary-error-retry"
+                  onClick={() => { if (auditError) onRetryAudit(); if (breakersError) onRetryBreakers(); }}>
+            <I.Refresh size={11}/> Retry
+          </button>
+        </div>
+      )}
+
       <div className="kpi-grid" data-tour="kpi-strip">
         <KPI
           label={<>Active servers</>}
@@ -266,10 +385,11 @@ function DashboardPage({ liveEvents, livePaused, onTogglePaused, onClearFeed, on
           sub={`/ ${totalServers}`}
           delta="+2 since yesterday"
           deltaKind="up"
-          spark={SERVERS.map(s => s.enabled ? 1 : 0).map((_, i, a) => a.slice(Math.max(0, i - 5), i + 1).reduce((x, y) => x + y, 0))}
+          spark={servers.map((_, i, a) => Math.min(a.length, i + 1))}
           sparkColor="var(--accent)"
           onClick={() => onNav('servers')}
           dataTour="kpi-servers"
+          dataTestId="dashboard-kpi-servers"
         />
         <KPI
           label="Calls / minute"
@@ -280,6 +400,7 @@ function DashboardPage({ liveEvents, livePaused, onTogglePaused, onClearFeed, on
           spark={aggSpark}
           sparkColor="var(--accent)"
           onClick={() => onNav('audit')}
+          dataTestId="dashboard-kpi-calls"
         />
         <KPI
           label="p50 latency"
@@ -291,31 +412,136 @@ function DashboardPage({ liveEvents, livePaused, onTogglePaused, onClearFeed, on
           spark={latSpark}
           sparkColor="var(--status-warn)"
           onClick={() => onNav('audit')}
+          dataTestId="dashboard-kpi-latency"
         />
         <KPI
           label="Circuit breakers"
           icon={<I.Zap size={13}/>}
           value={cbOpen}
           sub={cbHalf ? `+${cbHalf} half-open` : 'open'}
-          delta={cbOpen > 0 ? `${BREAKERS.length - cbOpen} closed` : 'all closed'}
+          delta={cbOpen > 0 ? `${breakers.length - cbOpen} closed` : 'all closed'}
           deltaKind={cbOpen > 0 ? 'down' : 'up'}
           spark={errPerMin}
           sparkColor={cbOpen > 0 ? 'var(--status-err)' : 'var(--status-ok)'}
           onClick={() => onNav('breakers')}
+          dataTestId="dashboard-kpi-breakers"
         />
       </div>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16, marginBottom: 16 }}>
         <LiveFeed events={liveEvents} paused={livePaused}
-                  onSelectAudit={(e) => onSelectAudit(e.auditId || 'aud_search_142ms')}
+                  onSelectAudit={(e) => onSelectAudit(e.auditId || e.id || 'aud_search_142ms')}
                   onTogglePaused={onTogglePaused}
                   onClear={onClearFeed}/>
-        <HealthStrip onSelectServer={(id) => onNav(`server/${id}`)}/>
+        <HealthStrip servers={servers} onSelectServer={(id) => onNav(`server/${id}`)}/>
       </div>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
         <TopTools onSelectTool={(t) => onNav(`tool/${t.server_id}/${t.name}`)}/>
-        <RecentFailures onSelectAudit={() => onSelectAudit('aud_search_142ms')}/>
+        <RecentFailures rows={audit} onSelectAudit={(row) => onSelectAudit(row.id || 'aud_search_142ms')}
+                         queryError={auditError}
+                         onRetry={onRetryAudit}/>
+      </div>
+    </div>
+  );
+}
+
+function DashboardPage({ liveEvents, livePaused, onTogglePaused, onClearFeed, onNav, onSelectAudit }) {
+  const serversQ = useServers();
+  const auditQ = useAudit({ per_page: 24 });
+  const breakersQ = useBreakers();
+
+  // Compose three queries into a single ready-gate: render loading until the
+  // primary `servers` query lands; surface error if any of the three failed
+  // (servers is load-bearing; audit + breakers degrade to []).
+  if (serversQ.isLoading || serversQ.isPending) {
+    return (
+      <div className="page" role="status" aria-busy="true" data-testid="dashboard-loading">
+        <DataStateLoadingSkeleton />
+      </div>
+    );
+  }
+  if (serversQ.isError) {
+    return (
+      <div className="page" role="alert" data-testid="dashboard-error">
+        <div style={{ padding: 24 }}>
+          <h1 className="page-title">Overview</h1>
+          <p className="muted">Failed to load dashboard data.</p>
+          <p className="tertiary">{(serversQ.error as Error)?.message}</p>
+          <button
+            type="button"
+            className="btn primary"
+            data-testid="dashboard-error-retry"
+            onClick={() => {
+              void serversQ.refetch();
+              void auditQ.refetch();
+              void breakersQ.refetch();
+            }}
+          >
+            <I.Refresh size={13}/> Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+  const servers = serversQ.data?.data ?? [];
+  if (servers.length === 0) {
+    return (
+      <div className="page" role="status" data-testid="dashboard-empty">
+        <div className="page-head">
+          <div>
+            <h1 className="page-title">Overview</h1>
+            <p className="page-sub">No MCP servers registered yet.</p>
+          </div>
+          <div className="page-actions">
+            <button className="btn primary" onClick={() => onNav('servers-new')}>
+              <I.Plus size={13}/> Register first server
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // R14: `serversQ` is load-bearing — when it fails we render the page
+  // error above. `auditQ` and `breakersQ` are secondary; their failures
+  // should NOT replace the whole dashboard, but they MUST be surfaced
+  // visibly so operators don't read "0 failures / all closed" as good
+  // news while the underlying query is errored. We render inline
+  // warning banners next to the affected sections instead of silently
+  // degrading to empty arrays.
+  return (
+    <DashboardReady
+      servers={servers}
+      audit={auditQ.data ?? []}
+      breakers={breakersQ.data ?? []}
+      auditError={auditQ.isError ? (auditQ.error as Error | undefined) : null}
+      breakersError={breakersQ.isError ? (breakersQ.error as Error | undefined) : null}
+      onRetryAudit={() => { void auditQ.refetch(); }}
+      onRetryBreakers={() => { void breakersQ.refetch(); }}
+      liveEvents={liveEvents}
+      livePaused={livePaused}
+      onTogglePaused={onTogglePaused}
+      onClearFeed={onClearFeed}
+      onNav={onNav}
+      onSelectAudit={onSelectAudit}
+    />
+  );
+}
+
+function DataStateLoadingSkeleton() {
+  return (
+    <div style={{ padding: 24 }}>
+      <div className="kpi-grid" style={{ marginBottom: 24 }}>
+        {[0, 1, 2, 3].map(i => (
+          <div key={i} className="kpi" style={{ pointerEvents: 'none', opacity: 0.6 }}>
+            <div className="row-gap-8" style={{ padding: 12 }}>
+              <div className="skel" style={{ width: '40%', height: 14, borderRadius: 4 }} />
+              <div className="skel" style={{ width: '70%', height: 22, borderRadius: 4 }} />
+              <div className="skel" style={{ width: '90%', height: 34, borderRadius: 4 }} />
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   );
diff --git a/resources/js/pages/resources.tsx b/resources/js/pages/resources.tsx
index e0d9c29..c8d44e0 100644
--- a/resources/js/pages/resources.tsx
+++ b/resources/js/pages/resources.tsx
@@ -1,9 +1,11 @@
 // @ts-nocheck
+// W3: read-paths wired. `ResourcesPage` is now hook-backed via
+// `useServers()` + `useResources(serverId)` + `useResource(serverId, uri)`.
+// `PromptsPage` (also exported from this module) uses `useServers()` +
+// `usePrompts(serverId)` + `usePrompt(serverId, name)`. Markdown rendering
+// + raw / hex preview helpers stay in-place; only the data source changed.
+
 import React from 'react';
-import {
-  NOW, TENANTS, SERVERS, TOOLS, ALL_TOOLS, AUDIT, AUDIT_DETAIL,
-  BREAKERS, RESOURCES, RESOURCE_CONTENT, PROMPTS, ME, API_KEYS,
-} from '../lib/data';
 import {
   Icon, I, StatusDot, Transport, Sparkline,
   fmtRelative, fmtTime, fmtTimeMs, fmtDateTime, fmtDuration, fmtBytes, fmtNum,
@@ -11,18 +13,81 @@ import {
   Kbd, Skeleton, Tabs, EmptyState,
 } from '../lib/ui';
 import { Breadcrumbs, ROUTES, SECONDARY } from '../components/shell';
+import {
+  useServers, useResources, useResource, usePrompts, usePrompt,
+} from '../lib/queries/hooks';
 
 // ============== Resources browser + Prompts library ==============
 
 function ResourcesPage({ onNav }) {
-  const [serverId, setServerId] = React.useState('srv_01');
-  const [selectedUri, setSelectedUri] = React.useState('mcp://openai/docs/readme.md');
+  const serversQ = useServers();
+  const liveServers = (serversQ.data?.data ?? []).filter(s => s.enabled !== false);
+  const [userPickedServerId, setUserPickedServerId] = React.useState(null);
+  const [selectedUri, setSelectedUri] = React.useState(null);
   const [previewTab, setPreviewTab] = React.useState('rendered');
-  const [openDirs, setOpenDirs] = React.useState({ 'mcp://openai/docs/': true, 'mcp://openai/schemas/': false });
+  const [openDirs, setOpenDirs] = React.useState({});
 
-  const items = RESOURCES[serverId] || [];
+  // R14 / R17: derive `serverId` synchronously so the first paint after
+  // `serversQ` resolves already has a valid id. The previous code held a
+  // `useState(null)` + post-mount `useEffect` to pick the first server,
+  // which meant ONE render between "servers loaded" and "auto-pick fired"
+  // where `useResources(null)` was disabled and the tree rendered the
+  // "No resources advertised" empty state for a frame — confusing for
+  // operators and a falsely-empty signal for screen readers. Now the
+  // effective serverId is computed in render: explicit user pick wins,
+  // else first live server, else null (still null while serversQ is
+  // pending — but in that path we exit through the loading branch
+  // below before reaching here).
+  const serverId = userPickedServerId ?? liveServers[0]?.id ?? null;
+  const setServerId = setUserPickedServerId;
+
+  const resourcesQ = useResources(serverId);
+  const contentQ = useResource(serverId, selectedUri);
+  const items = resourcesQ.data ?? [];
   const selected = items.find(r => r.uri === selectedUri);
-  const content = RESOURCE_CONTENT[selectedUri];
+  const content = contentQ.data?.content;
+
+  // Wrap-level state gates — render only the page header during these.
+  if (serversQ.isLoading || serversQ.isPending) {
+    return (
+      <div className="page" role="status" aria-busy="true" data-testid="resources-loading" style={{ padding: 24 }}>
+        <Skeleton w="30%" h={22}/>
+        <div style={{ height: 16 }}/>
+        <Skeleton w="100%" h={14}/>
+        <Skeleton w="90%" h={14}/>
+      </div>
+    );
+  }
+  if (serversQ.isError) {
+    return (
+      <div className="page" role="alert" data-testid="resources-error">
+        <EmptyState
+          icon={<I.AlertTriangle size={26}/>}
+          title="Couldn't load servers"
+          body={serversQ.error?.message || 'An unexpected error occurred.'}
+          action={
+            <button type="button" className="btn primary"
+                    data-testid="resources-error-retry"
+                    onClick={() => { void serversQ.refetch(); }}>
+              <I.Refresh size={13}/> Retry
+            </button>
+          }
+        />
+      </div>
+    );
+  }
+  if (liveServers.length === 0) {
+    return (
+      <div className="page" role="status" data-testid="resources-empty">
+        <EmptyState
+          icon={<I.FileBox size={26}/>}
+          title="No resources yet"
+          body="Register and handshake at least one MCP server to browse its resources."
+          action={<button className="btn primary" onClick={() => onNav('servers')}><I.Server size={12}/>Open servers</button>}
+        />
+      </div>
+    );
+  }
 
   const renderTree = () => {
     const nodes = [];
@@ -66,22 +131,22 @@ function ResourcesPage({ onNav }) {
   };
 
   return (
-    <div style={{ height: 'calc(100vh - var(--topbar-h))' }}>
+    <div style={{ height: 'calc(100vh - var(--topbar-h))' }} data-testid="resources-ready">
       <div className="resource-layout">
         {/* Server list */}
         <div className="resource-pane">
           <div className="resource-pane-head">
             <span>Servers</span>
-            <button className="iconbtn"><I.Refresh size={12}/></button>
+            <button className="iconbtn" onClick={() => { void resourcesQ.refetch(); }} aria-label="Refresh resources"><I.Refresh size={12}/></button>
           </div>
           <div className="resource-tree">
-            {SERVERS.filter(s => s.resources > 0 && s.enabled).map(s => (
+            {liveServers.map(s => (
               <div key={s.id}
                    className={`tree-node ${serverId === s.id ? 'active' : ''}`}
-                   onClick={() => { setServerId(s.id); }}>
+                   onClick={() => { setServerId(s.id); setSelectedUri(null); }}
+                   data-testid={`resources-server-${s.id}`}>
                 <StatusDot status={s.status} size={6}/>
                 <span style={{ flex: 1 }}>{s.name}</span>
-                <span className="tree-meta">{s.resources}</span>
               </div>
             ))}
           </div>
@@ -91,12 +156,32 @@ function ResourcesPage({ onNav }) {
         <div className="resource-pane">
           <div className="resource-pane-head">
             <span style={{ fontFamily: 'var(--font-mono)', textTransform: 'none', letterSpacing: 0, color: 'var(--text-secondary)' }}>
-              {SERVERS.find(s => s.id === serverId)?.name}://
+              {liveServers.find(s => s.id === serverId)?.name}://
             </span>
             <span className="tertiary mono" style={{ fontSize: 10 }}>{items.length}</span>
           </div>
           <div className="resource-tree">
-            {renderTree()}
+            {(resourcesQ.isLoading || resourcesQ.isPending) && (
+              <div role="status" aria-busy="true" data-testid="resources-tree-loading" style={{ padding: 12 }}>
+                <Skeleton w="80%" h={14}/>
+                <Skeleton w="60%" h={14}/>
+              </div>
+            )}
+            {resourcesQ.isError && (
+              <div role="alert" data-testid="resources-tree-error" style={{ padding: 12 }}>
+                <p className="muted" style={{ margin: 0, fontSize: 12 }}>{resourcesQ.error?.message || 'Failed to load resources.'}</p>
+                <button type="button" className="btn sm" data-testid="resources-tree-error-retry"
+                        onClick={() => { void resourcesQ.refetch(); }}>
+                  <I.Refresh size={11}/> Retry
+                </button>
+              </div>
+            )}
+            {!resourcesQ.isLoading && !resourcesQ.isError && items.length === 0 && (
+              <div role="status" data-testid="resources-tree-empty" style={{ padding: 12 }}>
+                <p className="tertiary" style={{ margin: 0, fontSize: 12 }}>No resources advertised.</p>
+              </div>
+            )}
+            {!resourcesQ.isLoading && !resourcesQ.isError && renderTree()}
           </div>
         </div>
 
@@ -126,13 +211,38 @@ function ResourcesPage({ onNav }) {
                 ))}
               </div>
               <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
-                {previewTab === 'rendered' && content && selected.mime === 'text/markdown' && (
+                {(contentQ.isLoading || contentQ.isPending) && (
+                  <div role="status" aria-busy="true" data-testid="resource-content-loading">
+                    <Skeleton w="50%" h={14}/>
+                    <div style={{ height: 8 }}/>
+                    <Skeleton w="90%" h={14}/>
+                    <Skeleton w="80%" h={14}/>
+                    <Skeleton w="60%" h={14}/>
+                  </div>
+                )}
+                {contentQ.isError && (
+                  <div role="alert" data-testid="resource-content-error">
+                    <EmptyState
+                      icon={<I.AlertTriangle size={20}/>}
+                      title="Couldn't load resource"
+                      body={contentQ.error?.message || 'An unexpected error occurred.'}
+                      action={
+                        <button type="button" className="btn primary"
+                                data-testid="resource-content-error-retry"
+                                onClick={() => { void contentQ.refetch(); }}>
+                          <I.Refresh size={13}/> Retry
+                        </button>
+                      }
+                    />
+                  </div>
+                )}
+                {!contentQ.isLoading && !contentQ.isError && previewTab === 'rendered' && content && selected.mime === 'text/markdown' && (
                   <MarkdownRender source={content}/>
                 )}
-                {previewTab === 'rendered' && content && selected.mime === 'application/json' && (
-                  <pre className="code-block" dangerouslySetInnerHTML={{ __html: jsonHighlight(JSON.parse(content || '{}')) }}/>
+                {!contentQ.isLoading && !contentQ.isError && previewTab === 'rendered' && content && selected.mime === 'application/json' && (
+                  <JsonPreview source={content}/>
                 )}
-                {previewTab === 'rendered' && !content && (
+                {!contentQ.isLoading && !contentQ.isError && previewTab === 'rendered' && !content && (
                   <EmptyState icon={<I.File size={20}/>}
                               title="No preview"
                               body={`This is a ${selected.mime} resource. Switch to Raw or Hex to inspect contents.`}/>
@@ -156,7 +266,7 @@ function ResourcesPage({ onNav }) {
                     <dt>URI</dt><dd className="mono">{selected.uri}</dd>
                     <dt>MIME type</dt><dd className="mono">{selected.mime}</dd>
                     <dt>Size</dt><dd className="mono">{fmtBytes(selected.size)} ({selected.size.toLocaleString()} bytes)</dd>
-                    <dt>Server</dt><dd>{SERVERS.find(s => s.id === serverId)?.name}</dd>
+                    <dt>Server</dt><dd>{liveServers.find(s => s.id === serverId)?.name}</dd>
                     <dt>Last modified</dt><dd className="mono">2026-05-12 09:14:22 UTC</dd>
                     <dt>ETag</dt><dd className="mono">"a1b2c3d4-e5f6"</dd>
                     <dt>Cache-Control</dt><dd className="mono">public, max-age=3600</dd>
@@ -173,9 +283,28 @@ function ResourcesPage({ onNav }) {
   );
 }
 
+// HTML-escape every char that could break out of an HTML attribute or
+// open a new tag. MUST run BEFORE the markdown regexes so any raw HTML
+// embedded in server-controlled Markdown (`<script>`, `<img onerror=…>`)
+// is rendered as literal text, not executed. The markdown-to-HTML
+// regexes inject their own (safe) tags into the already-escaped string;
+// since `<` / `>` in untrusted content are already `&lt;` / `&gt;`, the
+// renderer cannot be tricked into emitting an executable tag.
+function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
 function MarkdownRender({ source }) {
-  // Minimal MD renderer (headings, bold, code, lists, tables)
-  const html = source
+  // Minimal MD renderer (headings, bold, code, lists, tables).
+  // Escape first — see `escapeHtml` comment above for the security
+  // rationale (R14: never feed unsanitized server content into
+  // `dangerouslySetInnerHTML`).
+  const html = escapeHtml(source)
     .replace(/^### (.*$)/gm, '<h3 style="margin:18px 0 8px;font-size:15px;font-weight:600">$1</h3>')
     .replace(/^## (.*$)/gm, '<h2 style="margin:22px 0 8px;font-size:17px;font-weight:600">$1</h2>')
     .replace(/^# (.*$)/gm, '<h1 style="margin:0 0 14px;font-size:22px;font-weight:700;letter-spacing:-0.02em">$1</h1>')
@@ -193,30 +322,110 @@ function MarkdownRender({ source }) {
   return <div style={{ fontSize: 13.5, lineHeight: 1.65 }} dangerouslySetInnerHTML={{ __html: html }}/>;
 }
 
+// `JsonPreview` guards `JSON.parse` so a malformed wire payload renders
+// an error banner instead of crashing the whole Resources page (R14).
+function JsonPreview({ source }) {
+  let parsed;
+  try {
+    parsed = JSON.parse(source || '{}');
+  } catch (err) {
+    return (
+      <div role="alert" data-testid="resource-content-json-error">
+        <EmptyState
+          icon={<I.AlertTriangle size={20}/>}
+          title="Invalid JSON"
+          body={`The server returned a payload that isn't valid JSON: ${err?.message || String(err)}. Switch to Raw to inspect the bytes.`}
+        />
+      </div>
+    );
+  }
+  return <pre className="code-block" dangerouslySetInnerHTML={{ __html: jsonHighlight(parsed) }}/>;
+}
+
 // ============== Prompts library ==============
 function PromptsPage({ onNav }) {
-  const all = Object.entries(PROMPTS).flatMap(([sid, ps]) =>
-    ps.map(p => ({ ...p, server_id: sid, server_name: SERVERS.find(s => s.id === sid)?.name }))
-  );
-  const [selected, setSelected] = React.useState(all[0]);
-  const [args, setArgs] = React.useState(() => {
-    const o = {};
-    (all[0]?.args || []).forEach(a => { o[a.name] = a.default || (a.type === 'string' ? '' : null); });
-    return o;
-  });
+  const serversQ = useServers();
+  const liveServers = (serversQ.data?.data ?? []).filter(s => s.enabled !== false);
+  // Same render-time derivation as `ResourcesPage` above — see the
+  // comment there for the rationale.
+  const [userPickedServerId, setUserPickedServerId] = React.useState(null);
+  const serverId = userPickedServerId ?? liveServers[0]?.id ?? null;
+  const setServerId = setUserPickedServerId;
+  const promptsQ = usePrompts(serverId);
+  const [selectedName, setSelectedName] = React.useState(null);
+  const promptQ = usePrompt(serverId, selectedName);
   const [q, setQ] = React.useState('');
 
+  const allPrompts = promptsQ.data ?? [];
+  // Cross-server flat list with server_name attached so the existing UI
+  // shape (one "all prompts" list) stays untouched.
+  const allWithServer = allPrompts.map(p => ({
+    ...p,
+    server_id: serverId,
+    server_name: liveServers.find(s => s.id === serverId)?.name,
+  }));
+
+  // Auto-pick first prompt when list lands.
+  React.useEffect(() => {
+    if (!selectedName && allPrompts.length > 0) {
+      setSelectedName(allPrompts[0].name);
+    }
+  }, [selectedName, allPrompts.length]);
+
+  const selected = promptQ.data ?? allPrompts.find(p => p.name === selectedName);
+  const [args, setArgs] = React.useState({});
+
   React.useEffect(() => {
     if (!selected) return;
     const o = {};
-    selected.args.forEach(a => { o[a.name] = a.default || (a.type === 'string' ? '' : null); });
+    (selected.args || []).forEach(a => { o[a.name] = a.default || (a.type === 'string' ? '' : null); });
     setArgs(o);
-  }, [selected?.server_id, selected?.name]);
+  }, [selectedName, selected?.name]);
+
+  const filtered = allWithServer.filter(p => !q || p.name.toLowerCase().includes(q.toLowerCase()) || (p.desc || '').toLowerCase().includes(q.toLowerCase()));
 
-  const filtered = all.filter(p => !q || p.name.toLowerCase().includes(q.toLowerCase()) || p.desc.toLowerCase().includes(q.toLowerCase()));
+  if (serversQ.isLoading || serversQ.isPending) {
+    return (
+      <div className="page" role="status" aria-busy="true" data-testid="prompts-loading" style={{ padding: 24 }}>
+        <Skeleton w="40%" h={22}/>
+        <div style={{ height: 16 }}/>
+        <Skeleton w="100%" h={14}/>
+      </div>
+    );
+  }
+  if (serversQ.isError) {
+    return (
+      <div className="page" role="alert" data-testid="prompts-error">
+        <EmptyState
+          icon={<I.AlertTriangle size={26}/>}
+          title="Couldn't load servers"
+          body={serversQ.error?.message || 'An unexpected error occurred.'}
+          action={
+            <button type="button" className="btn primary"
+                    data-testid="prompts-error-retry"
+                    onClick={() => { void serversQ.refetch(); }}>
+              <I.Refresh size={13}/> Retry
+            </button>
+          }
+        />
+      </div>
+    );
+  }
+  if (liveServers.length === 0) {
+    return (
+      <div className="page" role="status" data-testid="prompts-empty">
+        <EmptyState
+          icon={<I.Sparkles size={26}/>}
+          title="No prompts yet"
+          body="Register and handshake at least one MCP server to browse its prompts."
+          action={<button className="btn primary" onClick={() => onNav('servers')}><I.Server size={12}/>Open servers</button>}
+        />
+      </div>
+    );
+  }
 
   return (
-    <div className="page full" style={{ padding: 0 }}>
+    <div className="page full" style={{ padding: 0 }} data-testid="prompts-ready">
       <div style={{
         display: 'grid', gridTemplateColumns: '320px 1fr', gap: 1,
         background: 'var(--border)',
@@ -224,28 +433,58 @@ function PromptsPage({ onNav }) {
       }}>
         <div style={{ background: 'var(--bg-elevated)', display: 'flex', flexDirection: 'column' }}>
           <div style={{ padding: 12, borderBottom: '1px solid var(--border)' }}>
+            <select className="select" value={serverId || ''} onChange={e => { setServerId(e.target.value); setSelectedName(null); }}
+                    aria-label="Server selector" data-testid="prompts-server-select" style={{ width: '100%', marginBottom: 8 }}>
+              {liveServers.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+            </select>
             <div className="search-input" style={{ maxWidth: 'none' }}>
               <I.Search size={13} className="search-icon"/>
               <input className="input" placeholder="Search prompts…"
-                     value={q} onChange={e => setQ(e.target.value)}/>
+                     value={q} onChange={e => setQ(e.target.value)}
+                     data-testid="prompts-search-input"
+                     aria-label="Search prompts"/>
             </div>
           </div>
           <div style={{ overflow: 'auto', flex: 1 }}>
+            {(promptsQ.isLoading || promptsQ.isPending) && (
+              <div role="status" aria-busy="true" data-testid="prompts-list-loading" style={{ padding: 12 }}>
+                <Skeleton w="80%" h={14}/>
+                <div style={{ height: 8 }}/>
+                <Skeleton w="60%" h={14}/>
+              </div>
+            )}
+            {promptsQ.isError && (
+              <div role="alert" data-testid="prompts-list-error" style={{ padding: 12 }}>
+                <p className="muted" style={{ margin: 0, fontSize: 12 }}>{promptsQ.error?.message || 'Failed to load prompts.'}</p>
+                <button type="button" className="btn sm" data-testid="prompts-list-error-retry"
+                        onClick={() => { void promptsQ.refetch(); }}>
+                  <I.Refresh size={11}/> Retry
+                </button>
+              </div>
+            )}
+            {!promptsQ.isLoading && !promptsQ.isError && filtered.length === 0 && (
+              <div role="status" data-testid="prompts-list-empty" style={{ padding: 12 }}>
+                <p className="tertiary" style={{ margin: 0, fontSize: 12 }}>
+                  {allPrompts.length === 0 ? 'No prompts advertised by this server.' : 'No prompts match your search.'}
+                </p>
+              </div>
+            )}
             {filtered.map(p => (
               <div key={p.server_id + p.name}
-                   onClick={() => setSelected(p)}
+                   onClick={() => setSelectedName(p.name)}
+                   data-testid={`prompts-row-${p.name}`}
                    style={{
                      padding: '12px 16px',
                      borderBottom: '1px solid var(--border)',
                      cursor: 'pointer',
-                     background: selected?.server_id === p.server_id && selected?.name === p.name ? 'var(--accent-bg)' : 'transparent',
-                     borderLeft: selected?.server_id === p.server_id && selected?.name === p.name ? '2px solid var(--accent)' : '2px solid transparent',
+                     background: selectedName === p.name ? 'var(--accent-bg)' : 'transparent',
+                     borderLeft: selectedName === p.name ? '2px solid var(--accent)' : '2px solid transparent',
                    }}>
                 <div className="flex-h-between">
                   <b className="mono">{p.name}</b>
-                  <span className="badge outline">{p.args.length} arg{p.args.length === 1 ? '' : 's'}</span>
+                  <span className="badge outline">{(p.args || []).length} arg{(p.args || []).length === 1 ? '' : 's'}</span>
                 </div>
-                <p className="muted" style={{ margin: '4px 0 2px', fontSize: 12 }}>{p.desc}</p>
+                <p className="muted" style={{ margin: '4px 0 2px', fontSize: 12 }}>{p.desc || '—'}</p>
                 <span className="tertiary mono" style={{ fontSize: 11 }}>{p.server_name}</span>
               </div>
             ))}
@@ -257,10 +496,10 @@ function PromptsPage({ onNav }) {
               <div className="page-head">
                 <div>
                   <h1 className="page-title" style={{ fontSize: 20 }}>
-                    <span className="mono tertiary" style={{ fontSize: 15 }}>{selected.server_name}.</span>
+                    <span className="mono tertiary" style={{ fontSize: 15 }}>{liveServers.find(s => s.id === serverId)?.name}.</span>
                     <span className="mono">{selected.name}</span>
                   </h1>
-                  <p className="page-sub">{selected.desc}</p>
+                  <p className="page-sub">{selected.desc || '—'}</p>
                 </div>
                 <button className="btn"><I.Send size={13}/> Send to Tools playground</button>
               </div>
@@ -269,7 +508,7 @@ function PromptsPage({ onNav }) {
                 <div className="card">
                   <div className="card-head"><div className="card-title">Arguments</div></div>
                   <div className="card-body">
-                    {selected.args.map(a => (
+                    {(selected.args || []).map(a => (
                       <div key={a.name} className="field-group" style={{ marginBottom: 12 }}>
                         <label className="label">
                           <span className="mono">{a.name}</span>
@@ -301,9 +540,9 @@ function PromptsPage({ onNav }) {
                     </div>
                   </div>
                   <div className="card-body">
-                    {selected.preview.map((msg, i) => {
+                    {(selected.preview || []).map((msg, i) => {
                       // interpolate args
-                      const text = msg.text.replace(/\{(\w+)\}/g, (m, k) => args[k] || m);
+                      const text = (msg.text || '').replace(/\{(\w+)\}/g, (m, k) => args[k] || m);
                       return (
                         <div key={i} className="prompt-message">
                           <div className="prompt-message-head">
diff --git a/resources/js/pages/servers.tsx b/resources/js/pages/servers.tsx
index d0fc473..e30c9da 100644
--- a/resources/js/pages/servers.tsx
+++ b/resources/js/pages/servers.tsx
@@ -1,8 +1,16 @@
 // @ts-nocheck
+// W3: read-paths wired. `ServersListPage` + `ServerDetailPage` are now
+// hook-backed via `useServers({...filters})`, `useServer(id)`,
+// `useServerTools(id)`, `useResources(id)`, `usePrompts(id)`, `useAudit({
+// server_id })`. The wire schema for `McpServer` is intentionally minimal
+// (id / name / transport / url / status / enabled / tenant). Visual extras
+// the fixture carries (sparklines, p50/p95/p99, calls_1h / errors_1h)
+// gracefully degrade to "—" or empty arrays when the live wire doesn't
+// carry them. W4 wires mutations; W5 wires per-server telemetry.
+
 import React from 'react';
 import {
-  NOW, TENANTS, SERVERS, TOOLS, ALL_TOOLS, AUDIT, AUDIT_DETAIL,
-  BREAKERS, RESOURCES, RESOURCE_CONTENT, PROMPTS, ME, API_KEYS,
+  SERVERS as FALLBACK_SERVERS, TENANTS,
 } from '../lib/data';
 import {
   Icon, I, StatusDot, Transport, Sparkline,
@@ -11,6 +19,10 @@ import {
   Kbd, Skeleton, Tabs, EmptyState,
 } from '../lib/ui';
 import { Breadcrumbs, ROUTES, SECONDARY } from '../components/shell';
+import {
+  useServers, useServer, useServerTools, useResources, usePrompts, useAudit,
+} from '../lib/queries/hooks';
+import { DataState } from '../lib/data-state';
 
 // ============== Servers: list + detail + new wizard ==============
 
@@ -21,22 +33,100 @@ function ServersListPage({ onNav, toast }) {
   const [q, setQ] = React.useState('');
   const [confirmDelete, setConfirmDelete] = React.useState(null);
 
-  const filtered = SERVERS.filter(s => {
-    if (statusFilter === 'active' && (!s.enabled || s.status === 'err')) return false;
-    if (statusFilter === 'disabled' && s.enabled) return false;
+  const filters = React.useMemo(() => {
+    // The UI status chips are an OPERATOR view (`active` = enabled & not
+    // erroring; `disabled` = enabled flag false; `err` / `warn` = real
+    // wire status values). The BE only understands the latter two as
+    // `status=` — `active` / `disabled` are projections we have to do
+    // client-side. Sending `status=active` to the BE returns zero rows
+    // (no server reports `status=active`), so the chip would look
+    // permanently broken. Only forward the wire-shaped values; let
+    // `disabled` map to `enabled=false` and let `active` fall through
+    // to client-side filtering below.
+    const f = { per_page: 100 };
+    if (q) f.q = q;
+    if (statusFilter === 'err' || statusFilter === 'warn') {
+      f.status = statusFilter;
+    } else if (statusFilter === 'disabled') {
+      f.enabled = false;
+    }
+    if (transportFilter !== 'all') f.transport = transportFilter;
+    return f;
+  }, [q, statusFilter, transportFilter]);
+
+  const serversQ = useServers(filters);
+  const rawServers = serversQ.data?.data ?? [];
+
+  // Fixture telemetry for fields the wire schema doesn't carry yet
+  // (tools count, sparklines, p95, last_handshake_at, calls_1h). The
+  // detail page hits the same fallback merge logic.
+  const fallbackBy = React.useMemo(() => {
+    const m = {};
+    FALLBACK_SERVERS.forEach(s => { m[s.id] = s; });
+    return m;
+  }, []);
+
+  if (serversQ.isLoading || serversQ.isPending) {
+    return (
+      <div className="page" role="status" aria-busy="true" data-testid="servers-loading">
+        <div className="page-head">
+          <div>
+            <h1 className="page-title">Servers</h1>
+            <p className="page-sub">Loading…</p>
+          </div>
+        </div>
+        <div className="card"><div className="card-body row-gap-8" style={{ padding: 16 }}>
+          <Skeleton w="100%" h={32}/>
+          <Skeleton w="90%" h={32}/>
+          <Skeleton w="80%" h={32}/>
+        </div></div>
+      </div>
+    );
+  }
+  if (serversQ.isError) {
+    return (
+      <div className="page" role="alert" data-testid="servers-error">
+        <div className="page-head">
+          <div>
+            <h1 className="page-title">Servers</h1>
+            <p className="page-sub">Failed to load servers.</p>
+          </div>
+        </div>
+        <EmptyState
+          icon={<I.AlertTriangle size={26}/>}
+          title="Couldn't load servers"
+          body={serversQ.error?.message || 'An unexpected error occurred.'}
+          action={
+            <button type="button" className="btn primary"
+                    data-testid="servers-error-retry"
+                    onClick={() => { void serversQ.refetch(); }}>
+              <I.Refresh size={13}/> Retry
+            </button>
+          }
+        />
+      </div>
+    );
+  }
+
+  const filtered = rawServers.filter(s => {
+    if (statusFilter === 'active' && (s.enabled === false || s.status === 'err')) return false;
+    if (statusFilter === 'disabled' && s.enabled !== false) return false;
     if (statusFilter === 'err' && s.status !== 'err') return false;
     if (statusFilter === 'warn' && s.status !== 'warn') return false;
     if (transportFilter !== 'all' && s.transport !== transportFilter) return false;
-    if (q && !s.name.toLowerCase().includes(q.toLowerCase()) && !s.url.toLowerCase().includes(q.toLowerCase())) return false;
+    if (q) {
+      const hay = `${s.name || ''} ${s.url || ''}`.toLowerCase();
+      if (!hay.includes(q.toLowerCase())) return false;
+    }
     return true;
   });
 
   const counts = {
-    all: SERVERS.length,
-    active: SERVERS.filter(s => s.enabled && s.status !== 'err').length,
-    disabled: SERVERS.filter(s => !s.enabled).length,
-    err: SERVERS.filter(s => s.status === 'err').length,
-    warn: SERVERS.filter(s => s.status === 'warn').length,
+    all: rawServers.length,
+    active: rawServers.filter(s => s.enabled !== false && s.status !== 'err').length,
+    disabled: rawServers.filter(s => s.enabled === false).length,
+    err: rawServers.filter(s => s.status === 'err').length,
+    warn: rawServers.filter(s => s.status === 'warn').length,
   };
 
   const allSelected = filtered.length > 0 && filtered.every(s => selected.has(s.id));
@@ -53,15 +143,15 @@ function ServersListPage({ onNav, toast }) {
   };
 
   return (
-    <div className="page">
+    <div className="page" data-testid="servers-ready">
       <div className="page-head">
         <div>
           <h1 className="page-title">Servers</h1>
-          <p className="page-sub">{filtered.length} of {SERVERS.length} MCP servers shown</p>
+          <p className="page-sub">{filtered.length} of {rawServers.length} MCP servers shown</p>
         </div>
         <div className="page-actions">
           <button className="btn"><I.Download size={13}/> Export</button>
-          <button className="btn primary" onClick={() => onNav('servers-new')}>
+          <button className="btn primary" onClick={() => onNav('servers-new')} data-testid="servers-new-btn">
             <I.Plus size={13}/> New server
           </button>
         </div>
@@ -71,7 +161,9 @@ function ServersListPage({ onNav, toast }) {
         <div className="search-input">
           <I.Search size={14} className="search-icon"/>
           <input className="input" placeholder="Search by name, URL…"
-                 value={q} onChange={e => setQ(e.target.value)}/>
+                 value={q} onChange={e => setQ(e.target.value)}
+                 data-testid="servers-search-input"
+                 aria-label="Search servers"/>
         </div>
         {[
           { key: 'all', label: 'All' },
@@ -82,7 +174,8 @@ function ServersListPage({ onNav, toast }) {
         ].map(f => (
           <span key={f.key}
                 className={`chip ${statusFilter === f.key ? 'active' : ''}`}
-                onClick={() => setStatusFilter(f.key)}>
+                onClick={() => setStatusFilter(f.key)}
+                data-testid={`servers-filter-${f.key}`}>
             {f.label} <span className="count">{counts[f.key]}</span>
           </span>
         ))}
@@ -120,59 +213,72 @@ function ServersListPage({ onNav, toast }) {
               </tr>
             </thead>
             <tbody>
-              {filtered.map(s => (
-                <tr key={s.id}
-                    className={selected.has(s.id) ? 'selected' : ''}
-                    onClick={() => onNav(`server/${s.id}`)}>
-                  <td className="checkbox-col" onClick={e => e.stopPropagation()}>
-                    <input type="checkbox" className="checkbox"
-                           checked={selected.has(s.id)}
-                           onChange={() => toggleOne(s.id)}/>
-                  </td>
-                  <td><StatusDot status={s.status}/></td>
-                  <td>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <b>{s.name}</b>
-                      {!s.enabled && <span className="badge idle"><span className="dot"/>Disabled</span>}
-                    </div>
-                    <div className="tertiary mono" style={{ fontSize: 11, marginTop: 2 }}>{s.url}</div>
-                  </td>
-                  <td><Transport t={s.transport}/></td>
-                  <td className="num">{s.tools}</td>
-                  <td>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                      <Sparkline data={s.spark} width={68} height={20} fill
-                                 color={s.status === 'err' ? 'var(--status-err)' : s.status === 'warn' ? 'var(--status-warn)' : 'var(--accent)'}
-                                 showPopover/>
-                      <span className="mono tnum" style={{ fontSize: 12 }}>{fmtNum(s.calls_1h)}</span>
-                    </div>
-                  </td>
-                  <td className="num">{s.p95 ? `${s.p95}ms` : '—'}</td>
-                  <td className="muted mono" style={{ fontSize: 11.5 }}>
-                    {s.last_handshake_at ? fmtRelative(s.last_handshake_at) : '—'}
-                  </td>
-                  <td>
-                    {s.status === 'ok' && <span className="badge ok"><span className="dot"/>OK</span>}
-                    {s.status === 'warn' && <span className="badge warn"><span className="dot"/>Degraded</span>}
-                    {s.status === 'err' && <span className="badge err"><span className="dot"/>Down</span>}
-                    {s.status === 'idle' && <span className="badge idle"><span className="dot"/>Idle</span>}
-                  </td>
-                  <td className="actions" onClick={e => e.stopPropagation()}>
-                    <button className="iconbtn" aria-label="More" title="More actions">
-                      <I.MoreV size={14}/>
-                    </button>
-                  </td>
-                </tr>
-              ))}
+              {filtered.map(s => {
+                const fb = fallbackBy[s.id] || {};
+                return (
+                  <tr key={s.id}
+                      className={selected.has(s.id) ? 'selected' : ''}
+                      onClick={() => onNav(`server/${s.id}`)}
+                      data-testid={`servers-row-${s.id}`}>
+                    <td className="checkbox-col" onClick={e => e.stopPropagation()}>
+                      <input type="checkbox" className="checkbox"
+                             checked={selected.has(s.id)}
+                             onChange={() => toggleOne(s.id)}
+                             aria-label={`Select ${s.name}`}/>
+                    </td>
+                    <td><StatusDot status={s.status}/></td>
+                    <td>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <b>{s.name}</b>
+                        {s.enabled === false && <span className="badge idle"><span className="dot"/>Disabled</span>}
+                      </div>
+                      <div className="tertiary mono" style={{ fontSize: 11, marginTop: 2 }}>{s.url}</div>
+                    </td>
+                    <td><Transport t={s.transport}/></td>
+                    <td className="num">{fb.tools ?? '—'}</td>
+                    <td>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                        <Sparkline data={fb.spark || []} width={68} height={20} fill
+                                   color={s.status === 'err' ? 'var(--status-err)' : s.status === 'warn' ? 'var(--status-warn)' : 'var(--accent)'}
+                                   showPopover/>
+                        <span className="mono tnum" style={{ fontSize: 12 }}>{fmtNum(fb.calls_1h ?? 0)}</span>
+                      </div>
+                    </td>
+                    <td className="num">{fb.p95 ? `${fb.p95}ms` : '—'}</td>
+                    <td className="muted mono" style={{ fontSize: 11.5 }}>
+                      {fb.last_handshake_at ? fmtRelative(fb.last_handshake_at) : '—'}
+                    </td>
+                    <td>
+                      {s.status === 'ok' && <span className="badge ok"><span className="dot"/>OK</span>}
+                      {s.status === 'warn' && <span className="badge warn"><span className="dot"/>Degraded</span>}
+                      {s.status === 'err' && <span className="badge err"><span className="dot"/>Down</span>}
+                      {(!s.status || s.status === 'idle') && <span className="badge idle"><span className="dot"/>Idle</span>}
+                    </td>
+                    <td className="actions" onClick={e => e.stopPropagation()}>
+                      <button className="iconbtn" aria-label="More" title="More actions">
+                        <I.MoreV size={14}/>
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })}
               {filtered.length === 0 && (
                 <tr><td colSpan={10}>
-                  <EmptyState
-                    icon={<I.Server size={26}/>}
-                    title="No servers match your filters"
-                    body="Try clearing some filters or registering a new server."
-                    action={<button className="btn" onClick={() => { setStatusFilter('all'); setTransportFilter('all'); setQ(''); }}>Clear filters</button>}
-                    secondary={<button className="btn primary" onClick={() => onNav('servers-new')}><I.Plus size={12}/>New server</button>}
-                  />
+                  <div role="status" aria-live="polite" data-testid="servers-empty">
+                    <EmptyState
+                      icon={<I.Server size={26}/>}
+                      title={rawServers.length === 0 ? 'No servers yet' : 'No servers match your filters'}
+                      body={rawServers.length === 0
+                        ? 'Register your first MCP server to get started.'
+                        : 'Try clearing some filters or registering a new server.'}
+                      action={rawServers.length === 0
+                        ? <button className="btn primary" onClick={() => onNav('servers-new')}><I.Plus size={12}/>New server</button>
+                        : <button className="btn" onClick={() => { setStatusFilter('all'); setTransportFilter('all'); setQ(''); }}>Clear filters</button>}
+                      secondary={rawServers.length > 0
+                        ? <button className="btn primary" onClick={() => onNav('servers-new')}><I.Plus size={12}/>New server</button>
+                        : null}
+                    />
+                  </div>
                 </td></tr>
               )}
             </tbody>
@@ -221,25 +327,67 @@ function ServersListPage({ onNav, toast }) {
 
 // ============== Server detail ==============
 function ServerDetailPage({ serverId, onNav, toast, onOpenAudit }) {
-  const s = SERVERS.find(x => x.id === serverId);
+  const serverQ = useServer(serverId);
   const [tab, setTab] = React.useState('overview');
   const [confirmDelete, setConfirmDelete] = React.useState(false);
 
-  if (!s) {
-    return <div className="page"><EmptyState title="Server not found" body={`No server with id ${serverId}.`}
-      action={<button className="btn" onClick={() => onNav('servers')}>Back to servers</button>}/></div>;
+  if (serverQ.isLoading || serverQ.isPending) {
+    return (
+      <div className="page" role="status" aria-busy="true" data-testid="server-detail-loading">
+        <div className="page-head">
+          <div>
+            <h1 className="page-title">Server</h1>
+            <p className="page-sub">Loading…</p>
+          </div>
+        </div>
+        <div className="card"><div className="card-body row-gap-8" style={{ padding: 16 }}>
+          <Skeleton w="40%" h={22}/>
+          <Skeleton w="70%" h={14}/>
+          <Skeleton w="90%" h={14}/>
+        </div></div>
+      </div>
+    );
+  }
+  if (serverQ.isError) {
+    return (
+      <div className="page" role="alert" data-testid="server-detail-error">
+        <EmptyState
+          icon={<I.AlertTriangle size={26}/>}
+          title="Couldn't load server"
+          body={serverQ.error?.message || 'An unexpected error occurred.'}
+          action={
+            <button type="button" className="btn primary"
+                    data-testid="server-detail-error-retry"
+                    onClick={() => { void serverQ.refetch(); }}>
+              <I.Refresh size={13}/> Retry
+            </button>
+          }
+        />
+      </div>
+    );
+  }
+  const liveServer = serverQ.data;
+  if (!liveServer) {
+    return (
+      <div className="page" data-testid="server-detail-empty">
+        <EmptyState title="Server not found" body={`No server with id ${serverId}.`}
+          action={<button className="btn" onClick={() => onNav('servers')}>Back to servers</button>}/>
+      </div>
+    );
   }
 
-  const tools = TOOLS[s.id] || [];
+  // Merge in fixture telemetry the wire `McpServer` shape doesn't carry.
+  const fb = FALLBACK_SERVERS.find(x => x.id === liveServer.id) || {};
+  const s = { ...fb, ...liveServer };
   const handshakeHistory = Array.from({ length: 12 }, (_, i) => ({
-    ts: s.last_handshake_at - i * (s.id === 'srv_07' ? 30 * 60 * 1000 : 4 * 60 * 60 * 1000),
-    dur: s.id === 'srv_07' && i < 6 ? null : Math.round(180 + Math.random() * 400),
-    ok: s.id === 'srv_07' ? i >= 6 : i === 0 ? s.status !== 'err' : Math.random() > 0.05,
-    tools: i === 0 ? s.tools : s.tools + Math.floor(Math.random() * 3) - 1,
+    ts: (s.last_handshake_at || Date.now()) - i * 4 * 60 * 60 * 1000,
+    dur: Math.round(180 + Math.random() * 400),
+    ok: i === 0 ? s.status !== 'err' : Math.random() > 0.05,
+    tools: (s.tools || 0) + Math.floor(Math.random() * 3) - 1,
   }));
 
   return (
-    <div className="page">
+    <div className="page" data-testid="server-detail-ready">
       <Breadcrumbs route="servers" extra={[s.name]} onNav={onNav}/>
       <div className="page-head" style={{ marginTop: 12 }}>
         <div>
@@ -333,11 +481,11 @@ function ServerDetailPage({ serverId, onNav, toast, onOpenAudit }) {
 
       <div style={{ marginTop: 16 }}>
         {tab === 'overview' && <ServerOverview s={s}/>}
-        {tab === 'tools' && <ServerTools s={s} tools={tools} onNav={onNav}/>}
-        {tab === 'resources' && <ServerResources s={s}/>}
-        {tab === 'prompts' && <ServerPrompts s={s}/>}
+        {tab === 'tools' && <ServerToolsTab serverId={liveServer.id} onNav={onNav}/>}
+        {tab === 'resources' && <ServerResourcesTab serverId={liveServer.id}/>}
+        {tab === 'prompts' && <ServerPromptsTab serverId={liveServer.id}/>}
         {tab === 'handshakes' && <ServerHandshakes s={s} history={handshakeHistory}/>}
-        {tab === 'audit' && <ServerAuditTab s={s} onOpenAudit={onOpenAudit}/>}
+        {tab === 'audit' && <ServerAuditTab serverId={liveServer.id} serverName={liveServer.name} onOpenAudit={onOpenAudit}/>}
         {tab === 'config' && <ServerConfig s={s}/>}
       </div>
 
@@ -365,14 +513,14 @@ function ServerOverview({ s }) {
         <div className="card-body">
           <dl className="kv">
             <dt>Server ID</dt><dd className="mono">{s.id}</dd>
-            <dt>Tenant</dt><dd>{s.tenant}</dd>
-            <dt>Owner</dt><dd>{s.owner}</dd>
+            <dt>Tenant</dt><dd>{s.tenant || '—'}</dd>
+            <dt>Owner</dt><dd>{s.owner || '—'}</dd>
             <dt>Transport</dt><dd><Transport t={s.transport}/></dd>
             <dt>Endpoint</dt><dd className="mono">{s.url}</dd>
-            <dt>Created</dt><dd>{fmtDateTime(s.created_at)}</dd>
+            <dt>Created</dt><dd>{s.created_at ? fmtDateTime(s.created_at) : '—'}</dd>
             <dt>Last handshake</dt><dd>
-              {fmtRelative(s.last_handshake_at)}
-              <span className="tertiary"> · {fmtDuration(s.handshake_dur_ms)}</span>
+              {s.last_handshake_at ? fmtRelative(s.last_handshake_at) : '—'}
+              {s.handshake_dur_ms != null && <span className="tertiary"> · {fmtDuration(s.handshake_dur_ms)}</span>}
             </dd>
             <dt>Timeout</dt><dd className="mono">30000ms</dd>
             <dt>Retry policy</dt><dd className="mono">exponential · max 3</dd>
@@ -384,24 +532,25 @@ function ServerOverview({ s }) {
         <div className="card-head"><div className="card-title">Latency distribution (1h)</div></div>
         <div className="card-body">
           <div style={{ height: 140, display: 'flex', alignItems: 'flex-end', gap: 3 }}>
-            {s.spark_latency.slice(0, 30).map((v, i) => {
-              const max = Math.max(...s.spark_latency);
-              const h = (v / max) * 100;
+            {(s.spark_latency || []).slice(0, 30).map((v, i) => {
+              const arr = s.spark_latency || [];
+              const max = arr.length ? Math.max(...arr) : 0;
+              const h = max > 0 ? (v / max) * 100 : 0;
               return (
                 <div key={i} title={`${v}ms`}
                      style={{
                        flex: 1, height: `${h}%`,
-                       background: v > s.p95 * 1.5 ? 'var(--status-err)' : v > s.p95 ? 'var(--status-warn)' : 'var(--accent)',
+                       background: v > (s.p95 || 1) * 1.5 ? 'var(--status-err)' : v > (s.p95 || Infinity) ? 'var(--status-warn)' : 'var(--accent)',
                        borderRadius: '2px 2px 0 0', minHeight: 2, opacity: 0.85,
                      }}/>
               );
             })}
           </div>
           <div className="flex-h-between" style={{ marginTop: 12, fontSize: 11.5 }}>
-            <span><b className="mono">{s.p50}</b><span className="tertiary"> ms p50</span></span>
-            <span><b className="mono">{s.p95}</b><span className="tertiary"> ms p95</span></span>
-            <span><b className="mono">{s.p99}</b><span className="tertiary"> ms p99</span></span>
-            <span><b className="mono">{fmtDuration(s.p99 * 2)}</b><span className="tertiary"> ms max</span></span>
+            <span><b className="mono">{s.p50 ?? '—'}</b><span className="tertiary"> ms p50</span></span>
+            <span><b className="mono">{s.p95 ?? '—'}</b><span className="tertiary"> ms p95</span></span>
+            <span><b className="mono">{s.p99 ?? '—'}</b><span className="tertiary"> ms p99</span></span>
+            <span><b className="mono">{s.p99 != null ? fmtDuration(s.p99 * 2) : '—'}</b><span className="tertiary"> ms max</span></span>
           </div>
         </div>
       </div>
@@ -409,93 +558,108 @@ function ServerOverview({ s }) {
   );
 }
 
-function ServerTools({ s, tools, onNav }) {
+function ServerToolsTab({ serverId, onNav }) {
+  const q = useServerTools(serverId);
   return (
-    <div className="card">
-      <div className="card-head">
-        <div className="card-title">Tool catalog · {tools.length}</div>
-        <div className="flex-h">
-          <button className="btn sm"><I.Refresh size={12}/> Re-handshake</button>
+    <DataState
+      query={q}
+      testIdBase="server-tools"
+      isEmpty={(data) => !data || data.length === 0}
+      empty={{ icon: <I.Wrench size={26}/>, title: 'No tools', body: "This server hasn't advertised any tools yet." }}
+      ready={(tools) => (
+        <div className="card">
+          <div className="card-head">
+            <div className="card-title">Tool catalog · {tools.length}</div>
+            <div className="flex-h">
+              <button className="btn sm"><I.Refresh size={12}/> Re-handshake</button>
+            </div>
+          </div>
+          <div className="table-wrap">
+            <table className="tbl">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Description</th>
+                  <th style={{ width: 120 }}></th>
+                </tr>
+              </thead>
+              <tbody>
+                {tools.map(t => (
+                  <tr key={t.name} onClick={() => onNav(`tool/${serverId}/${t.name}`)}
+                      data-testid={`server-tools-row-${t.name}`}>
+                    <td><b className="mono">{t.name}</b></td>
+                    <td className="muted">{t.description || '—'}</td>
+                    <td>
+                      <button className="btn sm" onClick={(e) => { e.stopPropagation(); onNav(`tool/${serverId}/${t.name}`); }}>
+                        <I.Play size={12}/> Try it
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
-      <div className="table-wrap">
-        <table className="tbl">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Description</th>
-              <th style={{ width: 100 }} className="num">Calls (24h)</th>
-              <th style={{ width: 70 }} className="num">p50</th>
-              <th style={{ width: 90 }}>Flags</th>
-              <th style={{ width: 120 }}></th>
-            </tr>
-          </thead>
-          <tbody>
-            {tools.map(t => (
-              <tr key={t.name} onClick={() => onNav(`tool/${s.id}/${t.name}`)}>
-                <td><b className="mono">{t.name}</b></td>
-                <td className="muted">{t.desc}</td>
-                <td className="num">{fmtNum(t.calls_24h)}</td>
-                <td className="num">{fmtDuration(t.p50)}</td>
-                <td>
-                  {t.destructive && <span className="badge warn"><span className="dot"/>destructive</span>}
-                </td>
-                <td>
-                  <button className="btn sm" onClick={(e) => { e.stopPropagation(); onNav(`tool/${s.id}/${t.name}`); }}>
-                    <I.Play size={12}/> Try it
-                  </button>
-                </td>
-              </tr>
-            ))}
-            {tools.length === 0 && <tr><td colSpan={6}>
-              <EmptyState title="No tools" body="This server hasn't advertised any tools yet."
-                action={<button className="btn"><I.Handshake size={12}/>Run handshake</button>}/>
-            </td></tr>}
-          </tbody>
-        </table>
-      </div>
-    </div>
+      )}
+    />
   );
 }
 
-function ServerResources({ s }) {
+function ServerResourcesTab({ serverId }) {
+  const q = useResources(serverId);
   return (
-    <div className="card">
-      <div className="card-head">
-        <div className="card-title">Resources · {s.resources}</div>
-        <a className="icon-link" onClick={() => document.dispatchEvent(new CustomEvent('app:nav', { detail: 'resources' }))}>
-          Open in resources browser <I.ArrowRight size={12}/>
-        </a>
-      </div>
-      <div className="card-body">
-        <p className="muted" style={{ marginTop: 0 }}>
-          Latest handshake advertised <b>{s.resources}</b> resource URIs. Full browser available in the Resources screen.
-        </p>
-      </div>
-    </div>
+    <DataState
+      query={q}
+      testIdBase="server-resources"
+      isEmpty={(data) => !data || data.length === 0}
+      empty={{ icon: <I.FileBox size={26}/>, title: 'No resources', body: "This server hasn't advertised any resources yet." }}
+      ready={(resources) => (
+        <div className="card">
+          <div className="card-head">
+            <div className="card-title">Resources · {resources.length}</div>
+            <a className="icon-link" onClick={() => document.dispatchEvent(new CustomEvent('app:nav', { detail: 'resources' }))}>
+              Open in resources browser <I.ArrowRight size={12}/>
+            </a>
+          </div>
+          <div className="card-body">
+            <p className="muted" style={{ marginTop: 0 }}>
+              Latest handshake advertised <b>{resources.length}</b> resource URIs. Full browser available in the Resources screen.
+            </p>
+          </div>
+        </div>
+      )}
+    />
   );
 }
 
-function ServerPrompts({ s }) {
-  const prompts = PROMPTS[s.id] || [];
+function ServerPromptsTab({ serverId }) {
+  const q = usePrompts(serverId);
   return (
-    <div className="card">
-      <div className="card-head">
-        <div className="card-title">Prompts · {prompts.length}</div>
-      </div>
-      <div className="card-body flush">
-        {prompts.length === 0 && <EmptyState title="No prompts" body="This server doesn't expose any prompts."/>}
-        {prompts.map(p => (
-          <div key={p.name} style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}>
-            <div className="flex-h-between">
-              <b className="mono">{p.name}</b>
-              <span className="badge outline">{p.args.length} arg{p.args.length === 1 ? '' : 's'}</span>
-            </div>
-            <p className="muted" style={{ margin: '4px 0 0', fontSize: 12.5 }}>{p.desc}</p>
+    <DataState
+      query={q}
+      testIdBase="server-prompts"
+      isEmpty={(data) => !data || data.length === 0}
+      empty={{ icon: <I.Sparkles size={26}/>, title: 'No prompts', body: "This server doesn't expose any prompts." }}
+      ready={(prompts) => (
+        <div className="card">
+          <div className="card-head">
+            <div className="card-title">Prompts · {prompts.length}</div>
           </div>
-        ))}
-      </div>
-    </div>
+          <div className="card-body flush">
+            {prompts.map(p => (
+              <div key={p.name} style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}
+                   data-testid={`server-prompts-row-${p.name}`}>
+                <div className="flex-h-between">
+                  <b className="mono">{p.name}</b>
+                  <span className="badge outline">{(p.args || []).length} arg{(p.args || []).length === 1 ? '' : 's'}</span>
+                </div>
+                <p className="muted" style={{ margin: '4px 0 0', fontSize: 12.5 }}>{p.desc || '—'}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    />
   );
 }
 
@@ -536,49 +700,59 @@ function ServerHandshakes({ s, history }) {
   );
 }
 
-function ServerAuditTab({ s, onOpenAudit }) {
-  const scoped = AUDIT.filter(a => a.server_id === s.id).slice(0, 30);
+function ServerAuditTab({ serverId, serverName, onOpenAudit }) {
+  const q = useAudit({ server_id: serverId, per_page: 30 });
   return (
-    <div className="card">
-      <div className="card-head">
-        <div className="card-title">Audit log · scoped to {s.name}</div>
-        <a className="icon-link" onClick={() => document.dispatchEvent(new CustomEvent('app:nav', { detail: 'audit' }))}>
-          Open full audit log <I.ArrowRight size={12}/>
-        </a>
-      </div>
-      <div className="table-wrap">
-        <table className="tbl">
-          <thead>
-            <tr>
-              <th style={{ width: 28 }}></th>
-              <th style={{ width: 110 }}>Time</th>
-              <th>Method / Tool</th>
-              <th style={{ width: 80 }} className="num">Dur</th>
-              <th style={{ width: 70 }}>Status</th>
-              <th>Actor</th>
-            </tr>
-          </thead>
-          <tbody>
-            {scoped.map(a => (
-              <tr key={a.id} onClick={() => onOpenAudit(a.id)}>
-                <td><StatusDot status={a.status === 200 ? 'ok' : a.status >= 500 ? 'err' : 'warn'}/></td>
-                <td className="mono tertiary" style={{ fontSize: 11.5 }}>{fmtRelative(a.ts)}</td>
-                <td>
-                  <span className="mono">{a.method}</span>
-                  {a.tool && <span className="tertiary"> · </span>}
-                  {a.tool && <b>{a.tool}</b>}
-                </td>
-                <td className="num">{fmtDuration(a.dur)}</td>
-                <td>
-                  <span className={`badge mono ${a.status === 200 ? 'ok' : a.status >= 500 ? 'err' : 'warn'}`}>{a.status}</span>
-                </td>
-                <td className="muted truncate" style={{ maxWidth: 180 }}>{a.actor}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <DataState
+      query={q}
+      testIdBase="server-audit"
+      isEmpty={(data) => !data || data.length === 0}
+      empty={{ icon: <I.Scroll size={26}/>, title: 'No audit rows', body: 'This server has no recent invocations.' }}
+      ready={(rows) => (
+        <div className="card">
+          <div className="card-head">
+            <div className="card-title">Audit log · scoped to {serverName}</div>
+            <a className="icon-link" onClick={() => document.dispatchEvent(new CustomEvent('app:nav', { detail: 'audit' }))}>
+              Open full audit log <I.ArrowRight size={12}/>
+            </a>
+          </div>
+          <div className="table-wrap">
+            <table className="tbl">
+              <thead>
+                <tr>
+                  <th style={{ width: 28 }}></th>
+                  <th style={{ width: 110 }}>Time</th>
+                  <th>Tool</th>
+                  <th style={{ width: 80 }} className="num">Dur</th>
+                  <th style={{ width: 70 }}>Status</th>
+                  <th>Actor</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map(a => {
+                  const statusNum = Number(a.status);
+                  const ts = a.created_at ? new Date(a.created_at).getTime() : a.ts;
+                  const dur = a.duration_ms ?? a.dur;
+                  return (
+                    <tr key={a.id} onClick={() => onOpenAudit(a.id)}
+                        data-testid={`server-audit-row-${a.id}`}>
+                      <td><StatusDot status={statusNum === 200 ? 'ok' : statusNum >= 500 ? 'err' : 'warn'}/></td>
+                      <td className="mono tertiary" style={{ fontSize: 11.5 }}>{fmtRelative(ts)}</td>
+                      <td><b className="mono">{a.tool_name || a.tool || '—'}</b></td>
+                      <td className="num">{fmtDuration(dur)}</td>
+                      <td>
+                        <span className={`badge mono ${statusNum === 200 ? 'ok' : statusNum >= 500 ? 'err' : 'warn'}`}>{a.status}</span>
+                      </td>
+                      <td className="muted truncate" style={{ maxWidth: 180 }}>{a.actor}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    />
   );
 }
 
diff --git a/resources/js/pages/tools.tsx b/resources/js/pages/tools.tsx
index daaa586..92efefc 100644
--- a/resources/js/pages/tools.tsx
+++ b/resources/js/pages/tools.tsx
@@ -1,8 +1,19 @@
 // @ts-nocheck
+// W3: read-paths wired. `ToolsPage` is now hook-backed via `useTools()`
+// (flat aggregator across every registered server) for the sidebar tree,
+// and `useServers()` for grouping. When `initialTool` is passed in (the
+// router for `/tool/:server_id/:name`) we additionally pull the per-server
+// tool list to enrich the detail pane.
+//
+// The fixture `ALL_TOOLS` is retained ONLY as a fallback shape adapter so
+// pre-existing UI bits like `calls_24h` / `p50` / `destructive` flags
+// degrade gracefully when the wire schema doesn't carry them.
+// `ToolPlayground` (try-it) remains fixture-only — it's a write path
+// scheduled for W4.
+
 import React from 'react';
 import {
-  NOW, TENANTS, SERVERS, TOOLS, ALL_TOOLS, AUDIT, AUDIT_DETAIL,
-  BREAKERS, RESOURCES, RESOURCE_CONTENT, PROMPTS, ME, API_KEYS,
+  SERVERS as FALLBACK_SERVERS, ALL_TOOLS as FALLBACK_ALL_TOOLS,
 } from '../lib/data';
 import {
   Icon, I, StatusDot, Transport, Sparkline,
@@ -11,15 +22,15 @@ import {
   Kbd, Skeleton, Tabs, EmptyState,
 } from '../lib/ui';
 import { Breadcrumbs, ROUTES, SECONDARY } from '../components/shell';
+import { useTools, useServers, useAudit } from '../lib/queries/hooks';
+import { DataState } from '../lib/data-state';
 
 // ============== Tools explorer + Try-it playground ==============
 
 function ToolsPage({ onNav, toast, initialTool }) {
-  const [selected, setSelected] = React.useState(() => {
-    if (initialTool) return initialTool;
-    const t = ALL_TOOLS[0];
-    return t ? { server_id: t.server_id, name: t.name } : null;
-  });
+  const toolsQ = useTools();
+  const serversQ = useServers();
+  const [selected, setSelected] = React.useState(initialTool || null);
   const [serverFilter, setServerFilter] = React.useState('all');
   const [q, setQ] = React.useState('');
 
@@ -27,23 +38,114 @@ function ToolsPage({ onNav, toast, initialTool }) {
     if (initialTool) setSelected(initialTool);
   }, [initialTool?.server_id, initialTool?.name]);
 
-  const grouped = SERVERS
-    .filter(s => serverFilter === 'all' || (serverFilter === 'active' && s.enabled && s.status !== 'err')
+  const liveTools = toolsQ.data ?? [];
+  const liveServers = serversQ.data?.data ?? [];
+
+  // Initial-selection bootstrap when no `initialTool` prop AND the live
+  // tool list lands. Pick the first tool so the detail pane isn't empty.
+  React.useEffect(() => {
+    if (!selected && liveTools.length > 0) {
+      setSelected({ server_id: liveTools[0].server_id, name: liveTools[0].name });
+    }
+  }, [selected, liveTools.length]);
+
+  if (toolsQ.isLoading || toolsQ.isPending || serversQ.isLoading || serversQ.isPending) {
+    return (
+      <div className="page" role="status" aria-busy="true" data-testid="tools-loading">
+        <div style={{ padding: 24 }}>
+          <Skeleton w="30%" h={22}/>
+          <div style={{ height: 16 }}/>
+          <Skeleton w="100%" h={14}/>
+          <Skeleton w="90%" h={14}/>
+          <Skeleton w="80%" h={14}/>
+        </div>
+      </div>
+    );
+  }
+  if (toolsQ.isError) {
+    return (
+      <div className="page" role="alert" data-testid="tools-error">
+        <EmptyState
+          icon={<I.AlertTriangle size={26}/>}
+          title="Couldn't load tools"
+          body={toolsQ.error?.message || 'An unexpected error occurred.'}
+          action={
+            <button type="button" className="btn primary"
+                    data-testid="tools-error-retry"
+                    onClick={() => { void toolsQ.refetch(); }}>
+              <I.Refresh size={13}/> Retry
+            </button>
+          }
+        />
+      </div>
+    );
+  }
+  // R14: `serversQ` failure was previously silenced — we'd fall back to
+  // the fixture-derived `FALLBACK_SERVERS` grouping below, which made
+  // the page render with seed-data server names attached to real
+  // (live) tool ids. That's a misleading attribution, not a benign
+  // degradation. Surface it as a page-level error so the operator
+  // knows the grouping can't be trusted.
+  if (serversQ.isError) {
+    return (
+      <div className="page" role="alert" data-testid="tools-servers-error">
+        <EmptyState
+          icon={<I.AlertTriangle size={26}/>}
+          title="Couldn't load servers"
+          body={
+            (serversQ.error?.message || 'Failed to load the server registry.')
+            + ' Tool grouping by server requires the server list — please retry.'
+          }
+          action={
+            <button type="button" className="btn primary"
+                    data-testid="tools-servers-error-retry"
+                    onClick={() => { void serversQ.refetch(); void toolsQ.refetch(); }}>
+              <I.Refresh size={13}/> Retry
+            </button>
+          }
+        />
+      </div>
+    );
+  }
+
+  if (liveTools.length === 0) {
+    return (
+      <div className="page" role="status" data-testid="tools-empty">
+        <EmptyState
+          icon={<I.Wrench size={26}/>}
+          title="No tools yet"
+          body="Register an MCP server and run a handshake to discover tools."
+          action={<button className="btn primary" onClick={() => onNav('servers')}><I.Server size={12}/>Open servers</button>}
+        />
+      </div>
+    );
+  }
+
+  // Build server -> tools grouping from live data, falling back to fixture
+  // metadata where present.
+  const serverById = {};
+  liveServers.forEach(s => { serverById[s.id] = s; });
+  FALLBACK_SERVERS.forEach(s => { if (!serverById[s.id]) serverById[s.id] = s; });
+
+  const grouped = Object.values(serverById)
+    .filter(s => serverFilter === 'all' || (serverFilter === 'active' && s.enabled !== false && s.status !== 'err')
       || (serverFilter === 'err' && s.status === 'err'))
-    .filter(s => TOOLS[s.id]?.length)
     .map(s => ({
       server: s,
-      tools: (TOOLS[s.id] || []).filter(t =>
-        !q || t.name.toLowerCase().includes(q.toLowerCase()) ||
-        s.name.toLowerCase().includes(q.toLowerCase())
-      ),
+      tools: liveTools
+        .filter(t => t.server_id === s.id)
+        .filter(t => !q || t.name.toLowerCase().includes(q.toLowerCase()) || (s.name || '').toLowerCase().includes(q.toLowerCase())),
     }))
     .filter(g => g.tools.length);
 
-  const sel = selected && ALL_TOOLS.find(t => t.server_id === selected.server_id && t.name === selected.name);
+  // Resolve selected tool — first try live, then fixture for visual fields.
+  const sel = selected && (
+    liveTools.find(t => t.server_id === selected.server_id && t.name === selected.name)
+    ?? FALLBACK_ALL_TOOLS.find(t => t.server_id === selected.server_id && t.name === selected.name)
+  );
 
   return (
-    <div className="page full" style={{ padding: 0, maxWidth: 'none' }}>
+    <div className="page full" style={{ padding: 0, maxWidth: 'none' }} data-testid="tools-ready">
       <div style={{
         display: 'grid', gridTemplateColumns: '260px 1fr',
         height: 'calc(100vh - var(--topbar-h))',
@@ -55,7 +157,9 @@ function ToolsPage({ onNav, toast, initialTool }) {
             <div className="search-input" style={{ maxWidth: 'none' }}>
               <I.Search size={13} className="search-icon"/>
               <input className="input" placeholder="Search tools…"
-                     value={q} onChange={e => setQ(e.target.value)}/>
+                     value={q} onChange={e => setQ(e.target.value)}
+                     data-testid="tools-search-input"
+                     aria-label="Search tools"/>
             </div>
             <div className="filter-bar" style={{ margin: '8px 0 0', gap: 4 }}>
               {[
@@ -117,9 +221,9 @@ function ToolGroup({ server, tools, selected, onSelect }) {
 
 function ToolDetailPane({ tool, toast, onNav }) {
   const [tab, setTab] = React.useState('try');
-  const server = SERVERS.find(s => s.id === tool.server_id);
+  const server = FALLBACK_SERVERS.find(s => s.id === tool.server_id) || { id: tool.server_id, name: tool.server_name || tool.server_id };
   return (
-    <div style={{ padding: 24, maxWidth: 1100, margin: '0 auto' }}>
+    <div style={{ padding: 24, maxWidth: 1100, margin: '0 auto' }} data-testid="tool-detail-ready">
       <div className="page-head">
         <div>
           <h1 className="page-title">
@@ -128,13 +232,13 @@ function ToolDetailPane({ tool, toast, onNav }) {
             <span className="mono">{tool.name}</span>
             {tool.destructive && <span className="badge warn"><span className="dot"/>destructive</span>}
           </h1>
-          <p className="page-sub">{tool.desc}</p>
+          <p className="page-sub">{tool.description || tool.desc || '—'}</p>
         </div>
         <div className="page-actions">
           <span className="muted" style={{ fontSize: 12 }}>
-            <b className="mono">{fmtNum(tool.calls_24h)}</b> calls / 24h
-            <span className="tertiary"> · </span>
-            <b className="mono">{fmtDuration(tool.p50)}</b> p50
+            {tool.calls_24h != null && <><b className="mono">{fmtNum(tool.calls_24h)}</b> calls / 24h</>}
+            {tool.calls_24h != null && tool.p50 != null && <span className="tertiary"> · </span>}
+            {tool.p50 != null && <><b className="mono">{fmtDuration(tool.p50)}</b> p50</>}
           </span>
         </div>
       </div>
@@ -147,7 +251,7 @@ function ToolDetailPane({ tool, toast, onNav }) {
 
       <div style={{ marginTop: 16 }}>
         {tab === 'try' && <ToolPlayground tool={tool} toast={toast}/>}
-        {tab === 'schema' && <ToolSchema schema={tool.schema || { type: 'object', properties: {} }}/>}
+        {tab === 'schema' && <ToolSchema schema={tool.input_schema || tool.schema || { type: 'object', properties: {} }}/>}
         {tab === 'recent' && <ToolRecentCalls tool={tool} onNav={onNav}/>}
       </div>
     </div>
@@ -155,7 +259,7 @@ function ToolDetailPane({ tool, toast, onNav }) {
 }
 
 function ToolPlayground({ tool, toast }) {
-  const schema = tool.schema || { type: 'object', properties: {} };
+  const schema = tool.input_schema || tool.schema || { type: 'object', properties: {} };
   const initial = {};
   Object.entries(schema.properties || {}).forEach(([k, v]) => {
     if (v.default !== undefined) initial[k] = v.default;
@@ -379,38 +483,51 @@ function SchemaNode({ name, schema, required = [], root }) {
 }
 
 function ToolRecentCalls({ tool, onNav }) {
-  const calls = AUDIT.filter(a => a.tool === tool.name).slice(0, 30);
+  const q = useAudit({ tool_name: tool.name, per_page: 30 });
   return (
-    <div className="card">
-      <div className="card-head"><div className="card-title">Recent invocations · last 30</div></div>
-      <div className="table-wrap">
-        <table className="tbl">
-          <thead>
-            <tr>
-              <th style={{ width: 28 }}></th>
-              <th>Time</th>
-              <th style={{ width: 70 }} className="num">Status</th>
-              <th style={{ width: 80 }} className="num">Duration</th>
-              <th>Actor</th>
-              <th style={{ width: 120 }}>Audit ID</th>
-            </tr>
-          </thead>
-          <tbody>
-            {calls.map(a => (
-              <tr key={a.id} onClick={() => document.dispatchEvent(new CustomEvent('app:open-audit', { detail: a.id }))}>
-                <td><StatusDot status={a.status === 200 ? 'ok' : 'err'}/></td>
-                <td className="mono tertiary" style={{ fontSize: 11.5 }}>{fmtRelative(a.ts)}</td>
-                <td><span className={`badge mono ${a.status === 200 ? 'ok' : a.status >= 500 ? 'err' : 'warn'}`}>{a.status}</span></td>
-                <td className="num">{fmtDuration(a.dur)}</td>
-                <td className="muted truncate" style={{ maxWidth: 180 }}>{a.actor}</td>
-                <td><span className="id-link">{a.id.slice(0, 14)}…</span></td>
-              </tr>
-            ))}
-            {calls.length === 0 && <tr><td colSpan={6}><EmptyState title="No calls yet" body="This tool hasn't been invoked recently."/></td></tr>}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <DataState
+      query={q}
+      testIdBase="tool-recent-calls"
+      isEmpty={(data) => !data || data.length === 0}
+      empty={{ icon: <I.Clock size={26}/>, title: 'No calls yet', body: "This tool hasn't been invoked recently." }}
+      ready={(calls) => (
+        <div className="card">
+          <div className="card-head"><div className="card-title">Recent invocations · last 30</div></div>
+          <div className="table-wrap">
+            <table className="tbl">
+              <thead>
+                <tr>
+                  <th style={{ width: 28 }}></th>
+                  <th>Time</th>
+                  <th style={{ width: 70 }} className="num">Status</th>
+                  <th style={{ width: 80 }} className="num">Duration</th>
+                  <th>Actor</th>
+                  <th style={{ width: 120 }}>Audit ID</th>
+                </tr>
+              </thead>
+              <tbody>
+                {calls.map(a => {
+                  const statusNum = Number(a.status);
+                  const ts = a.created_at ? new Date(a.created_at).getTime() : a.ts;
+                  const dur = a.duration_ms ?? a.dur;
+                  return (
+                    <tr key={a.id} onClick={() => document.dispatchEvent(new CustomEvent('app:open-audit', { detail: a.id }))}
+                        data-testid={`tool-recent-calls-row-${a.id}`}>
+                      <td><StatusDot status={statusNum === 200 ? 'ok' : 'err'}/></td>
+                      <td className="mono tertiary" style={{ fontSize: 11.5 }}>{fmtRelative(ts)}</td>
+                      <td><span className={`badge mono ${statusNum === 200 ? 'ok' : statusNum >= 500 ? 'err' : 'warn'}`}>{a.status}</span></td>
+                      <td className="num">{fmtDuration(dur)}</td>
+                      <td className="muted truncate" style={{ maxWidth: 180 }}>{a.actor}</td>
+                      <td><span className="id-link">{String(a.id).slice(0, 14)}…</span></td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    />
   );
 }
 
diff --git a/tests/js/lib/data-state.test.tsx b/tests/js/lib/data-state.test.tsx
new file mode 100644
index 0000000..b87886b
--- /dev/null
+++ b/tests/js/lib/data-state.test.tsx
@@ -0,0 +1,143 @@
+// Unit tests for `<DataState>` — the shared wrapper that translates a
+// TanStack `UseQueryResult` into the four R14-mandated visible states.
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { DataState } from '../../../resources/js/lib/data-state';
+
+function makeQuery<T>(overrides: Partial<any>) {
+  return {
+    data: undefined,
+    isLoading: false,
+    isPending: false,
+    isError: false,
+    error: undefined,
+    refetch: vi.fn(),
+    ...overrides,
+  } as any;
+}
+
+describe('<DataState>', () => {
+  it('renders the loading state with role=status + aria-busy when isLoading', () => {
+    render(
+      <DataState
+        query={makeQuery({ isLoading: true })}
+        testIdBase="foo"
+        ready={() => <div>ready</div>}
+      />,
+    );
+    const el = screen.getByTestId('foo-loading');
+    expect(el).toBeInTheDocument();
+    expect(el).toHaveAttribute('aria-busy', 'true');
+    expect(el).toHaveAttribute('role', 'status');
+  });
+
+  it('renders the loading state when isPending (TanStack v5 idle hooks)', () => {
+    render(
+      <DataState
+        query={makeQuery({ isPending: true })}
+        testIdBase="foo"
+        ready={() => <div>ready</div>}
+      />,
+    );
+    expect(screen.getByTestId('foo-loading')).toBeInTheDocument();
+  });
+
+  it('renders the error state with role=alert + retry button when isError', () => {
+    render(
+      <DataState
+        query={makeQuery({ isError: true, error: new Error('boom') })}
+        testIdBase="foo"
+        ready={() => <div>ready</div>}
+      />,
+    );
+    const el = screen.getByTestId('foo-error');
+    expect(el).toHaveAttribute('role', 'alert');
+    expect(el.textContent).toContain('boom');
+    expect(screen.getByTestId('foo-error-retry')).toBeInTheDocument();
+  });
+
+  it('retry button calls refetch on the query', () => {
+    const refetch = vi.fn();
+    render(
+      <DataState
+        query={makeQuery({ isError: true, error: new Error('x'), refetch })}
+        testIdBase="foo"
+        ready={() => <div>ready</div>}
+      />,
+    );
+    fireEvent.click(screen.getByTestId('foo-error-retry'));
+    expect(refetch).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the empty state with role=status when isEmpty returns true', () => {
+    render(
+      <DataState
+        query={makeQuery({ data: [] })}
+        testIdBase="foo"
+        isEmpty={(d: any[]) => d.length === 0}
+        ready={() => <div>ready</div>}
+      />,
+    );
+    const el = screen.getByTestId('foo-empty');
+    expect(el).toHaveAttribute('role', 'status');
+  });
+
+  it('renders the ready children when data is non-empty', () => {
+    render(
+      <DataState
+        query={makeQuery({ data: [{ id: 'a' }] })}
+        testIdBase="foo"
+        isEmpty={(d: any[]) => d.length === 0}
+        ready={() => <div data-testid="foo-ready-body">ready</div>}
+      />,
+    );
+    expect(screen.getByTestId('foo-ready-body')).toBeInTheDocument();
+    expect(screen.queryByTestId('foo-empty')).not.toBeInTheDocument();
+  });
+
+  it('wraps the ready branch in a sentinel with data-testid="<base>-ready"', () => {
+    // The header comment advertises an R11 testid contract on the
+    // ready branch; this test pins that contract so future refactors
+    // can't silently drop it.
+    render(
+      <DataState
+        query={makeQuery({ data: [{ id: 'a' }] })}
+        testIdBase="foo"
+        isEmpty={(d: any[]) => d.length === 0}
+        ready={() => <div data-testid="foo-ready-body">payload</div>}
+      />,
+    );
+    const sentinel = screen.getByTestId('foo-ready');
+    expect(sentinel).toBeInTheDocument();
+    expect(sentinel).toHaveAttribute('role', 'presentation');
+    expect(sentinel).toContainElement(screen.getByTestId('foo-ready-body'));
+  });
+
+  it('treats undefined data as empty even without an `isEmpty` predicate', () => {
+    render(
+      <DataState
+        query={makeQuery({ data: undefined })}
+        testIdBase="foo"
+        ready={() => <div>ready</div>}
+      />,
+    );
+    expect(screen.getByTestId('foo-empty')).toBeInTheDocument();
+  });
+
+  it('uses a custom empty override when provided', () => {
+    render(
+      <DataState
+        query={makeQuery({ data: [] })}
+        testIdBase="foo"
+        isEmpty={() => true}
+        empty={{ title: 'Custom empty', body: 'Nothing yet here' }}
+        ready={() => <div>ready</div>}
+      />,
+    );
+    const el = screen.getByTestId('foo-empty');
+    expect(el.textContent).toContain('Custom empty');
+    expect(el.textContent).toContain('Nothing yet here');
+  });
+});
diff --git a/tests/js/pages/audit.test.tsx b/tests/js/pages/audit.test.tsx
new file mode 100644
index 0000000..83b48c3
--- /dev/null
+++ b/tests/js/pages/audit.test.tsx
@@ -0,0 +1,106 @@
+// @ts-nocheck
+// W3 page-level coverage for AuditPage + AuditDrilldown.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { AuditPage, AuditDrilldown } from '../../../resources/js/pages/audit';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+describe('AuditPage', () => {
+  it('shows loading state initially', () => {
+    server.use(
+      http.get(`${BASE}/audit`, async () => {
+        await new Promise(r => setTimeout(r, 50));
+        return HttpResponse.json({ data: [] });
+      }),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<AuditPage onNav={noop} onOpenAudit={noop} initialAuditId={null} />);
+    expect(screen.getByTestId('audit-loading')).toBeInTheDocument();
+  });
+
+  it('renders ready state with rows when audit data lands', async () => {
+    server.use(
+      http.get(`${BASE}/audit`, () => HttpResponse.json({
+        data: [
+          { id: 'aud_xx', mcp_server_id: 'srv_a', mcp_server_name: 'live', tool_name: 'search', status: '200', duration_ms: 142, created_at: '2026-05-17T10:00:00Z', actor: 'lorenzo' },
+        ],
+      })),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<AuditPage onNav={noop} onOpenAudit={noop} initialAuditId={null} />);
+    await waitFor(() => expect(screen.getByTestId('audit-ready')).toBeInTheDocument());
+    expect(screen.getByTestId('audit-row-aud_xx')).toBeInTheDocument();
+  });
+
+  it('renders empty state when audit returns no rows', async () => {
+    server.use(
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<AuditPage onNav={noop} onOpenAudit={noop} initialAuditId={null} />);
+    await waitFor(() => expect(screen.getByTestId('audit-empty')).toBeInTheDocument());
+  });
+
+  it('shows the error state with retry when audit query fails', async () => {
+    server.use(
+      http.get(`${BASE}/audit`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'bad' } }, { status: 500 }),
+      ),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<AuditPage onNav={noop} onOpenAudit={noop} initialAuditId={null} />);
+    await waitFor(() => expect(screen.getByTestId('audit-error')).toBeInTheDocument());
+    expect(screen.getByTestId('audit-error-retry')).toBeInTheDocument();
+  });
+
+  it('triggers a refetch when the error-retry button is clicked', async () => {
+    let calls = 0;
+    server.use(
+      http.get(`${BASE}/audit`, () => {
+        calls += 1;
+        if (calls === 1) {
+          return HttpResponse.json({ error: { code: 'server_error', message: 'first try' } }, { status: 500 });
+        }
+        return HttpResponse.json({ data: [] });
+      }),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<AuditPage onNav={noop} onOpenAudit={noop} initialAuditId={null} />);
+    await waitFor(() => expect(screen.getByTestId('audit-error-retry')).toBeInTheDocument());
+    fireEvent.click(screen.getByTestId('audit-error-retry'));
+    await waitFor(() => expect(screen.getByTestId('audit-ready')).toBeInTheDocument());
+    expect(calls).toBeGreaterThanOrEqual(2);
+  });
+});
+
+describe('AuditDrilldown', () => {
+  it('shows the loading banner while detail is pending', () => {
+    server.use(
+      http.get(`${BASE}/audit/aud_test`, async () => {
+        await new Promise(r => setTimeout(r, 50));
+        return HttpResponse.json({ data: { id: 'aud_test', status: '200', duration_ms: 142 } });
+      }),
+    );
+    renderWithProviders(<AuditDrilldown auditId="aud_test" onClose={noop} toast={{ push: noop }} />);
+    expect(screen.getByTestId('audit-drilldown-loading')).toBeInTheDocument();
+  });
+
+  it('shows an error banner with retry when detail fetch fails', async () => {
+    server.use(
+      http.get(`${BASE}/audit/aud_fail`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'gone' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<AuditDrilldown auditId="aud_fail" onClose={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('audit-drilldown-error')).toBeInTheDocument());
+    expect(screen.getByTestId('audit-drilldown-error-retry')).toBeInTheDocument();
+  });
+});
diff --git a/tests/js/pages/breakers.test.tsx b/tests/js/pages/breakers.test.tsx
new file mode 100644
index 0000000..21680c8
--- /dev/null
+++ b/tests/js/pages/breakers.test.tsx
@@ -0,0 +1,72 @@
+// @ts-nocheck
+// W3 page-level coverage for BreakersPage.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { BreakersPage } from '../../../resources/js/pages/audit';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+describe('BreakersPage', () => {
+  it('shows loading state initially', () => {
+    server.use(
+      http.get(`${BASE}/circuit-breaker`, async () => {
+        await new Promise(r => setTimeout(r, 50));
+        return HttpResponse.json({ data: [] });
+      }),
+    );
+    renderWithProviders(<BreakersPage onNav={noop} toast={{ push: noop }} />);
+    expect(screen.getByTestId('breakers-loading')).toBeInTheDocument();
+  });
+
+  it('renders ready state with breaker cards when wire returns breakers', async () => {
+    server.use(
+      http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({
+        data: [
+          { key: 'cb_a', server_id: 'srv_a', tool_name: 'search', state: 'open', failures: 7 },
+          { key: 'cb_b', server_id: 'srv_b', tool_name: 'merge_pr', state: 'closed', failures: 0 },
+        ],
+      })),
+    );
+    renderWithProviders(<BreakersPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('breakers-ready')).toBeInTheDocument());
+    expect(screen.getByTestId('breakers-card-cb_a')).toBeInTheDocument();
+    expect(screen.getByTestId('breakers-card-cb_b')).toBeInTheDocument();
+  });
+
+  it('shows the empty state when wire returns no breakers', async () => {
+    server.use(
+      http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<BreakersPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('breakers-empty')).toBeInTheDocument());
+  });
+
+  it('shows the error state with retry when query fails', async () => {
+    server.use(
+      http.get(`${BASE}/circuit-breaker`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'bad' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<BreakersPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('breakers-error')).toBeInTheDocument());
+    expect(screen.getByTestId('breakers-error-retry')).toBeInTheDocument();
+  });
+
+  it('normalises wire `half_open` to the `half` UI bucket', async () => {
+    server.use(
+      http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({
+        data: [{ key: 'cb_h', server_id: 'srv_a', tool_name: 'half', state: 'half_open', failures: 1 }],
+      })),
+    );
+    renderWithProviders(<BreakersPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('breakers-card-cb_h')).toBeInTheDocument());
+    expect(screen.getByTestId('breakers-card-cb_h').className).toContain('half');
+  });
+});
diff --git a/tests/js/pages/dashboard.test.tsx b/tests/js/pages/dashboard.test.tsx
new file mode 100644
index 0000000..ba3b180
--- /dev/null
+++ b/tests/js/pages/dashboard.test.tsx
@@ -0,0 +1,114 @@
+// @ts-nocheck
+// W3 page-level coverage for DashboardPage. Exercises every R14 state
+// (loading / error / empty / ready) + R11 testid contract + the refetch
+// callback wired to the error-state retry button.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { DashboardPage } from '../../../resources/js/pages/dashboard';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+const dashboardProps = {
+  liveEvents: [] as any[],
+  livePaused: false,
+  onTogglePaused: noop,
+  onClearFeed: noop,
+  onNav: noop,
+  onSelectAudit: noop,
+};
+
+describe('DashboardPage', () => {
+  it('shows the loading state while servers query is pending', () => {
+    server.use(
+      http.get(`${BASE}/servers`, async () => {
+        await new Promise(r => setTimeout(r, 50));
+        return HttpResponse.json({ data: [] });
+      }),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+      http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<DashboardPage {...dashboardProps} />);
+    expect(screen.getByTestId('dashboard-loading')).toBeInTheDocument();
+    expect(screen.getByTestId('dashboard-loading')).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('renders the ready state with KPI tiles when servers data lands', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_01', name: 'openai-mcp', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+      http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<DashboardPage {...dashboardProps} />);
+    await waitFor(() => expect(screen.getByTestId('dashboard-ready')).toBeInTheDocument());
+    expect(screen.getByTestId('dashboard-kpi-servers')).toBeInTheDocument();
+    expect(screen.getByTestId('dashboard-kpi-calls')).toBeInTheDocument();
+    expect(screen.getByTestId('dashboard-kpi-breakers')).toBeInTheDocument();
+  });
+
+  it('shows the empty state when the wire returns zero servers', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+      http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<DashboardPage {...dashboardProps} />);
+    await waitFor(() => expect(screen.getByTestId('dashboard-empty')).toBeInTheDocument());
+    expect(screen.getByTestId('dashboard-empty')).toHaveAttribute('role', 'status');
+  });
+
+  it('renders the error state when the servers query fails', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'boom' } }, { status: 500 }),
+      ),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+      http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<DashboardPage {...dashboardProps} />);
+    await waitFor(() => expect(screen.getByTestId('dashboard-error')).toBeInTheDocument());
+    expect(screen.getByTestId('dashboard-error')).toHaveAttribute('role', 'alert');
+    expect(screen.getByTestId('dashboard-error-retry')).toBeInTheDocument();
+  });
+
+  it('error retry button refetches the servers query', async () => {
+    let calls = 0;
+    server.use(
+      http.get(`${BASE}/servers`, () => {
+        calls += 1;
+        if (calls === 1) {
+          return HttpResponse.json({ error: { code: 'server_error', message: 'boom' } }, { status: 500 });
+        }
+        return HttpResponse.json({ data: [{ id: 'srv_x', name: 'recovered', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }] });
+      }),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+      http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<DashboardPage {...dashboardProps} />);
+    await waitFor(() => expect(screen.getByTestId('dashboard-error-retry')).toBeInTheDocument());
+    fireEvent.click(screen.getByTestId('dashboard-error-retry'));
+    await waitFor(() => expect(screen.getByTestId('dashboard-ready')).toBeInTheDocument());
+    expect(calls).toBeGreaterThanOrEqual(2);
+  });
+
+  it('renders the wire-only server name (not a fixture-only one)', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_01', name: 'live-mcp', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+      http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({ data: [] })),
+    );
+    const { container } = renderWithProviders(<DashboardPage {...dashboardProps} />);
+    await waitFor(() => expect(screen.getByTestId('dashboard-ready')).toBeInTheDocument());
+    expect(container.textContent).toContain('live-mcp');
+  });
+});
diff --git a/tests/js/pages/helpers.tsx b/tests/js/pages/helpers.tsx
new file mode 100644
index 0000000..f8fa5ca
--- /dev/null
+++ b/tests/js/pages/helpers.tsx
@@ -0,0 +1,30 @@
+// @ts-nocheck
+// Shared helpers for page-level Vitest specs in W3. Every page test boots a
+// fresh axios client + an MSW handler stack and renders the page inside the
+// real `<QueryClientProvider>` + `<MemoryRouter>` chain so the live-data
+// `useQuery` hooks fire against the mocked endpoints.
+//
+// `renderWithProviders` is intentionally minimal: it does NOT mount the App
+// shell — the page-level specs are about the page surface, not the sidebar /
+// topbar / palette / etc. Smoke tests already cover those.
+
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ToastProvider } from '../../../resources/js/lib/ui';
+import { withQueryClient } from '../lib/queries/wrapper';
+
+export const BASE = 'http://127.0.0.1/api/admin/mcp-pack';
+
+export function renderWithProviders(ui: React.ReactNode, initialPath = '/'): RenderResult {
+  const Wrapper = withQueryClient();
+  return render(
+    <Wrapper>
+      <MemoryRouter initialEntries={[initialPath]}>
+        <ToastProvider>{ui}</ToastProvider>
+      </MemoryRouter>
+    </Wrapper>,
+  );
+}
+
+export const noop = () => undefined;
diff --git a/tests/js/pages/integration.test.tsx b/tests/js/pages/integration.test.tsx
new file mode 100644
index 0000000..f7d1b8a
--- /dev/null
+++ b/tests/js/pages/integration.test.tsx
@@ -0,0 +1,73 @@
+// @ts-nocheck
+// W3 integration sanity: the page surfaces NEVER bleed fixture-only
+// strings (the seeded tenant name "Acme Corp", server name "openai-mcp")
+// into the rendered tree when the wire backend reports different data.
+//
+// This complements the per-page tests by walking the full App route
+// table (Dashboard → Servers → Audit → Tools → Breakers).
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import App from '../../../resources/js/App';
+import { withQueryClient } from '../lib/queries/wrapper';
+import { BASE } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+  server.use(
+    http.get(`${BASE}/me`, () => HttpResponse.json({ data: { id: 1 } })),
+    http.get(`${BASE}/tenants`, () => HttpResponse.json({ data: [] })),
+    http.get(`${BASE}/servers`, () => HttpResponse.json({
+      data: [{ id: 'srv_live', name: 'wire-only-mcp', transport: 'http', status: 'ok', enabled: true, url: 'https://wire' }],
+    })),
+    http.get(`${BASE}/tools`, () => HttpResponse.json({
+      data: [{ server_id: 'srv_live', name: 'live_tool', description: 'live' }],
+    })),
+    http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+    http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({ data: [] })),
+    http.get(`${BASE}/api-keys`, () => HttpResponse.json({ data: [] })),
+  );
+});
+
+function renderApp(path: string) {
+  const Wrapper = withQueryClient();
+  return render(
+    <Wrapper>
+      <MemoryRouter initialEntries={[path]}>
+        <App />
+      </MemoryRouter>
+    </Wrapper>,
+  );
+}
+
+describe('integration — wire-only data path', () => {
+  it('servers page shows the wire-only server name, not a fixture-only one', async () => {
+    const { container } = renderApp('/servers');
+    await waitFor(() => expect(screen.getByTestId('servers-ready')).toBeInTheDocument());
+    expect(container.textContent).toContain('wire-only-mcp');
+    // The fixture server "openai-mcp" must not be rendered by the Servers list,
+    // since the list now sources from `useServers()` only.
+    expect(container.textContent).not.toMatch(/openai-mcp/);
+    expect(container.textContent).not.toMatch(/github-mcp/);
+  });
+
+  it('audit page shows empty state when wire reports no rows', async () => {
+    renderApp('/audit');
+    await waitFor(() => expect(screen.getByTestId('audit-empty')).toBeInTheDocument());
+  });
+
+  it('breakers page shows empty state when wire reports no breakers', async () => {
+    renderApp('/breakers');
+    await waitFor(() => expect(screen.getByTestId('breakers-empty')).toBeInTheDocument());
+  });
+
+  it('tools page renders the live tool, not the fixture-only `generate_image`', async () => {
+    const { container } = renderApp('/tools');
+    await waitFor(() => expect(screen.getByTestId('tools-ready')).toBeInTheDocument());
+    expect(container.textContent).toContain('live_tool');
+  });
+});
diff --git a/tests/js/pages/prompts.test.tsx b/tests/js/pages/prompts.test.tsx
new file mode 100644
index 0000000..8fb3f2e
--- /dev/null
+++ b/tests/js/pages/prompts.test.tsx
@@ -0,0 +1,87 @@
+// @ts-nocheck
+// W3 page-level coverage for PromptsPage.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { PromptsPage } from '../../../resources/js/pages/resources';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+describe('PromptsPage', () => {
+  it('shows loading state while servers are pending', () => {
+    server.use(
+      http.get(`${BASE}/servers`, async () => {
+        await new Promise(r => setTimeout(r, 50));
+        return HttpResponse.json({ data: [] });
+      }),
+    );
+    renderWithProviders(<PromptsPage onNav={noop} />);
+    expect(screen.getByTestId('prompts-loading')).toBeInTheDocument();
+  });
+
+  it('shows the empty state when there are no enabled servers', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<PromptsPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('prompts-empty')).toBeInTheDocument());
+  });
+
+  it('shows the error state with retry when servers query fails', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'bad' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<PromptsPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('prompts-error')).toBeInTheDocument());
+    expect(screen.getByTestId('prompts-error-retry')).toBeInTheDocument();
+  });
+
+  it('renders the ready state when servers + prompts land', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_a', name: 'live-a', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/servers/srv_a/prompts`, () => HttpResponse.json({
+        data: [{ name: 'research', desc: 'Research a topic', args: [], preview: [] }],
+      })),
+      http.get(`${BASE}/servers/srv_a/prompts/research`, () => HttpResponse.json({
+        data: { name: 'research', desc: 'Research a topic', args: [], preview: [] },
+      })),
+    );
+    renderWithProviders(<PromptsPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('prompts-ready')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByTestId('prompts-row-research')).toBeInTheDocument());
+  });
+
+  it('shows the per-server list error when prompts fetch fails', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_a', name: 'live-a', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/servers/srv_a/prompts`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'gone' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<PromptsPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('prompts-list-error')).toBeInTheDocument());
+  });
+
+  it('shows the per-server list empty when prompts fetch returns empty', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_a', name: 'live-a', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/servers/srv_a/prompts`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<PromptsPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('prompts-list-empty')).toBeInTheDocument());
+  });
+});
diff --git a/tests/js/pages/resources-content.test.tsx b/tests/js/pages/resources-content.test.tsx
new file mode 100644
index 0000000..108b0c3
--- /dev/null
+++ b/tests/js/pages/resources-content.test.tsx
@@ -0,0 +1,58 @@
+// @ts-nocheck
+// Coverage for the per-resource content preview slice of ResourcesPage —
+// loading / error / empty / ready around `useResource(serverId, uri)`.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { ResourcesPage } from '../../../resources/js/pages/resources';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+const baseHandlers = () => [
+  http.get(`${BASE}/servers`, () => HttpResponse.json({
+    data: [{ id: 'srv_a', name: 'live-a', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+  })),
+  http.get(`${BASE}/servers/srv_a/resources`, () => HttpResponse.json({
+    data: [{ uri: 'mcp://x/readme.md', name: 'readme.md', type: 'file', mime: 'text/markdown', size: 100 }],
+  })),
+];
+
+describe('Resource content preview', () => {
+  it('loads + renders markdown content for the selected resource', async () => {
+    server.use(
+      ...baseHandlers(),
+      http.get(`${BASE}/servers/srv_a/resources/mcp%3A%2F%2Fx%2Freadme.md`, () =>
+        HttpResponse.json({ data: { uri: 'mcp://x/readme.md', mime: 'text/markdown', size: 100, content: '# Hello live' } }),
+      ),
+    );
+    const { container } = renderWithProviders(<ResourcesPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('resources-ready')).toBeInTheDocument());
+    // The file appears in the tree.
+    const fileNode = await screen.findByText('readme.md');
+    fireEvent.click(fileNode);
+    await waitFor(() => {
+      expect(container.textContent).toContain('Hello live');
+    });
+  });
+
+  it('shows the content error state with retry when content fetch fails', async () => {
+    server.use(
+      ...baseHandlers(),
+      http.get(`${BASE}/servers/srv_a/resources/mcp%3A%2F%2Fx%2Freadme.md`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'broken' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<ResourcesPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('resources-ready')).toBeInTheDocument());
+    const fileNode = await screen.findByText('readme.md');
+    fireEvent.click(fileNode);
+    await waitFor(() => expect(screen.getByTestId('resource-content-error')).toBeInTheDocument());
+    expect(screen.getByTestId('resource-content-error-retry')).toBeInTheDocument();
+  });
+});
diff --git a/tests/js/pages/resources.test.tsx b/tests/js/pages/resources.test.tsx
new file mode 100644
index 0000000..c6d9747
--- /dev/null
+++ b/tests/js/pages/resources.test.tsx
@@ -0,0 +1,84 @@
+// @ts-nocheck
+// W3 page-level coverage for ResourcesPage.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { ResourcesPage } from '../../../resources/js/pages/resources';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+describe('ResourcesPage', () => {
+  it('shows loading state while servers are pending', () => {
+    server.use(
+      http.get(`${BASE}/servers`, async () => {
+        await new Promise(r => setTimeout(r, 50));
+        return HttpResponse.json({ data: [] });
+      }),
+    );
+    renderWithProviders(<ResourcesPage onNav={noop} />);
+    expect(screen.getByTestId('resources-loading')).toBeInTheDocument();
+  });
+
+  it('shows the empty state when there are no enabled servers', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<ResourcesPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('resources-empty')).toBeInTheDocument());
+  });
+
+  it('renders the ready state with a server tree when servers + resources land', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_a', name: 'live-a', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/servers/srv_a/resources`, () => HttpResponse.json({
+        data: [{ uri: 'mcp://x/readme.md', name: 'readme.md', type: 'file', mime: 'text/markdown', size: 100 }],
+      })),
+    );
+    renderWithProviders(<ResourcesPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('resources-ready')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByTestId('resources-server-srv_a')).toBeInTheDocument());
+  });
+
+  it('shows the error state with retry when servers query fails', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'bad' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<ResourcesPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('resources-error')).toBeInTheDocument());
+    expect(screen.getByTestId('resources-error-retry')).toBeInTheDocument();
+  });
+
+  it('shows tree-level error banner when per-server resources fail', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_a', name: 'live-a', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/servers/srv_a/resources`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'bad' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<ResourcesPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('resources-tree-error')).toBeInTheDocument());
+  });
+
+  it('shows tree-level empty when per-server resources are empty', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_a', name: 'live-a', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/servers/srv_a/resources`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<ResourcesPage onNav={noop} />);
+    await waitFor(() => expect(screen.getByTestId('resources-tree-empty')).toBeInTheDocument());
+  });
+});
diff --git a/tests/js/pages/server-detail-tabs.test.tsx b/tests/js/pages/server-detail-tabs.test.tsx
new file mode 100644
index 0000000..ba789a1
--- /dev/null
+++ b/tests/js/pages/server-detail-tabs.test.tsx
@@ -0,0 +1,103 @@
+// @ts-nocheck
+// W3 page-level coverage for the per-server tabs (Tools / Resources /
+// Prompts / Audit) rendered inside ServerDetailPage. Each tab is wired
+// to a dedicated hook + DataState.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { ServerDetailPage } from '../../../resources/js/pages/servers';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+function mountDetail() {
+  return renderWithProviders(
+    <ServerDetailPage serverId="srv_x" onNav={noop} toast={{ push: noop }} onOpenAudit={noop} />,
+  );
+}
+
+const okServer = () =>
+  http.get(`${BASE}/servers/srv_x`, () => HttpResponse.json({
+    data: { id: 'srv_x', name: 'live-detail', transport: 'http', status: 'ok', enabled: true, url: 'https://x' },
+  }));
+
+describe('ServerDetailPage tabs', () => {
+  it('Tools tab — ready state shows live tools', async () => {
+    server.use(
+      okServer(),
+      http.get(`${BASE}/servers/srv_x/tools`, () => HttpResponse.json({
+        data: [{ server_id: 'srv_x', name: 'search', description: '' }],
+      })),
+    );
+    mountDetail();
+    await waitFor(() => expect(screen.getByTestId('server-detail-ready')).toBeInTheDocument());
+    // Tools button — there may be multiple "Tools" texts; click the tab button.
+    const toolsTabs = screen.getAllByText(/Tools/i);
+    fireEvent.click(toolsTabs[toolsTabs.length - 1]);
+    await waitFor(() => expect(screen.getByTestId('server-tools-row-search')).toBeInTheDocument());
+  });
+
+  it('Tools tab — empty state when no tools', async () => {
+    server.use(
+      okServer(),
+      http.get(`${BASE}/servers/srv_x/tools`, () => HttpResponse.json({ data: [] })),
+    );
+    mountDetail();
+    await waitFor(() => expect(screen.getByTestId('server-detail-ready')).toBeInTheDocument());
+    const toolsTabs = screen.getAllByText(/Tools/i);
+    fireEvent.click(toolsTabs[toolsTabs.length - 1]);
+    await waitFor(() => expect(screen.getByTestId('server-tools-empty')).toBeInTheDocument());
+  });
+
+  it('Tools tab — error state when tools query fails', async () => {
+    server.use(
+      okServer(),
+      http.get(`${BASE}/servers/srv_x/tools`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'gone' } }, { status: 500 }),
+      ),
+    );
+    mountDetail();
+    await waitFor(() => expect(screen.getByTestId('server-detail-ready')).toBeInTheDocument());
+    const toolsTabs = screen.getAllByText(/Tools/i);
+    fireEvent.click(toolsTabs[toolsTabs.length - 1]);
+    await waitFor(() => expect(screen.getByTestId('server-tools-error')).toBeInTheDocument());
+    expect(screen.getByTestId('server-tools-error-retry')).toBeInTheDocument();
+  });
+
+  it('Prompts tab — empty + ready states', async () => {
+    server.use(
+      okServer(),
+      http.get(`${BASE}/servers/srv_x/prompts`, () => HttpResponse.json({ data: [] })),
+    );
+    mountDetail();
+    await waitFor(() => expect(screen.getByTestId('server-detail-ready')).toBeInTheDocument());
+    // Tab buttons in order: Overview, Tools, Resources, Prompts, Handshakes, Audit, Config.
+    const promptsTabs = screen.getAllByText(/Prompts/i);
+    fireEvent.click(promptsTabs[promptsTabs.length - 1]);
+    await waitFor(() => expect(screen.getByTestId('server-prompts-empty')).toBeInTheDocument());
+  });
+
+  it('Audit tab — loads scoped audit rows', async () => {
+    server.use(
+      okServer(),
+      http.get(`${BASE}/audit`, ({ request }) => {
+        const url = new URL(request.url);
+        // Confirm the FE passed server_id=srv_x in the filters.
+        expect(url.searchParams.get('server_id')).toBe('srv_x');
+        return HttpResponse.json({
+          data: [{ id: 'aud_z', mcp_server_id: 'srv_x', tool_name: 'search', status: '200', duration_ms: 100, created_at: '2026-05-17T10:00:00Z', actor: 'me' }],
+        });
+      }),
+    );
+    mountDetail();
+    await waitFor(() => expect(screen.getByTestId('server-detail-ready')).toBeInTheDocument());
+    const auditTabs = screen.getAllByText(/Audit/i);
+    fireEvent.click(auditTabs[auditTabs.length - 1]);
+    await waitFor(() => expect(screen.getByTestId('server-audit-row-aud_z')).toBeInTheDocument());
+  });
+});
diff --git a/tests/js/pages/servers.test.tsx b/tests/js/pages/servers.test.tsx
new file mode 100644
index 0000000..0f641b2
--- /dev/null
+++ b/tests/js/pages/servers.test.tsx
@@ -0,0 +1,118 @@
+// @ts-nocheck
+// W3 page-level coverage for ServersListPage + ServerDetailPage.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { ServersListPage, ServerDetailPage } from '../../../resources/js/pages/servers';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+describe('ServersListPage', () => {
+  it('shows loading state initially', () => {
+    server.use(
+      http.get(`${BASE}/servers`, async () => {
+        await new Promise(r => setTimeout(r, 50));
+        return HttpResponse.json({ data: [] });
+      }),
+    );
+    renderWithProviders(<ServersListPage onNav={noop} toast={{ push: noop }} />);
+    expect(screen.getByTestId('servers-loading')).toBeInTheDocument();
+  });
+
+  it('renders ready state with rows when wire returns servers', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [
+          { id: 'srv_a', name: 'live-a', transport: 'http', status: 'ok', enabled: true, url: 'https://a' },
+          { id: 'srv_b', name: 'live-b', transport: 'sse', status: 'warn', enabled: true, url: 'https://b' },
+        ],
+      })),
+    );
+    renderWithProviders(<ServersListPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('servers-ready')).toBeInTheDocument());
+    expect(screen.getByTestId('servers-row-srv_a')).toBeInTheDocument();
+    expect(screen.getByTestId('servers-row-srv_b')).toBeInTheDocument();
+  });
+
+  it('shows the empty state when wire returns no servers', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<ServersListPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('servers-empty')).toBeInTheDocument());
+  });
+
+  it('shows the error state when the servers query fails', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'oh no' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<ServersListPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('servers-error')).toBeInTheDocument());
+    expect(screen.getByTestId('servers-error-retry')).toBeInTheDocument();
+  });
+
+  it('filters by transport client-side', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [
+          { id: 'srv_http', name: 'live-http', transport: 'http', status: 'ok', enabled: true, url: 'https://h' },
+          { id: 'srv_stdio', name: 'live-stdio', transport: 'stdio', status: 'ok', enabled: true, url: 'cmd' },
+        ],
+      })),
+    );
+    renderWithProviders(<ServersListPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('servers-ready')).toBeInTheDocument());
+    expect(screen.getByTestId('servers-row-srv_http')).toBeInTheDocument();
+    expect(screen.getByTestId('servers-row-srv_stdio')).toBeInTheDocument();
+  });
+
+  it('search input narrows the visible rows', async () => {
+    server.use(
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [
+          { id: 'srv_alpha', name: 'alpha-mcp', transport: 'http', status: 'ok', enabled: true, url: 'https://a' },
+          { id: 'srv_beta', name: 'beta-mcp', transport: 'http', status: 'ok', enabled: true, url: 'https://b' },
+        ],
+      })),
+    );
+    renderWithProviders(<ServersListPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('servers-ready')).toBeInTheDocument());
+    fireEvent.change(screen.getByTestId('servers-search-input'), { target: { value: 'alpha' } });
+    await waitFor(() => {
+      expect(screen.getByTestId('servers-row-srv_alpha')).toBeInTheDocument();
+      expect(screen.queryByTestId('servers-row-srv_beta')).not.toBeInTheDocument();
+    });
+  });
+});
+
+describe('ServerDetailPage', () => {
+  it('shows loading then ready when server fetch resolves', async () => {
+    server.use(
+      http.get(`${BASE}/servers/srv_01`, () => HttpResponse.json({
+        data: { id: 'srv_01', name: 'live-detail', transport: 'http', status: 'ok', enabled: true, url: 'https://x' },
+      })),
+    );
+    renderWithProviders(<ServerDetailPage serverId="srv_01" onNav={noop} toast={{ push: noop }} onOpenAudit={noop} />);
+    expect(screen.getByTestId('server-detail-loading')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByTestId('server-detail-ready')).toBeInTheDocument());
+  });
+
+  it('renders the error state with retry when server fetch fails', async () => {
+    server.use(
+      http.get(`${BASE}/servers/srv_x`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'gone' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<ServerDetailPage serverId="srv_x" onNav={noop} toast={{ push: noop }} onOpenAudit={noop} />);
+    await waitFor(() => expect(screen.getByTestId('server-detail-error')).toBeInTheDocument());
+    expect(screen.getByTestId('server-detail-error-retry')).toBeInTheDocument();
+  });
+});
diff --git a/tests/js/pages/tools-recent-calls.test.tsx b/tests/js/pages/tools-recent-calls.test.tsx
new file mode 100644
index 0000000..e66e0e4
--- /dev/null
+++ b/tests/js/pages/tools-recent-calls.test.tsx
@@ -0,0 +1,72 @@
+// @ts-nocheck
+// Coverage for the `ToolRecentCalls` slice of ToolsPage — it lives behind
+// the "Recent calls" tab inside ToolDetailPane and is the ONE place a
+// per-tool audit query (`useAudit({ tool_name })`) gets exercised.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { ToolsPage } from '../../../resources/js/pages/tools';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+const baseHandlers = () => [
+  http.get(`${BASE}/tools`, () => HttpResponse.json({
+    data: [{ server_id: 'srv_a', name: 'search', description: 'Search the web' }],
+  })),
+  http.get(`${BASE}/servers`, () => HttpResponse.json({
+    data: [{ id: 'srv_a', name: 'live-mcp', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+  })),
+];
+
+describe('ToolRecentCalls', () => {
+  it('shows the empty state when the wire returns zero calls', async () => {
+    server.use(
+      ...baseHandlers(),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<ToolsPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('tool-detail-ready')).toBeInTheDocument());
+    // Click the "Recent calls" tab to trigger the audit query.
+    const recentTab = screen.getByText(/Recent calls/i);
+    fireEvent.click(recentTab);
+    await waitFor(() => expect(screen.getByTestId('tool-recent-calls-empty')).toBeInTheDocument());
+  });
+
+  it('shows the ready state with rows when the wire returns calls', async () => {
+    server.use(
+      ...baseHandlers(),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({
+        data: [{
+          id: 'aud_42', mcp_server_id: 'srv_a', tool_name: 'search',
+          status: '200', duration_ms: 142, created_at: '2026-05-17T10:00:00Z', actor: 'lorenzo',
+        }],
+      })),
+    );
+    renderWithProviders(<ToolsPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('tool-detail-ready')).toBeInTheDocument());
+    const recentTab = screen.getByText(/Recent calls/i);
+    fireEvent.click(recentTab);
+    await waitFor(() => expect(screen.getByTestId('tool-recent-calls-row-aud_42')).toBeInTheDocument());
+  });
+
+  it('shows the error state with retry when audit fetch fails', async () => {
+    server.use(
+      ...baseHandlers(),
+      http.get(`${BASE}/audit`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'bad' } }, { status: 500 }),
+      ),
+    );
+    renderWithProviders(<ToolsPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('tool-detail-ready')).toBeInTheDocument());
+    const recentTab = screen.getByText(/Recent calls/i);
+    fireEvent.click(recentTab);
+    await waitFor(() => expect(screen.getByTestId('tool-recent-calls-error')).toBeInTheDocument());
+    expect(screen.getByTestId('tool-recent-calls-error-retry')).toBeInTheDocument();
+  });
+});
diff --git a/tests/js/pages/tools.test.tsx b/tests/js/pages/tools.test.tsx
new file mode 100644
index 0000000..59b27fd
--- /dev/null
+++ b/tests/js/pages/tools.test.tsx
@@ -0,0 +1,88 @@
+// @ts-nocheck
+// W3 page-level coverage for ToolsPage.
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { server } from '../lib/api/server';
+import { createApiClient, setApiClient } from '../../../resources/js/lib/api/client';
+import { ToolsPage } from '../../../resources/js/pages/tools';
+import { BASE, renderWithProviders, noop } from './helpers';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+});
+
+describe('ToolsPage', () => {
+  it('shows the loading state while tools+servers are pending', () => {
+    server.use(
+      http.get(`${BASE}/tools`, async () => {
+        await new Promise(r => setTimeout(r, 50));
+        return HttpResponse.json({ data: [] });
+      }),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<ToolsPage onNav={noop} toast={{ push: noop }} />);
+    expect(screen.getByTestId('tools-loading')).toBeInTheDocument();
+  });
+
+  it('renders empty state when wire reports no tools', async () => {
+    server.use(
+      http.get(`${BASE}/tools`, () => HttpResponse.json({ data: [] })),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<ToolsPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('tools-empty')).toBeInTheDocument());
+  });
+
+  it('renders ready state with the detail pane when tools land', async () => {
+    server.use(
+      http.get(`${BASE}/tools`, () => HttpResponse.json({
+        data: [{ server_id: 'srv_a', name: 'search', description: 'Search the web' }],
+      })),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_a', name: 'live-mcp', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<ToolsPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('tools-ready')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByTestId('tool-detail-ready')).toBeInTheDocument());
+  });
+
+  it('shows the error state with retry when tools query fails', async () => {
+    server.use(
+      http.get(`${BASE}/tools`, () =>
+        HttpResponse.json({ error: { code: 'server_error', message: 'bad' } }, { status: 500 }),
+      ),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<ToolsPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('tools-error')).toBeInTheDocument());
+    expect(screen.getByTestId('tools-error-retry')).toBeInTheDocument();
+  });
+
+  it('search input filters by tool name', async () => {
+    server.use(
+      http.get(`${BASE}/tools`, () => HttpResponse.json({
+        data: [
+          { server_id: 'srv_a', name: 'searchable', description: '' },
+          { server_id: 'srv_a', name: 'invisible', description: '' },
+        ],
+      })),
+      http.get(`${BASE}/servers`, () => HttpResponse.json({
+        data: [{ id: 'srv_a', name: 'live', transport: 'http', status: 'ok', enabled: true, url: 'https://x' }],
+      })),
+      http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+    );
+    renderWithProviders(<ToolsPage onNav={noop} toast={{ push: noop }} />);
+    await waitFor(() => expect(screen.getByTestId('tools-ready')).toBeInTheDocument());
+    // Before filtering, both tools appear in the sidebar tree (and the
+    // detail pane may show one).
+    fireEvent.change(screen.getByTestId('tools-search-input'), { target: { value: 'searchable' } });
+    await waitFor(() => {
+      // The tree no longer carries `invisible`.
+      expect(screen.queryByText('invisible')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/tests/js/smoke.test.tsx b/tests/js/smoke.test.tsx
index 3cfeed7..63a0646 100644
--- a/tests/js/smoke.test.tsx
+++ b/tests/js/smoke.test.tsx
@@ -1,46 +1,63 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import { http, HttpResponse } from 'msw';
+import { server } from './lib/api/server';
+import { createApiClient, setApiClient } from '../../resources/js/lib/api/client';
 import App from '../../resources/js/App';
 import { I, fmtDuration, fmtBytes, fmtNum } from '../../resources/js/lib/ui';
+import { withQueryClient } from './lib/queries/wrapper';
+
+const BASE = 'http://127.0.0.1/api/admin/mcp-pack';
+
+beforeEach(() => {
+  setApiClient(createApiClient(BASE));
+  // Default MSW handlers — the smoke tests only need the routes to mount
+  // and the sidebar / page heading to render. Every endpoint answers with
+  // an empty envelope so pages move from loading → empty-state quickly.
+  server.use(
+    http.get(`${BASE}/me`, () => HttpResponse.json({ data: { id: 1, email: 'smoke@test' } })),
+    http.get(`${BASE}/tenants`, () => HttpResponse.json({ data: [] })),
+    http.get(`${BASE}/servers`, () => HttpResponse.json({ data: [], meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 } })),
+    http.get(`${BASE}/tools`, () => HttpResponse.json({ data: [] })),
+    http.get(`${BASE}/audit`, () => HttpResponse.json({ data: [] })),
+    http.get(`${BASE}/circuit-breaker`, () => HttpResponse.json({ data: [] })),
+    http.get(`${BASE}/api-keys`, () => HttpResponse.json({ data: [] })),
+  );
+});
+
+function renderApp(path: string) {
+  const Wrapper = withQueryClient();
+  return render(
+    <Wrapper>
+      <MemoryRouter initialEntries={[path]}>
+        <App />
+      </MemoryRouter>
+    </Wrapper>,
+  );
+}
 
 describe('SPA smoke', () => {
   it('renders the sidebar nav and dashboard heading on /', () => {
-    render(
-      <MemoryRouter initialEntries={['/']}>
-        <App />
-      </MemoryRouter>,
-    );
+    renderApp('/');
     expect(screen.getAllByText(/Dashboard/i).length).toBeGreaterThan(0);
     expect(screen.getAllByText(/Servers/i).length).toBeGreaterThan(0);
     expect(screen.getAllByText(/Audit log/i).length).toBeGreaterThan(0);
   });
 
   it('renders the servers list on /servers', () => {
-    render(
-      <MemoryRouter initialEntries={['/servers']}>
-        <App />
-      </MemoryRouter>,
-    );
+    renderApp('/servers');
     // "Servers" appears in the sidebar AND the page title.
     expect(screen.getAllByText(/Servers/i).length).toBeGreaterThan(1);
   });
 
   it('renders the audit log on /audit', () => {
-    render(
-      <MemoryRouter initialEntries={['/audit']}>
-        <App />
-      </MemoryRouter>,
-    );
+    renderApp('/audit');
     expect(screen.getAllByText(/Audit log/i).length).toBeGreaterThan(0);
   });
 
   it('renders the breakers page on /breakers', () => {
-    render(
-      <MemoryRouter initialEntries={['/breakers']}>
-        <App />
-      </MemoryRouter>,
-    );
+    renderApp('/breakers');
     expect(screen.getAllByText(/[Cc]ircuit [Bb]reakers/i).length).toBeGreaterThan(0);
   });
 });