diff --git a/src/composables/__tests__/useAiDiagnostics.spec.ts b/src/composables/__tests__/useAiDiagnostics.spec.ts
new file mode 100644
index 00000000..79a17ed7
--- /dev/null
+++ b/src/composables/__tests__/useAiDiagnostics.spec.ts
@@ -0,0 +1,88 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+import { useDataApi } from '@/composables/axios';
+import { useAiDiagnostics } from '@/composables/useAiDiagnostics';
+
+vi.mock('@/composables/axios', () => ({
+  useDataApi: vi.fn(),
+}));
+
+function mockDataApi(partial: {
+  execute: ReturnType<typeof vi.fn>;
+  isLoading?: ReturnType<typeof ref<boolean>>;
+  error?: ReturnType<typeof ref<unknown>>;
+}) {
+  return {
+    execute: partial.execute,
+    isLoading: partial.isLoading ?? ref(false),
+    error: partial.error ?? ref<unknown>(null),
+  } as unknown as ReturnType<typeof useDataApi>;
+}
+
+describe('useAiDiagnostics', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('does not start a pagination request while one is already loading', async () => {
+    const summaryRequest = vi.fn();
+    const runsRequest = vi.fn(async () => ({
+      data: {
+        value: {
+          data: [
+            {
+              id: 'run-1',
+              status: 'completed',
+            },
+          ],
+          meta: {
+            nextCursor: 'cursor-2',
+          },
+        },
+      },
+    }));
+    const runsPageRequest = vi.fn();
+    const runDetailRequest = vi.fn();
+
+    vi.mocked(useDataApi)
+      .mockReturnValueOnce(
+        mockDataApi({
+          execute: summaryRequest,
+          isLoading: ref(false),
+          error: ref<unknown>(null),
+        }),
+      )
+      .mockReturnValueOnce(
+        mockDataApi({
+          execute: runsRequest,
+          isLoading: ref(false),
+          error: ref<unknown>(null),
+        }),
+      )
+      .mockReturnValueOnce(
+        mockDataApi({
+          execute: runsPageRequest,
+          isLoading: ref(true),
+          error: ref<unknown>(null),
+        }),
+      )
+      .mockReturnValueOnce(
+        mockDataApi({
+          execute: runDetailRequest,
+          isLoading: ref(false),
+          error: ref<unknown>(null),
+        }),
+      );
+
+    const diagnostics = useAiDiagnostics();
+    await diagnostics.refreshRuns();
+    diagnostics.paginationError.value = 'previous pagination error';
+
+    await diagnostics.loadMoreRuns();
+
+    expect(runsPageRequest).not.toHaveBeenCalled();
+    expect(diagnostics.paginationError.value).toBe('previous pagination error');
+    expect(diagnostics.runs.value).toHaveLength(1);
+    expect(diagnostics.nextCursor.value).toBe('cursor-2');
+  });
+});
diff --git a/src/composables/useAiDiagnostics.ts b/src/composables/useAiDiagnostics.ts
new file mode 100644
index 00000000..76fc7279
--- /dev/null
+++ b/src/composables/useAiDiagnostics.ts
@@ -0,0 +1,204 @@
+import { computed, onUnmounted, ref, shallowRef } from 'vue';
+import { useDataApi } from '@/composables/axios';
+import {
+  buildAiDiagnosticsRunDetailEndpoint,
+  buildAiDiagnosticsRunsEndpoint,
+  buildAiDiagnosticsSummaryEndpoint,
+  type AiDiagnosticsRun,
+  type AiDiagnosticsRunDetail,
+  type AiDiagnosticsRunsFilters,
+  type AiDiagnosticsRunsResponse,
+  type AiDiagnosticsSummary,
+} from '@/views/admin/partials/ai-diagnostics';
+
+const labelKeyStopPaths = ['data.scope.labelSets', 'data.events.metadata'];
+
+function unavailableMessage(fallback: string, error: unknown): string {
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+
+  return fallback;
+}
+
+export function useAiDiagnostics() {
+  const summary = shallowRef<AiDiagnosticsSummary | null>(null);
+  const runs = shallowRef<AiDiagnosticsRun[]>([]);
+  const nextCursor = ref<string | null>(null);
+  const runsError = ref<string | null>(null);
+  const paginationError = ref<string | null>(null);
+  const summaryError = ref<string | null>(null);
+  const selectedRunDetail = shallowRef<AiDiagnosticsRunDetail | null>(null);
+  const runDetailError = ref<string | null>(null);
+  const pollTimer = ref<number>();
+
+  const {
+    execute: summaryRequest,
+    isLoading: summaryLoading,
+    error: summaryRequestError,
+  } = useDataApi<AiDiagnosticsSummary>(null, {}, { immediate: false });
+
+  const {
+    execute: runsRequest,
+    isLoading: runsLoading,
+    error: runsRequestError,
+  } = useDataApi<AiDiagnosticsRun[]>(null, {}, { immediate: false });
+
+  const { execute: runsPageRequest, isLoading: paginationLoading } = useDataApi<
+    AiDiagnosticsRun[]
+  >(null, {}, { immediate: false });
+
+  const { execute: runDetailRequest, isLoading: runDetailLoading } =
+    useDataApi<AiDiagnosticsRunDetail>(null, {}, { immediate: false });
+
+  async function refreshSummary() {
+    summaryError.value = null;
+
+    try {
+      const response = await summaryRequest(
+        buildAiDiagnosticsSummaryEndpoint(),
+      );
+      summary.value = response?.data.value?.data ?? null;
+    } catch (error) {
+      summary.value = null;
+      summaryError.value = unavailableMessage(
+        'AI diagnostics summary is unavailable.',
+        error,
+      );
+    }
+  }
+
+  async function refreshRuns(filters: AiDiagnosticsRunsFilters = {}) {
+    runsError.value = null;
+    paginationError.value = null;
+    nextCursor.value = null;
+
+    try {
+      const response = await runsRequest(
+        buildAiDiagnosticsRunsEndpoint(filters),
+        { camelcaseStopPaths: labelKeyStopPaths },
+      );
+      const payload = response?.data.value as
+        | AiDiagnosticsRunsResponse
+        | undefined;
+
+      runs.value = payload?.data ?? [];
+      nextCursor.value = payload?.meta?.nextCursor ?? null;
+    } catch (error) {
+      runs.value = [];
+      runsError.value = unavailableMessage(
+        'AI diagnostics runs are unavailable.',
+        error,
+      );
+    }
+  }
+
+  async function loadMoreRuns(filters: AiDiagnosticsRunsFilters = {}) {
+    if (!nextCursor.value || paginationLoading.value) {
+      return;
+    }
+
+    paginationError.value = null;
+
+    try {
+      const response = await runsPageRequest(
+        buildAiDiagnosticsRunsEndpoint({
+          ...filters,
+          cursor: nextCursor.value,
+        }),
+        { camelcaseStopPaths: labelKeyStopPaths },
+      );
+      const payload = response?.data.value as
+        | AiDiagnosticsRunsResponse
+        | undefined;
+
+      runs.value = [...runs.value, ...(payload?.data ?? [])];
+      nextCursor.value = payload?.meta?.nextCursor ?? null;
+    } catch (error) {
+      paginationError.value = unavailableMessage(
+        'More AI diagnostics runs are unavailable.',
+        error,
+      );
+    }
+  }
+
+  async function fetchRunDetail(runId: string) {
+    runDetailError.value = null;
+    selectedRunDetail.value = null;
+
+    try {
+      const response = await runDetailRequest(
+        buildAiDiagnosticsRunDetailEndpoint(runId),
+        { camelcaseStopPaths: labelKeyStopPaths },
+      );
+      selectedRunDetail.value = response?.data.value?.data ?? null;
+    } catch (error) {
+      runDetailError.value = unavailableMessage(
+        'AI diagnostics run details are unavailable.',
+        error,
+      );
+    }
+
+    return selectedRunDetail.value;
+  }
+
+  function stopPolling() {
+    if (!pollTimer.value) {
+      return;
+    }
+
+    window.clearInterval(pollTimer.value);
+    pollTimer.value = undefined;
+  }
+
+  function pollWhileActive(callback: () => Promise<void> | void) {
+    if (pollTimer.value) {
+      return;
+    }
+
+    pollTimer.value = window.setInterval(() => {
+      void callback();
+    }, 30000);
+  }
+
+  onUnmounted(stopPolling);
+
+  return {
+    summary,
+    runs,
+    nextCursor,
+    selectedRunDetail,
+    summaryLoading,
+    runsLoading,
+    paginationLoading,
+    runDetailLoading,
+    summaryError: computed(
+      () =>
+        summaryError.value ??
+        (summaryRequestError.value
+          ? unavailableMessage(
+              'AI diagnostics summary is unavailable.',
+              summaryRequestError.value,
+            )
+          : null),
+    ),
+    runsError: computed(
+      () =>
+        runsError.value ??
+        (runsRequestError.value
+          ? unavailableMessage(
+              'AI diagnostics runs are unavailable.',
+              runsRequestError.value,
+            )
+          : null),
+    ),
+    paginationError,
+    runDetailError,
+    refreshSummary,
+    refreshRuns,
+    loadMoreRuns,
+    fetchRunDetail,
+    pollWhileActive,
+    stopPolling,
+  };
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 5c02a8e8..a3c1ff70 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -381,11 +381,38 @@ const authenticatedRoutes = [
   {
     path: '/admin/notifications',
     name: 'admin-notifications',
-    component: () => import('../views/admin/NotificationsView.vue'),
+    redirect: { name: 'admin-diagnostics-notifications' },
     meta: {
       requiresAuth: true,
     },
   },
+  {
+    path: '/admin/diagnostics',
+    name: 'admin-diagnostics',
+    component: () => import('../views/admin/DiagnosticsView.vue'),
+    redirect: { name: 'admin-diagnostics-notifications' },
+    meta: {
+      requiresAuth: true,
+    },
+    children: [
+      {
+        path: 'notifications',
+        name: 'admin-diagnostics-notifications',
+        component: () => import('../views/admin/NotificationsView.vue'),
+        meta: {
+          requiresAuth: true,
+        },
+      },
+      {
+        path: 'ai-suggestions',
+        name: 'admin-diagnostics-ai-suggestions',
+        component: () => import('../views/admin/AiDiagnosticsView.vue'),
+        meta: {
+          requiresAuth: true,
+        },
+      },
+    ],
+  },
   {
     path: '/admin/risks',
     name: 'admin-risks',
diff --git a/src/views/LeftSideNav.vue b/src/views/LeftSideNav.vue
index 0685b532..4532dc3a 100644
--- a/src/views/LeftSideNav.vue
+++ b/src/views/LeftSideNav.vue
@@ -141,9 +141,9 @@ const links = ref<Array<NavigationItem>>([
         title: 'Risk Templates',
       },
       {
-        name: 'admin-notifications',
-        title: 'Notifications',
-        abbr: 'NTF',
+        name: 'admin-diagnostics',
+        title: 'Diagnostics',
+        abbr: 'DIAG',
       },
       {
         name: 'admin-import',
diff --git a/src/views/__tests__/AiDiagnosticsView.spec.ts b/src/views/__tests__/AiDiagnosticsView.spec.ts
new file mode 100644
index 00000000..01f63bf9
--- /dev/null
+++ b/src/views/__tests__/AiDiagnosticsView.spec.ts
@@ -0,0 +1,430 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { nextTick } from 'vue';
+import {
+  buildAiDiagnosticsCacheHitChartData,
+  buildAiDiagnosticsTokenChartData,
+  type AiDiagnosticsRun,
+  type AiDiagnosticsRunDetail,
+  type AiDiagnosticsSummary,
+} from '@/views/admin/partials/ai-diagnostics';
+
+const state = vi.hoisted(() => {
+  function testRef<T>(value: T) {
+    return { __v_isRef: true, value };
+  }
+
+  return {
+    aiEnabled: true,
+    aiFetched: true,
+    fetchConfig: vi.fn(),
+    summary: testRef<AiDiagnosticsSummary | null>(null),
+    runs: testRef<AiDiagnosticsRun[]>([]),
+    detail: testRef<AiDiagnosticsRunDetail | null>(null),
+    nextCursor: testRef<string | null>(null),
+    summaryLoading: testRef(false),
+    runsLoading: testRef(false),
+    paginationLoading: testRef(false),
+    detailLoading: testRef(false),
+    summaryError: testRef<string | null>(null),
+    runsError: testRef<string | null>(null),
+    paginationError: testRef<string | null>(null),
+    detailError: testRef<string | null>(null),
+    refreshSummary: vi.fn(),
+    refreshRuns: vi.fn(),
+    loadMoreRuns: vi.fn(),
+    fetchRunDetail: vi.fn(),
+    pollWhileActive: vi.fn(),
+    stopPolling: vi.fn(),
+  };
+});
+
+vi.mock('@/stores/ai-config', () => ({
+  useAiConfigStore: () => ({
+    get dashboardSuggestionsEnabled() {
+      return state.aiEnabled;
+    },
+    get dashboardSuggestionsConfigFetched() {
+      return state.aiFetched;
+    },
+    fetchDashboardSuggestionsConfig: state.fetchConfig,
+  }),
+}));
+
+vi.mock('@/composables/useAiDiagnostics', () => ({
+  useAiDiagnostics: () => ({
+    summary: state.summary,
+    runs: state.runs,
+    nextCursor: state.nextCursor,
+    selectedRunDetail: state.detail,
+    summaryLoading: state.summaryLoading,
+    runsLoading: state.runsLoading,
+    paginationLoading: state.paginationLoading,
+    runDetailLoading: state.detailLoading,
+    summaryError: state.summaryError,
+    runsError: state.runsError,
+    paginationError: state.paginationError,
+    runDetailError: state.detailError,
+    refreshSummary: state.refreshSummary,
+    refreshRuns: state.refreshRuns,
+    loadMoreRuns: state.loadMoreRuns,
+    fetchRunDetail: state.fetchRunDetail,
+    pollWhileActive: state.pollWhileActive,
+    stopPolling: state.stopPolling,
+  }),
+}));
+
+vi.mock('@/components/charts/LineChart.vue', () => ({
+  default: {
+    name: 'LineChart',
+    props: ['data', 'options'],
+    template: '<div class="line-chart">{{ data.datasets.length }}</div>',
+  },
+}));
+
+import AiDiagnosticsView from '../admin/AiDiagnosticsView.vue';
+
+function mountView() {
+  return mount(AiDiagnosticsView, {
+    global: {
+      stubs: {
+        PageCard: { template: '<section><slot /></section>' },
+        Message: { template: '<div><slot /></div>' },
+        RouterLink: {
+          props: ['to'],
+          template: '<a :data-to="JSON.stringify(to)"><slot /></a>',
+        },
+        Drawer: {
+          props: ['visible', 'header'],
+          emits: ['update:visible'],
+          template: '<aside v-if="visible"><slot /></aside>',
+        },
+        SecondaryButton: {
+          emits: ['click'],
+          props: ['disabled', 'type'],
+          template:
+            '<button :type="type || \'button\'" :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
+        },
+        Tabs: { template: '<div><slot /></div>' },
+        TabList: { template: '<div><slot /></div>' },
+        Tab: { template: '<button><slot /></button>' },
+        TabPanels: { template: '<div><slot /></div>' },
+        TabPanel: { template: '<section><slot /></section>' },
+      },
+    },
+  });
+}
+
+describe('AiDiagnosticsView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    state.aiEnabled = true;
+    state.aiFetched = true;
+    state.fetchConfig.mockResolvedValue(true);
+    state.summary.value = {
+      enabled: true,
+      config: {
+        model: 'gpt-5.2',
+        promptVersion: 'v4',
+        maxControlsPerChunk: 5,
+        maxLabelSetsPerChunk: 4,
+        maxCallsPerRun: 25,
+        queueWorkers: 2,
+      },
+      totals: {
+        runs: 3,
+        runsByStatus: {
+          pending: 0,
+          running: 1,
+          completed: 1,
+          failed: 1,
+        },
+        cellsCompleted: 8,
+        cellsFailed: 2,
+        inputTokens: 12000,
+        outputTokens: 1800,
+        cacheReadInputTokens: 4000,
+        cacheCreationInputTokens: 3000,
+        cacheHitRatio: 0.42,
+        mappingsReturned: 18,
+        mappingsRejected: 3,
+        suggestionsAccepted: 6,
+        suggestionsRejected: 2,
+        suggestionsPending: 4,
+        rateLimitedTotal: 5,
+      },
+      queue: {
+        name: 'suggestion',
+        available: 2,
+        running: 1,
+        retryable: 0,
+        scheduled: 3,
+        oldestAvailableAt: '2026-06-16T12:00:00Z',
+      },
+      checks: [
+        {
+          id: 'cache_engaging',
+          status: 'warn',
+          message:
+            "caching never wrote - likely under the model's 4,096-token minimum",
+          recommendedActions: ['Increase chunk sizes.'],
+        },
+        {
+          id: 'rate_limit_pressure',
+          status: 'fail',
+          message: 'Rate limits are slowing runs.',
+          recommendedActions: ['Lower queue workers.'],
+        },
+        {
+          id: 'queue_available',
+          status: 'pass',
+          message: 'Suggestion queue is healthy.',
+        },
+      ],
+    };
+    state.runs.value = [
+      {
+        id: 'run-1',
+        sspId: 'ssp-1',
+        sspName: 'Payments SSP',
+        status: 'completed',
+        model: 'gpt-5.2',
+        promptVersion: 'v4',
+        plannedCalls: 4,
+        completedCells: 4,
+        failedCells: 0,
+        inputTokens: 1000,
+        outputTokens: 200,
+        cacheReadInputTokens: 500,
+        cacheCreationInputTokens: 100,
+        cacheHitRatio: 0.5,
+        mappingsReturned: 8,
+        mappingsRejected: 1,
+        rateLimitedTotal: 2,
+        startedAt: '2026-06-16T12:00:00Z',
+        completedAt: '2026-06-16T12:01:00Z',
+        durationMs: 60000,
+        triggeredBy: { id: 'u-1', name: 'Ada' },
+      },
+    ];
+    state.detail.value = null;
+    state.nextCursor.value = 'next-1';
+    state.summaryLoading.value = false;
+    state.runsLoading.value = false;
+    state.paginationLoading.value = false;
+    state.detailLoading.value = false;
+    state.summaryError.value = null;
+    state.runsError.value = null;
+    state.paginationError.value = null;
+    state.detailError.value = null;
+    state.fetchRunDetail.mockImplementation(async () => {
+      state.detail.value = {
+        ...state.runs.value[0],
+        scope: {
+          controlKeys: ['AC-1'],
+          labelSetHashes: ['hash-1'],
+          labelSets: [{ _policy: 'secret_scanning', repository: 'api' }],
+        },
+        cells: [
+          {
+            cellIndex: 0,
+            status: 'completed',
+            controlKeys: ['AC-1'],
+            labelSetHashes: ['hash-1'],
+            inputTokens: 600,
+            outputTokens: 100,
+            cacheReadInputTokens: 300,
+            cacheCreationInputTokens: 50,
+            rateLimitedCount: 0,
+            mappingsReturned: 4,
+            mappingsRejected: 0,
+            completedAt: '2026-06-16T12:00:30Z',
+          },
+          {
+            cellIndex: 1,
+            status: 'failed',
+            controlKeys: ['AC-2'],
+            labelSetHashes: ['hash-2'],
+            inputTokens: 400,
+            outputTokens: 0,
+            cacheReadInputTokens: 200,
+            cacheCreationInputTokens: 50,
+            rateLimitedCount: 1,
+            mappingsReturned: 0,
+            mappingsRejected: 1,
+            error: 'model timeout',
+          },
+        ],
+        events: [
+          {
+            id: 'evt-1',
+            action: 'run_started',
+            actor: 'Ada',
+            message: 'Run started.',
+            createdAt: '2026-06-16T12:00:00Z',
+          },
+        ],
+      };
+      return state.detail.value;
+    });
+  });
+
+  it('renders the disabled message without loading diagnostics when AI is off', async () => {
+    state.aiEnabled = false;
+    state.aiFetched = false;
+    state.fetchConfig.mockImplementation(async () => {
+      state.aiFetched = true;
+      return false;
+    });
+
+    const wrapper = mountView();
+    await flushPromises();
+    await wrapper.vm.$forceUpdate();
+    await nextTick();
+
+    expect(wrapper.text()).toContain(
+      'AI is not configured, so AI suggestions diagnostics are unavailable.',
+    );
+    expect(state.refreshSummary).not.toHaveBeenCalled();
+    expect(state.refreshRuns).not.toHaveBeenCalled();
+  });
+
+  it('renders summary totals, checks, and the full cache warning', async () => {
+    const wrapper = mountView();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('3');
+    expect(wrapper.text()).toContain('42%');
+    expect(wrapper.text()).toContain('12,000');
+    expect(wrapper.text()).toContain(
+      "caching never wrote - likely under the model's 4,096-token minimum",
+    );
+    expect(wrapper.text()).toContain('Increase chunk sizes.');
+    expect(wrapper.text()).toContain('Rate limits are slowing runs.');
+  });
+
+  it('passes filters and cursor pagination params through the composable', async () => {
+    const wrapper = mountView();
+    await flushPromises();
+
+    const selects = wrapper.findAll('select');
+    await selects[0].setValue('failed');
+    await wrapper
+      .find('[data-testid="ai-diagnostics-ssp-filter"]')
+      .setValue('ssp-1');
+    await selects[1].setValue('25');
+
+    expect(state.refreshRuns).toHaveBeenLastCalledWith({
+      status: 'failed',
+      sspId: 'ssp-1',
+      limit: 25,
+    });
+
+    await wrapper
+      .findAll('button')
+      .find((button) => button.text() === 'Load More')
+      ?.trigger('click');
+
+    expect(state.loadMoreRuns).toHaveBeenCalledWith({
+      status: 'failed',
+      sspId: 'ssp-1',
+      limit: 25,
+    });
+  });
+
+  it('disables Load More while a pagination request is running', async () => {
+    state.paginationLoading.value = true;
+
+    const wrapper = mountView();
+    await flushPromises();
+
+    const loadMoreButton = wrapper
+      .findAll('button')
+      .find((button) => button.text() === 'Load More');
+
+    expect(loadMoreButton?.attributes('disabled')).toBeDefined();
+  });
+
+  it('opens the run drawer with cells, failed errors, scope, and events', async () => {
+    const wrapper = mountView();
+    await flushPromises();
+
+    await wrapper
+      .findAll('tbody tr')
+      .find((row) => row.text().includes('Payments SSP'))
+      ?.trigger('click');
+    await flushPromises();
+
+    expect(state.fetchRunDetail).toHaveBeenCalledWith('run-1');
+    expect(wrapper.text()).toContain('Cell 1: model timeout');
+    expect(wrapper.text()).toContain('_policy=secret_scanning');
+    expect(wrapper.text()).toContain('AC-1');
+    expect(wrapper.text()).toContain('run_started');
+    expect(wrapper.text()).toContain('Run started.');
+  });
+});
+
+describe('AI diagnostics chart builders', () => {
+  it('buckets token and cache-hit series by run start day', () => {
+    const runs: AiDiagnosticsRun[] = [
+      {
+        id: 'run-1',
+        status: 'completed',
+        plannedCalls: 1,
+        completedCells: 1,
+        failedCells: 0,
+        inputTokens: 100,
+        outputTokens: 20,
+        cacheReadInputTokens: 40,
+        cacheCreationInputTokens: 10,
+        cacheHitRatio: 0.4,
+        mappingsReturned: 1,
+        mappingsRejected: 0,
+        rateLimitedTotal: 0,
+        startedAt: '2026-06-15T10:00:00Z',
+      },
+      {
+        id: 'run-2',
+        status: 'completed',
+        plannedCalls: 1,
+        completedCells: 1,
+        failedCells: 0,
+        inputTokens: 200,
+        outputTokens: 30,
+        cacheReadInputTokens: 80,
+        cacheCreationInputTokens: 20,
+        cacheHitRatio: 0.6,
+        mappingsReturned: 1,
+        mappingsRejected: 0,
+        rateLimitedTotal: 0,
+        startedAt: '2026-06-15T11:00:00Z',
+      },
+      {
+        id: 'run-3',
+        status: 'failed',
+        plannedCalls: 1,
+        completedCells: 0,
+        failedCells: 1,
+        inputTokens: 50,
+        outputTokens: 0,
+        cacheReadInputTokens: 10,
+        cacheCreationInputTokens: 5,
+        cacheHitRatio: 0.2,
+        mappingsReturned: 0,
+        mappingsRejected: 1,
+        rateLimitedTotal: 1,
+        startedAt: '2026-06-16T10:00:00Z',
+      },
+    ];
+
+    const tokenData = buildAiDiagnosticsTokenChartData(runs);
+    expect(tokenData.labels).toEqual(['2026-06-15', '2026-06-16']);
+    expect(tokenData.datasets[0].data).toEqual([300, 50]);
+    expect(tokenData.datasets[1].data).toEqual([120, 10]);
+    expect(tokenData.datasets[2].data).toEqual([30, 5]);
+
+    const cacheData = buildAiDiagnosticsCacheHitChartData(runs);
+    expect(cacheData.labels).toEqual(['2026-06-15', '2026-06-16']);
+    expect(cacheData.datasets[0].data).toEqual([50, 20]);
+  });
+});
diff --git a/src/views/__tests__/DiagnosticsRouting.spec.ts b/src/views/__tests__/DiagnosticsRouting.spec.ts
new file mode 100644
index 00000000..11471506
--- /dev/null
+++ b/src/views/__tests__/DiagnosticsRouting.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import router from '@/router';
+
+describe('diagnostics routes', () => {
+  it('configures /admin/notifications as a compatibility redirect', () => {
+    const route = router
+      .getRoutes()
+      .find(
+        (route) =>
+          route.path === '/admin/notifications' ||
+          route.name === 'admin-notifications',
+      );
+
+    expect(route?.redirect).toEqual({
+      name: 'admin-diagnostics-notifications',
+    });
+  });
+});
diff --git a/src/views/__tests__/DiagnosticsView.spec.ts b/src/views/__tests__/DiagnosticsView.spec.ts
new file mode 100644
index 00000000..be811921
--- /dev/null
+++ b/src/views/__tests__/DiagnosticsView.spec.ts
@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const state = vi.hoisted(() => ({
+  aiEnabled: false,
+  aiFetched: true,
+  fetchConfig: vi.fn(),
+  routeName: 'admin-diagnostics-notifications',
+}));
+
+vi.mock('vue-router', () => ({
+  RouterLink: {
+    props: ['to'],
+    template: '<a :data-to="JSON.stringify(to)"><slot /></a>',
+  },
+  RouterView: { template: '<main />' },
+  useRoute: () => ({
+    get name() {
+      return state.routeName;
+    },
+  }),
+}));
+
+vi.mock('@/stores/ai-config', () => ({
+  useAiConfigStore: () => ({
+    get dashboardSuggestionsEnabled() {
+      return state.aiEnabled;
+    },
+    get dashboardSuggestionsConfigFetched() {
+      return state.aiFetched;
+    },
+    fetchDashboardSuggestionsConfig: state.fetchConfig,
+  }),
+}));
+
+import DiagnosticsView from '../admin/DiagnosticsView.vue';
+
+function mountView() {
+  return mount(DiagnosticsView, {
+    global: {
+      stubs: {
+        PageHeader: { template: '<h1><slot /></h1>' },
+        PageSubHeader: { template: '<p><slot /></p>' },
+        Message: { template: '<div><slot /></div>' },
+      },
+    },
+  });
+}
+
+describe('DiagnosticsView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    state.aiEnabled = false;
+    state.aiFetched = true;
+    state.fetchConfig.mockResolvedValue(false);
+  });
+
+  it('hides the AI Suggestions tab when the feature flag is disabled', () => {
+    const wrapper = mountView();
+
+    expect(wrapper.text()).toContain('Diagnostics');
+    expect(wrapper.text()).toContain('Notifications');
+    expect(wrapper.text()).not.toContain('AI Suggestions');
+  });
+
+  it('shows the AI Suggestions tab when the feature flag is enabled', () => {
+    state.aiEnabled = true;
+
+    const wrapper = mountView();
+
+    expect(wrapper.text()).toContain('AI Suggestions');
+  });
+});
diff --git a/src/views/__tests__/LeftSideNav.spec.ts b/src/views/__tests__/LeftSideNav.spec.ts
index 038cabb1..63ebe845 100644
--- a/src/views/__tests__/LeftSideNav.spec.ts
+++ b/src/views/__tests__/LeftSideNav.spec.ts
@@ -45,7 +45,7 @@ describe('LeftSideNav', () => {
 
     const systemUsersIndex = linkTexts.indexOf('System Users');
     const agentsIndex = linkTexts.indexOf('Agents');
-    const notificationsIndex = linkTexts.indexOf('Notifications');
+    const diagnosticsIndex = linkTexts.indexOf('Diagnostics');
     const risksIndex = linkTexts.indexOf('Risks');
     const subjectTemplatesIndex = linkTexts.indexOf('Subject Templates');
     const riskTemplatesIndex = linkTexts.indexOf('Risk Templates');
@@ -54,7 +54,7 @@ describe('LeftSideNav', () => {
     for (const index of [
       systemUsersIndex,
       agentsIndex,
-      notificationsIndex,
+      diagnosticsIndex,
       risksIndex,
       subjectTemplatesIndex,
       riskTemplatesIndex,
@@ -67,8 +67,8 @@ describe('LeftSideNav', () => {
     expect(risksIndex).toBeGreaterThan(agentsIndex);
     expect(subjectTemplatesIndex).toBeGreaterThan(risksIndex);
     expect(riskTemplatesIndex).toBeGreaterThan(subjectTemplatesIndex);
-    expect(notificationsIndex).toBeGreaterThan(riskTemplatesIndex);
-    expect(importIndex).toBeGreaterThan(notificationsIndex);
+    expect(diagnosticsIndex).toBeGreaterThan(riskTemplatesIndex);
+    expect(importIndex).toBeGreaterThan(diagnosticsIndex);
   });
 
   it('exposes import only from the admin navigation category', () => {
diff --git a/src/views/admin/AiDiagnosticsView.vue b/src/views/admin/AiDiagnosticsView.vue
new file mode 100644
index 00000000..41eacdac
--- /dev/null
+++ b/src/views/admin/AiDiagnosticsView.vue
@@ -0,0 +1,968 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import type { ChartOptions } from 'chart.js';
+import { RouterLink } from 'vue-router';
+import PageCard from '@/components/PageCard.vue';
+import LineChart from '@/components/charts/LineChart.vue';
+import Drawer from '@/volt/Drawer.vue';
+import Message from '@/volt/Message.vue';
+import SecondaryButton from '@/volt/SecondaryButton.vue';
+import Tabs from '@/volt/Tabs.vue';
+import Tab from '@/volt/Tab.vue';
+import TabList from '@/volt/TabList.vue';
+import TabPanel from '@/volt/TabPanel.vue';
+import TabPanels from '@/volt/TabPanels.vue';
+import { useAiConfigStore } from '@/stores/ai-config';
+import { useAiDiagnostics } from '@/composables/useAiDiagnostics';
+import {
+  buildAiDiagnosticsCacheHitChartData,
+  buildAiDiagnosticsTokenChartData,
+  type AiDiagnosticsCell,
+  type AiDiagnosticsCheckStatus,
+  type AiDiagnosticsRun,
+  type AiDiagnosticsRunsFilters,
+  type AiDiagnosticsStatus,
+} from '@/views/admin/partials/ai-diagnostics';
+
+const aiConfig = useAiConfigStore();
+const statusFilter = ref('');
+const sspFilter = ref('');
+const limitFilter = ref(50);
+const autoRefresh = ref(false);
+const hasCompletedInitialConfigLoad = ref(false);
+const showRunDrawer = ref(false);
+const activeTab = ref<'overview' | 'runs'>('overview');
+
+const {
+  summary,
+  runs,
+  nextCursor,
+  selectedRunDetail,
+  summaryLoading,
+  runsLoading,
+  paginationLoading,
+  runDetailLoading,
+  summaryError,
+  runsError,
+  paginationError,
+  runDetailError,
+  refreshSummary,
+  refreshRuns,
+  loadMoreRuns,
+  fetchRunDetail,
+  pollWhileActive,
+  stopPolling,
+} = useAiDiagnostics();
+
+const statusOptions: Array<{ label: string; value: string }> = [
+  { label: 'All statuses', value: '' },
+  { label: 'Pending', value: 'pending' },
+  { label: 'Running', value: 'running' },
+  { label: 'Completed', value: 'completed' },
+  { label: 'Failed', value: 'failed' },
+];
+
+const limitOptions = [25, 50, 100, 200];
+
+const chartOptions: ChartOptions<'line'> = {
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: true,
+      position: 'bottom',
+    },
+  },
+  scales: {
+    x: {
+      ticks: {
+        maxTicksLimit: 8,
+      },
+      grid: {
+        display: false,
+      },
+    },
+    y: {
+      beginAtZero: true,
+      ticks: {
+        precision: 0,
+      },
+    },
+  },
+};
+
+const cacheChartOptions: ChartOptions<'line'> = {
+  ...chartOptions,
+  scales: {
+    ...chartOptions.scales,
+    y: {
+      beginAtZero: true,
+      max: 100,
+      ticks: {
+        callback: (value) => `${value}%`,
+      },
+    },
+  },
+};
+
+const runsNewestFirst = computed(() =>
+  [...runs.value].sort((left, right) => {
+    const leftTime = Date.parse(left.startedAt ?? '');
+    const rightTime = Date.parse(right.startedAt ?? '');
+
+    if (Number.isNaN(leftTime) && Number.isNaN(rightTime)) return 0;
+    if (Number.isNaN(leftTime)) return 1;
+    if (Number.isNaN(rightTime)) return -1;
+    return rightTime - leftTime;
+  }),
+);
+
+const tokenChartData = computed(() =>
+  buildAiDiagnosticsTokenChartData(runsNewestFirst.value),
+);
+const cacheHitChartData = computed(() =>
+  buildAiDiagnosticsCacheHitChartData(runsNewestFirst.value),
+);
+
+const totalCells = computed(
+  () =>
+    (summary.value?.totals.cellsCompleted ?? 0) +
+    (summary.value?.totals.cellsFailed ?? 0),
+);
+const cellSuccessRate = computed(() => {
+  if (!totalCells.value) return 0;
+  return (summary.value?.totals.cellsCompleted ?? 0) / totalCells.value;
+});
+const failedCellsRate = computed(() => {
+  if (!totalCells.value) return 0;
+  return (summary.value?.totals.cellsFailed ?? 0) / totalCells.value;
+});
+
+const failedCells = computed(() =>
+  (selectedRunDetail.value?.cells ?? []).filter(
+    (cell) => cell.status === 'failed' || cell.error,
+  ),
+);
+
+function filters(): AiDiagnosticsRunsFilters {
+  return {
+    status: statusFilter.value || undefined,
+    sspId: sspFilter.value.trim() || undefined,
+    limit: limitFilter.value,
+  };
+}
+
+async function refreshAll() {
+  await Promise.all([refreshSummary(), refreshRuns(filters())]);
+}
+
+async function applyFilters() {
+  await refreshRuns(filters());
+}
+
+async function loadMore() {
+  await loadMoreRuns(filters());
+}
+
+async function openRunDetail(run: AiDiagnosticsRun) {
+  showRunDrawer.value = true;
+  await fetchRunDetail(run.id);
+}
+
+function toggleAutoRefresh() {
+  if (autoRefresh.value) {
+    pollWhileActive(refreshAll);
+  } else {
+    stopPolling();
+  }
+}
+
+onMounted(async () => {
+  await aiConfig.fetchDashboardSuggestionsConfig();
+  hasCompletedInitialConfigLoad.value = true;
+
+  if (!aiConfig.dashboardSuggestionsEnabled) {
+    return;
+  }
+
+  await refreshAll();
+});
+
+watch(
+  () => aiConfig.dashboardSuggestionsEnabled,
+  async (enabled) => {
+    if (enabled) {
+      if (!hasCompletedInitialConfigLoad.value) {
+        return;
+      }
+
+      await refreshAll();
+      return;
+    }
+
+    stopPolling();
+  },
+);
+
+function formatNumber(value?: number | null): string {
+  return new Intl.NumberFormat().format(value ?? 0);
+}
+
+function formatPercent(value?: number | null): string {
+  const numeric = value ?? 0;
+  const percent = numeric > 1 ? numeric : numeric * 100;
+  return `${Math.round(percent)}%`;
+}
+
+function formatDate(value?: string | null): string {
+  if (!value) return 'Never';
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date);
+}
+
+function formatDuration(value?: number | null): string {
+  if (!value) return 'N/A';
+
+  if (value < 1000) return `${value} ms`;
+
+  const seconds = Math.round(value / 1000);
+  if (seconds < 60) return `${seconds}s`;
+
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+
+function formatLabel(value?: string | null): string {
+  if (!value) return 'N/A';
+
+  return value
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[-_]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .toLowerCase()
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+
+function statusClasses(status: AiDiagnosticsStatus | AiDiagnosticsCheckStatus) {
+  switch (status) {
+    case 'pass':
+    case 'completed':
+      return 'border-emerald-200 bg-emerald-100 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-900/40 dark:text-emerald-200';
+    case 'warn':
+    case 'pending':
+      return 'border-amber-200 bg-amber-100 text-amber-900 dark:border-amber-900/40 dark:bg-amber-900/40 dark:text-amber-200';
+    case 'fail':
+    case 'failed':
+      return 'border-red-200 bg-red-100 text-red-800 dark:border-red-900/40 dark:bg-red-900/40 dark:text-red-200';
+    case 'running':
+      return 'border-blue-200 bg-blue-100 text-blue-800 dark:border-blue-900/40 dark:bg-blue-900/40 dark:text-blue-200';
+    default:
+      return 'border-gray-300 bg-gray-100 text-gray-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300';
+  }
+}
+
+function cellStatusClasses(cell: AiDiagnosticsCell) {
+  return statusClasses(cell.status);
+}
+
+function formatScopeList(values?: string[]): string {
+  return values?.length ? values.join(', ') : 'All';
+}
+
+function formatLabelSet(labels: Record<string, string>): string {
+  const entries = Object.entries(labels);
+  if (entries.length === 0) return 'None';
+  return entries.map(([key, value]) => `${key}=${value}`).join(', ');
+}
+</script>
+
+<template>
+  <Message
+    v-if="!aiConfig.dashboardSuggestionsConfigFetched"
+    severity="info"
+    variant="outlined"
+  >
+    Loading dashboard suggestions configuration.
+  </Message>
+
+  <Message
+    v-else-if="!aiConfig.dashboardSuggestionsEnabled"
+    severity="info"
+    variant="outlined"
+  >
+    AI is not configured, so AI suggestions diagnostics are unavailable.
+  </Message>
+
+  <div v-else class="space-y-6">
+    <div class="flex flex-wrap items-start justify-between gap-3">
+      <div>
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+          AI Suggestions
+        </h2>
+        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          Run history, token usage, cache health, and suggestion outcomes.
+        </p>
+      </div>
+      <div class="flex flex-wrap items-center gap-3">
+        <label class="inline-flex items-center gap-2 text-sm">
+          <input
+            v-model="autoRefresh"
+            type="checkbox"
+            class="rounded border-ccf-300"
+            @change="toggleAutoRefresh"
+          />
+          Auto-refresh
+        </label>
+        <SecondaryButton
+          type="button"
+          :disabled="summaryLoading || runsLoading"
+          @click="refreshAll"
+        >
+          Refresh
+        </SecondaryButton>
+      </div>
+    </div>
+
+    <Message
+      v-if="summaryError || runsError"
+      severity="warn"
+      variant="outlined"
+    >
+      {{ summaryError || runsError }}
+    </Message>
+
+    <Tabs v-model:value="activeTab">
+      <TabList>
+        <Tab value="overview">Overview</Tab>
+        <Tab value="runs">Runs</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel value="overview">
+          <div class="space-y-5 pt-4">
+            <div
+              v-if="summaryLoading && !summary"
+              class="rounded-lg border border-ccf-300 bg-white p-4 text-sm text-gray-600 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-400"
+            >
+              Loading AI diagnostics summary...
+            </div>
+
+            <template v-if="summary">
+              <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+                <PageCard>
+                  <p class="text-sm text-gray-500">Runs</p>
+                  <p class="mt-2 text-2xl font-semibold">
+                    {{ formatNumber(summary.totals.runs) }}
+                  </p>
+                  <p class="mt-2 text-xs text-gray-500">
+                    Completed
+                    {{ formatNumber(summary.totals.runsByStatus.completed) }}
+                    · Failed
+                    {{ formatNumber(summary.totals.runsByStatus.failed) }}
+                    · Running
+                    {{ formatNumber(summary.totals.runsByStatus.running) }}
+                  </p>
+                </PageCard>
+                <PageCard>
+                  <p class="text-sm text-gray-500">Cell success</p>
+                  <p class="mt-2 text-2xl font-semibold">
+                    {{ formatPercent(cellSuccessRate) }}
+                  </p>
+                  <p class="mt-2 text-xs text-gray-500">
+                    {{ formatNumber(summary.totals.cellsCompleted) }} complete ·
+                    <span class="text-red-700 dark:text-red-300">
+                      {{ formatPercent(failedCellsRate) }} failed
+                    </span>
+                  </p>
+                </PageCard>
+                <PageCard>
+                  <p class="text-sm text-gray-500">Tokens</p>
+                  <p class="mt-2 text-2xl font-semibold">
+                    {{ formatNumber(summary.totals.inputTokens) }} /
+                    {{ formatNumber(summary.totals.outputTokens) }}
+                  </p>
+                  <p class="mt-2 text-xs text-gray-500">
+                    Input / output tokens
+                  </p>
+                </PageCard>
+                <PageCard>
+                  <p class="text-sm text-gray-500">Cache hit ratio</p>
+                  <p class="mt-2 text-2xl font-semibold">
+                    {{ formatPercent(summary.totals.cacheHitRatio) }}
+                  </p>
+                  <p class="mt-2 text-xs text-gray-500">
+                    Read
+                    {{ formatNumber(summary.totals.cacheReadInputTokens) }} ·
+                    Created
+                    {{ formatNumber(summary.totals.cacheCreationInputTokens) }}
+                  </p>
+                </PageCard>
+                <PageCard>
+                  <p class="text-sm text-gray-500">Suggestions</p>
+                  <p class="mt-2 text-2xl font-semibold">
+                    {{ formatNumber(summary.totals.suggestionsAccepted) }}
+                  </p>
+                  <p class="mt-2 text-xs text-gray-500">
+                    Accepted ·
+                    {{ formatNumber(summary.totals.suggestionsRejected) }}
+                    rejected ·
+                    {{ formatNumber(summary.totals.suggestionsPending) }}
+                    pending
+                  </p>
+                </PageCard>
+                <PageCard>
+                  <p class="text-sm text-gray-500">Rate limited</p>
+                  <p class="mt-2 text-2xl font-semibold">
+                    {{ formatNumber(summary.totals.rateLimitedTotal) }}
+                  </p>
+                  <p class="mt-2 text-xs text-gray-500">
+                    Total rate-limit retries
+                  </p>
+                </PageCard>
+                <PageCard>
+                  <p class="text-sm text-gray-500">Mappings</p>
+                  <p class="mt-2 text-2xl font-semibold">
+                    {{ formatNumber(summary.totals.mappingsReturned) }}
+                  </p>
+                  <p class="mt-2 text-xs text-gray-500">
+                    {{ formatNumber(summary.totals.mappingsRejected) }}
+                    rejected
+                  </p>
+                </PageCard>
+              </div>
+
+              <PageCard>
+                <h3
+                  class="text-base font-semibold text-gray-900 dark:text-white"
+                >
+                  Health Checks
+                </h3>
+                <div class="mt-3 divide-y divide-ccf-200 dark:divide-slate-800">
+                  <div
+                    v-for="check in summary.checks"
+                    :key="check.id"
+                    class="py-3"
+                  >
+                    <div class="flex flex-wrap items-center gap-2">
+                      <span
+                        class="inline-flex rounded-md border px-2 py-1 text-xs font-semibold"
+                        :class="statusClasses(check.status)"
+                      >
+                        {{ formatLabel(check.status) }}
+                      </span>
+                      <span class="font-medium text-gray-900 dark:text-white">
+                        {{ formatLabel(check.id) }}
+                      </span>
+                    </div>
+                    <p
+                      class="mt-2 whitespace-normal break-words text-sm text-gray-600 dark:text-gray-400"
+                    >
+                      {{ check.message }}
+                    </p>
+                    <ul
+                      v-if="check.recommendedActions?.length"
+                      class="mt-2 list-disc space-y-1 pl-5 text-sm text-gray-600 dark:text-gray-400"
+                    >
+                      <li
+                        v-for="action in check.recommendedActions"
+                        :key="action"
+                      >
+                        {{ action }}
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </PageCard>
+
+              <PageCard>
+                <h3
+                  class="text-base font-semibold text-gray-900 dark:text-white"
+                >
+                  Configuration
+                </h3>
+                <div class="mt-3 flex flex-wrap gap-2 text-sm">
+                  <span class="rounded-md border border-ccf-300 px-2.5 py-1">
+                    Model: {{ summary.config.model ?? 'N/A' }}
+                  </span>
+                  <span class="rounded-md border border-ccf-300 px-2.5 py-1">
+                    Prompt: {{ summary.config.promptVersion ?? 'N/A' }}
+                  </span>
+                  <span class="rounded-md border border-ccf-300 px-2.5 py-1">
+                    Controls/chunk:
+                    {{ summary.config.maxControlsPerChunk ?? 'N/A' }}
+                  </span>
+                  <span class="rounded-md border border-ccf-300 px-2.5 py-1">
+                    Label sets/chunk:
+                    {{ summary.config.maxLabelSetsPerChunk ?? 'N/A' }}
+                  </span>
+                  <span class="rounded-md border border-ccf-300 px-2.5 py-1">
+                    Max calls/run:
+                    {{ summary.config.maxCallsPerRun ?? 'N/A' }}
+                  </span>
+                  <span class="rounded-md border border-ccf-300 px-2.5 py-1">
+                    Queue workers: {{ summary.config.queueWorkers ?? 'N/A' }}
+                  </span>
+                </div>
+              </PageCard>
+
+              <PageCard v-if="summary.queue">
+                <div class="flex flex-wrap items-start justify-between gap-3">
+                  <div>
+                    <h3
+                      class="text-base font-semibold text-gray-900 dark:text-white"
+                    >
+                      Suggestion Queue
+                    </h3>
+                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                      {{ summary.queue.name }} · oldest available
+                      {{ formatDate(summary.queue.oldestAvailableAt) }}
+                    </p>
+                  </div>
+                  <RouterLink
+                    :to="{
+                      name: 'admin-diagnostics-notifications',
+                    }"
+                    class="text-sm font-medium text-primary hover:underline"
+                  >
+                    Open Notifications
+                  </RouterLink>
+                </div>
+                <div class="mt-3 grid gap-3 text-sm sm:grid-cols-4">
+                  <div class="rounded-md bg-slate-50 p-3 dark:bg-slate-800/60">
+                    Available:
+                    {{ formatNumber(summary.queue.available) }}
+                  </div>
+                  <div class="rounded-md bg-slate-50 p-3 dark:bg-slate-800/60">
+                    Running: {{ formatNumber(summary.queue.running) }}
+                  </div>
+                  <div class="rounded-md bg-slate-50 p-3 dark:bg-slate-800/60">
+                    Retryable: {{ formatNumber(summary.queue.retryable) }}
+                  </div>
+                  <div class="rounded-md bg-slate-50 p-3 dark:bg-slate-800/60">
+                    Scheduled: {{ formatNumber(summary.queue.scheduled) }}
+                  </div>
+                </div>
+              </PageCard>
+
+              <div class="grid gap-4 xl:grid-cols-2">
+                <PageCard>
+                  <h3
+                    class="text-base font-semibold text-gray-900 dark:text-white"
+                  >
+                    Token Usage
+                  </h3>
+                  <div v-if="tokenChartData.labels?.length" class="mt-4 h-64">
+                    <LineChart :data="tokenChartData" :options="chartOptions" />
+                  </div>
+                  <p v-else class="mt-4 text-sm text-gray-600">
+                    No run token data is loaded yet.
+                  </p>
+                </PageCard>
+                <PageCard>
+                  <h3
+                    class="text-base font-semibold text-gray-900 dark:text-white"
+                  >
+                    Cache Hit Trend
+                  </h3>
+                  <div
+                    v-if="cacheHitChartData.labels?.length"
+                    class="mt-4 h-64"
+                  >
+                    <LineChart
+                      :data="cacheHitChartData"
+                      :options="cacheChartOptions"
+                    />
+                  </div>
+                  <p v-else class="mt-4 text-sm text-gray-600">
+                    No run cache data is loaded yet.
+                  </p>
+                </PageCard>
+              </div>
+            </template>
+          </div>
+        </TabPanel>
+
+        <TabPanel value="runs">
+          <div class="space-y-5 pt-4">
+            <PageCard>
+              <div class="grid gap-3 md:grid-cols-4">
+                <label class="space-y-1 text-sm">
+                  <span class="font-medium text-gray-700 dark:text-slate-300">
+                    Status
+                  </span>
+                  <select
+                    v-model="statusFilter"
+                    class="w-full rounded-md border border-ccf-300 bg-white px-3 py-2 text-gray-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300"
+                    @change="applyFilters"
+                  >
+                    <option
+                      v-for="option in statusOptions"
+                      :key="option.value"
+                      :value="option.value"
+                    >
+                      {{ option.label }}
+                    </option>
+                  </select>
+                </label>
+                <label class="space-y-1 text-sm">
+                  <span class="font-medium text-gray-700 dark:text-slate-300">
+                    SSP ID
+                  </span>
+                  <input
+                    v-model="sspFilter"
+                    type="search"
+                    data-testid="ai-diagnostics-ssp-filter"
+                    class="w-full rounded-md border border-ccf-300 bg-white px-3 py-2 text-gray-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300"
+                    placeholder="All SSPs"
+                    @change="applyFilters"
+                  />
+                </label>
+                <label class="space-y-1 text-sm">
+                  <span class="font-medium text-gray-700 dark:text-slate-300">
+                    Limit
+                  </span>
+                  <select
+                    v-model.number="limitFilter"
+                    class="w-full rounded-md border border-ccf-300 bg-white px-3 py-2 text-gray-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300"
+                    @change="applyFilters"
+                  >
+                    <option
+                      v-for="option in limitOptions"
+                      :key="option"
+                      :value="option"
+                    >
+                      {{ option }}
+                    </option>
+                  </select>
+                </label>
+              </div>
+            </PageCard>
+
+            <div
+              v-if="runsLoading && !runs.length"
+              class="rounded-lg border border-ccf-300 bg-white p-4 text-sm text-gray-600 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-400"
+            >
+              Loading AI suggestion runs...
+            </div>
+
+            <PageCard v-if="!runsError && (!runsLoading || runs.length)">
+              <div class="overflow-x-auto">
+                <table class="min-w-full text-left text-sm">
+                  <thead
+                    class="text-xs uppercase text-gray-500 dark:text-slate-400"
+                  >
+                    <tr>
+                      <th class="px-3 py-2">Started</th>
+                      <th class="px-3 py-2">SSP</th>
+                      <th class="px-3 py-2">Status</th>
+                      <th class="px-3 py-2">Cells</th>
+                      <th class="px-3 py-2">Input/Output</th>
+                      <th class="px-3 py-2">Cache hit %</th>
+                      <th class="px-3 py-2">Rate-limited</th>
+                      <th class="px-3 py-2">Model</th>
+                      <th class="px-3 py-2">Duration</th>
+                      <th class="px-3 py-2">Triggered by</th>
+                    </tr>
+                  </thead>
+                  <tbody class="divide-y divide-ccf-200 dark:divide-slate-800">
+                    <tr
+                      v-for="run in runsNewestFirst"
+                      :key="run.id"
+                      class="cursor-pointer align-top hover:bg-ccf-100 dark:hover:bg-slate-800"
+                      role="button"
+                      tabindex="0"
+                      @click="openRunDetail(run)"
+                      @keydown.enter="openRunDetail(run)"
+                      @keydown.space.prevent="openRunDetail(run)"
+                    >
+                      <td class="px-3 py-2">{{ formatDate(run.startedAt) }}</td>
+                      <td class="px-3 py-2">
+                        {{ run.sspName || run.sspId || 'N/A' }}
+                      </td>
+                      <td class="px-3 py-2">
+                        <span
+                          class="inline-flex rounded-md border px-2 py-1 text-xs font-semibold"
+                          :class="statusClasses(run.status)"
+                        >
+                          {{ formatLabel(run.status) }}
+                        </span>
+                      </td>
+                      <td class="px-3 py-2">
+                        {{ formatNumber(run.completedCells) }}/{{
+                          formatNumber(run.plannedCalls)
+                        }}
+                        <span
+                          v-if="run.failedCells"
+                          class="text-red-700 dark:text-red-300"
+                        >
+                          ({{ formatNumber(run.failedCells) }} failed)
+                        </span>
+                      </td>
+                      <td class="px-3 py-2">
+                        {{ formatNumber(run.inputTokens) }} /
+                        {{ formatNumber(run.outputTokens) }}
+                      </td>
+                      <td class="px-3 py-2">
+                        {{ formatPercent(run.cacheHitRatio) }}
+                      </td>
+                      <td class="px-3 py-2">
+                        {{ formatNumber(run.rateLimitedTotal) }}
+                      </td>
+                      <td class="px-3 py-2">{{ run.model ?? 'N/A' }}</td>
+                      <td class="px-3 py-2">
+                        {{ formatDuration(run.durationMs) }}
+                      </td>
+                      <td class="px-3 py-2">
+                        {{ run.triggeredBy?.name ?? 'System' }}
+                      </td>
+                    </tr>
+                    <tr v-if="runsNewestFirst.length === 0">
+                      <td colspan="10" class="px-3 py-4 text-gray-600">
+                        No AI suggestion runs match the current filters.
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+
+              <div v-if="nextCursor" class="mt-4">
+                <SecondaryButton
+                  type="button"
+                  :disabled="runsLoading || paginationLoading"
+                  @click="loadMore"
+                >
+                  Load More
+                </SecondaryButton>
+              </div>
+              <div
+                v-if="paginationError"
+                class="mt-3 text-sm text-red-700 dark:text-red-300"
+              >
+                {{ paginationError }}
+              </div>
+            </PageCard>
+          </div>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+
+    <Drawer
+      v-model:visible="showRunDrawer"
+      position="right"
+      header="AI Suggestion Run"
+      class="w-screen! max-w-6xl!"
+    >
+      <div class="space-y-5">
+        <div
+          v-if="runDetailLoading"
+          class="rounded-lg border border-ccf-300 bg-white p-4 text-sm text-gray-600 dark:border-slate-700 dark:bg-slate-900 dark:text-gray-400"
+        >
+          Loading run details...
+        </div>
+
+        <Message v-if="runDetailError" severity="warn" variant="outlined">
+          {{ runDetailError }}
+        </Message>
+
+        <template v-if="selectedRunDetail && !runDetailLoading">
+          <div class="space-y-2">
+            <div class="flex flex-wrap items-center gap-2">
+              <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+                {{ selectedRunDetail.sspName || selectedRunDetail.id }}
+              </h3>
+              <span
+                class="inline-flex rounded-md border px-2 py-1 text-xs font-semibold"
+                :class="statusClasses(selectedRunDetail.status)"
+              >
+                {{ formatLabel(selectedRunDetail.status) }}
+              </span>
+            </div>
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+              {{ selectedRunDetail.model ?? 'N/A' }} · prompt
+              {{ selectedRunDetail.promptVersion ?? 'N/A' }} ·
+              {{ formatDuration(selectedRunDetail.durationMs) }}
+            </p>
+          </div>
+
+          <dl class="grid gap-3 text-sm sm:grid-cols-3">
+            <div class="rounded-md bg-slate-50 p-3 dark:bg-slate-800/60">
+              <dt class="font-medium text-gray-700 dark:text-slate-300">
+                Cells
+              </dt>
+              <dd>
+                {{ formatNumber(selectedRunDetail.completedCells) }}/{{
+                  formatNumber(selectedRunDetail.plannedCalls)
+                }}
+                complete ·
+                {{ formatNumber(selectedRunDetail.failedCells) }} failed
+              </dd>
+            </div>
+            <div class="rounded-md bg-slate-50 p-3 dark:bg-slate-800/60">
+              <dt class="font-medium text-gray-700 dark:text-slate-300">
+                Tokens
+              </dt>
+              <dd>
+                {{ formatNumber(selectedRunDetail.inputTokens) }} in /
+                {{ formatNumber(selectedRunDetail.outputTokens) }} out
+              </dd>
+            </div>
+            <div class="rounded-md bg-slate-50 p-3 dark:bg-slate-800/60">
+              <dt class="font-medium text-gray-700 dark:text-slate-300">
+                Cache
+              </dt>
+              <dd>
+                {{ formatPercent(selectedRunDetail.cacheHitRatio) }} hit ·
+                {{ formatNumber(selectedRunDetail.cacheReadInputTokens) }}
+                read
+              </dd>
+            </div>
+          </dl>
+
+          <PageCard>
+            <h4 class="text-base font-semibold text-gray-900 dark:text-white">
+              Scope
+            </h4>
+            <div class="mt-3 space-y-2 text-sm">
+              <p>
+                <span class="font-medium">Controls:</span>
+                {{ formatScopeList(selectedRunDetail.scope?.controlKeys) }}
+              </p>
+              <p>
+                <span class="font-medium">Label set hashes:</span>
+                {{ formatScopeList(selectedRunDetail.scope?.labelSetHashes) }}
+              </p>
+              <div v-if="selectedRunDetail.scope?.labelSets?.length">
+                <p class="font-medium">Label sets:</p>
+                <ul class="mt-1 list-disc space-y-1 pl-5">
+                  <li
+                    v-for="(labelSet, index) in selectedRunDetail.scope
+                      ?.labelSets"
+                    :key="index"
+                  >
+                    {{ formatLabelSet(labelSet) }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </PageCard>
+
+          <Message v-if="failedCells.length" severity="warn" variant="outlined">
+            <p class="font-semibold">Failed cells</p>
+            <ul class="mt-2 list-disc space-y-1 pl-5">
+              <li v-for="cell in failedCells" :key="cell.cellIndex">
+                Cell {{ cell.cellIndex }}:
+                {{ cell.error ?? 'Failed without an error message.' }}
+              </li>
+            </ul>
+          </Message>
+
+          <PageCard>
+            <h4 class="text-base font-semibold text-gray-900 dark:text-white">
+              Cells
+            </h4>
+            <div class="mt-3 overflow-x-auto">
+              <table class="min-w-full text-left text-sm">
+                <thead class="text-xs uppercase text-gray-500">
+                  <tr>
+                    <th class="px-3 py-2">Cell</th>
+                    <th class="px-3 py-2">Status</th>
+                    <th class="px-3 py-2">Controls</th>
+                    <th class="px-3 py-2">Label sets</th>
+                    <th class="px-3 py-2">Tokens</th>
+                    <th class="px-3 py-2">Cache</th>
+                    <th class="px-3 py-2">Rate limits</th>
+                    <th class="px-3 py-2">Mappings</th>
+                    <th class="px-3 py-2">Error</th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-ccf-200 dark:divide-slate-800">
+                  <tr
+                    v-for="cell in selectedRunDetail.cells"
+                    :key="cell.cellIndex"
+                  >
+                    <td class="px-3 py-2">{{ cell.cellIndex }}</td>
+                    <td class="px-3 py-2">
+                      <span
+                        class="inline-flex rounded-md border px-2 py-1 text-xs font-semibold"
+                        :class="cellStatusClasses(cell)"
+                      >
+                        {{ formatLabel(cell.status) }}
+                      </span>
+                    </td>
+                    <td class="px-3 py-2">
+                      {{ formatScopeList(cell.controlKeys) }}
+                    </td>
+                    <td class="px-3 py-2">
+                      {{ formatScopeList(cell.labelSetHashes) }}
+                    </td>
+                    <td class="px-3 py-2">
+                      {{ formatNumber(cell.inputTokens) }} /
+                      {{ formatNumber(cell.outputTokens) }}
+                    </td>
+                    <td class="px-3 py-2">
+                      {{ formatNumber(cell.cacheReadInputTokens) }} read /
+                      {{ formatNumber(cell.cacheCreationInputTokens) }} created
+                    </td>
+                    <td class="px-3 py-2">
+                      {{ formatNumber(cell.rateLimitedCount) }}
+                    </td>
+                    <td class="px-3 py-2">
+                      {{ formatNumber(cell.mappingsReturned) }} returned /
+                      {{ formatNumber(cell.mappingsRejected) }} rejected
+                    </td>
+                    <td
+                      class="max-w-sm px-3 py-2 text-red-700 dark:text-red-300"
+                    >
+                      {{ cell.error ?? 'None' }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </PageCard>
+
+          <PageCard>
+            <h4 class="text-base font-semibold text-gray-900 dark:text-white">
+              Events
+            </h4>
+            <Message
+              v-if="!selectedRunDetail.events.length"
+              severity="info"
+              variant="outlined"
+              class="mt-3"
+            >
+              No run events found.
+            </Message>
+            <ol v-else class="mt-3 space-y-3">
+              <li
+                v-for="event in selectedRunDetail.events"
+                :key="
+                  event.id ?? event.uuid ?? `${event.action}-${event.createdAt}`
+                "
+                class="rounded-md border border-zinc-200 p-3 dark:border-slate-700"
+              >
+                <p class="font-semibold">{{ event.action ?? 'event' }}</p>
+                <p class="text-sm text-zinc-500">
+                  {{ event.actor ?? 'Unknown actor' }} ·
+                  {{ formatDate(event.createdAt) }}
+                </p>
+                <p v-if="event.message" class="mt-2 text-sm">
+                  {{ event.message }}
+                </p>
+                <p v-if="event.reasoning" class="mt-2 text-sm">
+                  {{ event.reasoning }}
+                </p>
+              </li>
+            </ol>
+          </PageCard>
+        </template>
+      </div>
+    </Drawer>
+  </div>
+</template>
diff --git a/src/views/admin/DiagnosticsView.vue b/src/views/admin/DiagnosticsView.vue
new file mode 100644
index 00000000..1f033053
--- /dev/null
+++ b/src/views/admin/DiagnosticsView.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { RouterLink, RouterView, useRoute } from 'vue-router';
+import PageHeader from '@/components/PageHeader.vue';
+import PageSubHeader from '@/components/PageSubHeader.vue';
+import Message from '@/volt/Message.vue';
+import { useAiConfigStore } from '@/stores/ai-config';
+
+const route = useRoute();
+const aiConfig = useAiConfigStore();
+
+const tabs = computed(() => [
+  {
+    name: 'admin-diagnostics-notifications',
+    label: 'Notifications',
+  },
+  ...(aiConfig.dashboardSuggestionsEnabled
+    ? [
+        {
+          name: 'admin-diagnostics-ai-suggestions',
+          label: 'AI Suggestions',
+        },
+      ]
+    : []),
+]);
+
+onMounted(() => {
+  void aiConfig.fetchDashboardSuggestionsConfig();
+});
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <PageHeader>Diagnostics</PageHeader>
+      <PageSubHeader>
+        Operational diagnostics for notifications and AI suggestions.
+      </PageSubHeader>
+    </div>
+
+    <Message
+      v-if="!aiConfig.dashboardSuggestionsConfigFetched"
+      severity="info"
+      variant="outlined"
+    >
+      Loading AI diagnostics configuration.
+    </Message>
+
+    <nav
+      class="flex gap-1 border-b border-ccf-300 dark:border-slate-700"
+      aria-label="Diagnostics sections"
+    >
+      <RouterLink
+        v-for="tab in tabs"
+        :key="tab.name"
+        :to="{ name: tab.name }"
+        class="border-b-2 px-4 py-3 text-sm font-semibold transition-colors"
+        :class="
+          route.name === tab.name
+            ? 'border-primary text-primary'
+            : 'border-transparent text-ccf-700 hover:text-primary dark:text-slate-400'
+        "
+      >
+        {{ tab.label }}
+      </RouterLink>
+    </nav>
+
+    <RouterView />
+  </div>
+</template>
diff --git a/src/views/admin/partials/ai-diagnostics.ts b/src/views/admin/partials/ai-diagnostics.ts
new file mode 100644
index 00000000..a4022c4c
--- /dev/null
+++ b/src/views/admin/partials/ai-diagnostics.ts
@@ -0,0 +1,279 @@
+import type { ChartData } from 'chart.js';
+
+export type AiDiagnosticsStatus =
+  | 'pending'
+  | 'running'
+  | 'completed'
+  | 'failed';
+
+export type AiDiagnosticsCheckStatus = 'pass' | 'warn' | 'fail';
+
+export interface AiDiagnosticsConfig {
+  model?: string;
+  promptVersion?: string;
+  maxControlsPerChunk?: number;
+  maxLabelSetsPerChunk?: number;
+  maxCallsPerRun?: number;
+  queueWorkers?: number;
+}
+
+export interface AiDiagnosticsTotals {
+  runs: number;
+  runsByStatus: Record<AiDiagnosticsStatus, number>;
+  cellsCompleted: number;
+  cellsFailed: number;
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadInputTokens: number;
+  cacheCreationInputTokens: number;
+  cacheHitRatio: number;
+  mappingsReturned: number;
+  mappingsRejected: number;
+  suggestionsAccepted: number;
+  suggestionsRejected: number;
+  suggestionsPending: number;
+  rateLimitedTotal: number;
+}
+
+export interface AiDiagnosticsQueue {
+  name: string;
+  maxWorkers?: number;
+  available?: number;
+  running?: number;
+  retryable?: number;
+  scheduled?: number;
+  completed24h?: number;
+  discarded24h?: number;
+  oldestAvailableAt?: string | null;
+}
+
+export interface AiDiagnosticsCheck {
+  id: string;
+  status: AiDiagnosticsCheckStatus;
+  message: string;
+  recommendedActions?: string[];
+}
+
+export interface AiDiagnosticsSummary {
+  enabled: boolean;
+  config: AiDiagnosticsConfig;
+  totals: AiDiagnosticsTotals;
+  queue: AiDiagnosticsQueue | null;
+  checks: AiDiagnosticsCheck[];
+}
+
+export interface AiDiagnosticsActor {
+  id?: string;
+  name?: string;
+}
+
+export interface AiDiagnosticsScope {
+  controlKeys?: string[];
+  labelSetHashes?: string[];
+  labelSets?: Array<Record<string, string>>;
+}
+
+export interface AiDiagnosticsRun {
+  id: string;
+  sspId?: string;
+  sspName?: string;
+  status: AiDiagnosticsStatus;
+  model?: string;
+  promptVersion?: string;
+  plannedCalls: number;
+  completedCells: number;
+  failedCells: number;
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadInputTokens: number;
+  cacheCreationInputTokens: number;
+  cacheHitRatio: number;
+  mappingsReturned: number;
+  mappingsRejected: number;
+  rateLimitedTotal: number;
+  startedAt?: string | null;
+  completedAt?: string | null;
+  durationMs?: number | null;
+  triggeredBy?: AiDiagnosticsActor | null;
+  scope?: AiDiagnosticsScope;
+}
+
+export interface AiDiagnosticsCell {
+  cellIndex: number;
+  status: AiDiagnosticsStatus;
+  controlKeys?: string[];
+  labelSetHashes?: string[];
+  inputTokens?: number;
+  outputTokens?: number;
+  cacheReadInputTokens?: number;
+  cacheCreationInputTokens?: number;
+  rateLimitedCount?: number;
+  mappingsReturned?: number;
+  mappingsRejected?: number;
+  error?: string | null;
+  completedAt?: string | null;
+}
+
+export interface AiDiagnosticsEvent {
+  id?: string;
+  uuid?: string;
+  action?: string;
+  actor?: string;
+  message?: string;
+  reasoning?: string;
+  createdAt?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface AiDiagnosticsRunDetail extends AiDiagnosticsRun {
+  cells: AiDiagnosticsCell[];
+  events: AiDiagnosticsEvent[];
+}
+
+export interface AiDiagnosticsRunsFilters {
+  status?: string;
+  sspId?: string;
+  limit?: number;
+  cursor?: string;
+}
+
+export interface AiDiagnosticsRunsMeta {
+  nextCursor?: string | null;
+}
+
+export interface AiDiagnosticsRunsResponse {
+  data: AiDiagnosticsRun[];
+  meta?: AiDiagnosticsRunsMeta;
+}
+
+export function buildAiDiagnosticsSummaryEndpoint(): string {
+  return '/api/admin/ai-diagnostics/summary';
+}
+
+export function buildAiDiagnosticsRunsEndpoint(
+  filters: AiDiagnosticsRunsFilters = {},
+): string {
+  const params = new URLSearchParams();
+
+  if (filters.status) params.set('status', filters.status);
+  if (filters.sspId) params.set('sspId', filters.sspId);
+  if (filters.limit) params.set('limit', String(filters.limit));
+  if (filters.cursor) params.set('cursor', filters.cursor);
+
+  const query = params.toString();
+  return `/api/admin/ai-diagnostics/runs${query ? `?${query}` : ''}`;
+}
+
+export function buildAiDiagnosticsRunDetailEndpoint(runId: string): string {
+  return `/api/admin/ai-diagnostics/runs/${encodeURIComponent(runId)}`;
+}
+
+function runDay(run: AiDiagnosticsRun): string | null {
+  if (!run.startedAt) return null;
+
+  const date = new Date(run.startedAt);
+  if (Number.isNaN(date.getTime())) return null;
+
+  return date.toISOString().slice(0, 10);
+}
+
+function sortedBucketEntries(runs: AiDiagnosticsRun[]) {
+  const buckets = new Map<
+    string,
+    {
+      inputTokens: number;
+      cacheReadInputTokens: number;
+      cacheCreationInputTokens: number;
+      cacheHitRatioTotal: number;
+      runCount: number;
+    }
+  >();
+
+  for (const run of runs) {
+    const day = runDay(run);
+    if (!day) continue;
+
+    const bucket = buckets.get(day) ?? {
+      inputTokens: 0,
+      cacheReadInputTokens: 0,
+      cacheCreationInputTokens: 0,
+      cacheHitRatioTotal: 0,
+      runCount: 0,
+    };
+
+    bucket.inputTokens += run.inputTokens ?? 0;
+    bucket.cacheReadInputTokens += run.cacheReadInputTokens ?? 0;
+    bucket.cacheCreationInputTokens += run.cacheCreationInputTokens ?? 0;
+    bucket.cacheHitRatioTotal += run.cacheHitRatio ?? 0;
+    bucket.runCount += 1;
+    buckets.set(day, bucket);
+  }
+
+  return Array.from(buckets.entries()).sort(([left], [right]) =>
+    left.localeCompare(right),
+  );
+}
+
+export function buildAiDiagnosticsTokenChartData(
+  runs: AiDiagnosticsRun[],
+): ChartData<'line'> {
+  const buckets = sortedBucketEntries(runs);
+
+  return {
+    labels: buckets.map(([day]) => day),
+    datasets: [
+      {
+        label: 'Input tokens',
+        data: buckets.map(([, bucket]) => bucket.inputTokens),
+        borderColor: '#2563eb',
+        backgroundColor: 'rgba(37, 99, 235, 0.12)',
+        pointRadius: 3,
+        tension: 0.3,
+        fill: false,
+      },
+      {
+        label: 'Cache read tokens',
+        data: buckets.map(([, bucket]) => bucket.cacheReadInputTokens),
+        borderColor: '#059669',
+        backgroundColor: 'rgba(5, 150, 105, 0.12)',
+        pointRadius: 3,
+        tension: 0.3,
+        fill: false,
+      },
+      {
+        label: 'Cache creation tokens',
+        data: buckets.map(([, bucket]) => bucket.cacheCreationInputTokens),
+        borderColor: '#d97706',
+        backgroundColor: 'rgba(217, 119, 6, 0.12)',
+        pointRadius: 3,
+        tension: 0.3,
+        fill: false,
+      },
+    ],
+  };
+}
+
+export function buildAiDiagnosticsCacheHitChartData(
+  runs: AiDiagnosticsRun[],
+): ChartData<'line'> {
+  const buckets = sortedBucketEntries(runs);
+
+  return {
+    labels: buckets.map(([day]) => day),
+    datasets: [
+      {
+        label: 'Cache hit %',
+        data: buckets.map(([, bucket]) =>
+          bucket.runCount
+            ? Math.round((bucket.cacheHitRatioTotal / bucket.runCount) * 100)
+            : 0,
+        ),
+        borderColor: '#7c3aed',
+        backgroundColor: 'rgba(124, 58, 237, 0.12)',
+        pointRadius: 3,
+        tension: 0.3,
+        fill: false,
+      },
+    ],
+  };
+}