From b2c8393c2a1570b096d760e42df9f9b8dcb7260b Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 13:09:49 -0300
Subject: [PATCH 01/14] implement: bch-1312-suggestions-ui

---
 .../__tests__/useDashboardSuggestions.spec.ts |  78 +++
 src/composables/useDashboardSuggestions.ts    | 265 +++++++++
 src/router/__tests__/index.spec.ts            |  15 +
 src/router/index.ts                           |   8 +
 src/stores/ai-config.ts                       |  45 ++
 src/stores/filters.ts                         |   1 +
 src/views/dashboard/CreateFormView.vue        |  20 +
 src/views/dashboard/IndexView.vue             | 205 +++++--
 src/views/dashboard/SuggestionsView.vue       | 542 ++++++++++++++++++
 .../dashboard/__tests__/IndexView.spec.ts     | 140 +++++
 .../__tests__/SuggestionsView.spec.ts         | 177 ++++++
 .../partials/SuggestionScopeDialog.vue        | 198 +++++++
 .../__tests__/SuggestionScopeDialog.spec.ts   | 106 ++++
 .../partials/dashboard-suggestions.ts         | 149 +++++
 14 files changed, 1909 insertions(+), 40 deletions(-)
 create mode 100644 src/composables/__tests__/useDashboardSuggestions.spec.ts
 create mode 100644 src/composables/useDashboardSuggestions.ts
 create mode 100644 src/stores/ai-config.ts
 create mode 100644 src/views/dashboard/SuggestionsView.vue
 create mode 100644 src/views/dashboard/__tests__/IndexView.spec.ts
 create mode 100644 src/views/dashboard/__tests__/SuggestionsView.spec.ts
 create mode 100644 src/views/dashboard/partials/SuggestionScopeDialog.vue
 create mode 100644 src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
 create mode 100644 src/views/dashboard/partials/dashboard-suggestions.ts

diff --git a/src/composables/__tests__/useDashboardSuggestions.spec.ts b/src/composables/__tests__/useDashboardSuggestions.spec.ts
new file mode 100644
index 00000000..7aa1130f
--- /dev/null
+++ b/src/composables/__tests__/useDashboardSuggestions.spec.ts
@@ -0,0 +1,78 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, ref } from 'vue';
+
+const mocks = vi.hoisted(() => ({
+  execute: vi.fn(),
+  toastAdd: vi.fn(),
+}));
+
+vi.mock('@/composables/axios', () => ({
+  useDataApi: () => ({
+    execute: mocks.execute,
+    isLoading: { value: false },
+    error: { value: null },
+  }),
+  decamelizeKeys: vi.fn((data: unknown) => JSON.stringify(data)),
+}));
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({ add: mocks.toastAdd }),
+}));
+
+import { useSuggestionRunPoller } from '../useDashboardSuggestions';
+
+function response(status: string, completedCells: number, id = status) {
+  return {
+    data: {
+      value: {
+        data: {
+          id,
+          status,
+          plannedCalls: 2,
+          completedCells,
+          failedCells: 0,
+        },
+      },
+    },
+  };
+}
+
+describe('useSuggestionRunPoller', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('starts polling active runs, stops on terminal status, and fires toast', async () => {
+    const onPoll = vi.fn();
+    mocks.execute
+      .mockResolvedValueOnce(response('running', 1, 'run-1'))
+      .mockResolvedValueOnce(response('completed', 2, 'run-1'));
+
+    const scope = effectScope();
+    const poller = scope.run(() =>
+      useSuggestionRunPoller(ref('ssp-1'), onPoll),
+    );
+
+    await poller?.pollLatest();
+    expect(poller?.isPolling.value).toBe(true);
+
+    await vi.advanceTimersByTimeAsync(3000);
+
+    expect(mocks.execute).toHaveBeenCalledTimes(2);
+    expect(onPoll).toHaveBeenCalledTimes(2);
+    expect(poller?.isPolling.value).toBe(false);
+    expect(mocks.toastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: 'success',
+        summary: 'Suggestions ready',
+      }),
+    );
+
+    scope.stop();
+  });
+});
diff --git a/src/composables/useDashboardSuggestions.ts b/src/composables/useDashboardSuggestions.ts
new file mode 100644
index 00000000..db3637c9
--- /dev/null
+++ b/src/composables/useDashboardSuggestions.ts
@@ -0,0 +1,265 @@
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  shallowRef,
+  watch,
+  type Ref,
+} from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { decamelizeKeys, useDataApi } from '@/composables/axios';
+import {
+  buildAcceptDashboardSuggestionsEndpoint,
+  buildDashboardSuggestionEventsEndpoint,
+  buildDashboardSuggestionLabelSetsEndpoint,
+  buildDashboardSuggestionsEndpoint,
+  buildGenerateDashboardSuggestionsEndpoint,
+  buildLatestDashboardSuggestionRunEndpoint,
+  buildRejectDashboardSuggestionsEndpoint,
+  type DashboardSuggestion,
+  type DashboardSuggestionEvent,
+  type DashboardSuggestionLabelSet,
+  type GenerateDashboardSuggestionsPayload,
+  type SuggestionRun,
+  isRunActive,
+} from '@/views/dashboard/partials/dashboard-suggestions';
+
+export function useDashboardSuggestions(sspId: Ref<string>) {
+  const pendingEndpoint = computed(() =>
+    sspId.value
+      ? buildDashboardSuggestionsEndpoint(sspId.value, 'pending')
+      : '',
+  );
+  const labelSetsEndpoint = computed(() =>
+    sspId.value ? buildDashboardSuggestionLabelSetsEndpoint(sspId.value) : '',
+  );
+
+  const {
+    data: pendingSuggestions,
+    execute: refreshPendingSuggestions,
+    isLoading: pendingSuggestionsLoading,
+  } = useDataApi<DashboardSuggestion[]>(pendingEndpoint);
+  const historySuggestions = shallowRef<DashboardSuggestion[]>([]);
+  const { execute: fetchHistoryRequest, isLoading: historySuggestionsLoading } =
+    useDataApi<DashboardSuggestion[]>(null, {}, { immediate: false });
+  const {
+    data: labelSets,
+    execute: refreshLabelSets,
+    isLoading: labelSetsLoading,
+  } = useDataApi<DashboardSuggestionLabelSet[]>(labelSetsEndpoint);
+
+  const { execute: generateRequest, isLoading: generating } =
+    useDataApi<SuggestionRun>(null, {}, { immediate: false });
+  const { execute: acceptRequest, isLoading: accepting } = useDataApi<void>(
+    null,
+    {},
+    { immediate: false },
+  );
+  const { execute: rejectRequest, isLoading: rejecting } = useDataApi<void>(
+    null,
+    {},
+    { immediate: false },
+  );
+  const { execute: eventsRequest, isLoading: loadingEvents } = useDataApi<
+    DashboardSuggestionEvent[]
+  >(null, {}, { immediate: false });
+
+  async function generateSuggestions(
+    payload: GenerateDashboardSuggestionsPayload,
+  ) {
+    return generateRequest(
+      buildGenerateDashboardSuggestionsEndpoint(sspId.value),
+      {
+        method: 'POST',
+        data: payload,
+        transformRequest: [decamelizeKeys],
+      },
+    );
+  }
+
+  async function acceptSuggestions(ids: string[]) {
+    await acceptRequest(buildAcceptDashboardSuggestionsEndpoint(sspId.value), {
+      method: 'POST',
+      data: { ids },
+      transformRequest: [decamelizeKeys],
+    });
+    await refreshPendingSuggestions();
+    await refreshHistorySuggestions();
+  }
+
+  async function refreshHistorySuggestions() {
+    if (!sspId.value) {
+      historySuggestions.value = [];
+      return;
+    }
+
+    const statuses = ['accepted', 'rejected', 'superseded'];
+    const responses = await Promise.all(
+      statuses.map((status) =>
+        fetchHistoryRequest(
+          buildDashboardSuggestionsEndpoint(sspId.value, status),
+        ),
+      ),
+    );
+    historySuggestions.value = responses.flatMap(
+      (response) => response?.data.value?.data ?? [],
+    );
+  }
+
+  async function rejectSuggestions(ids: string[], reason?: string) {
+    await rejectRequest(buildRejectDashboardSuggestionsEndpoint(sspId.value), {
+      method: 'POST',
+      data: { ids, reason },
+      transformRequest: [decamelizeKeys],
+    });
+    await refreshPendingSuggestions();
+    await refreshHistorySuggestions();
+  }
+
+  async function fetchSuggestionEvents(suggestionId: string) {
+    const response = await eventsRequest(
+      buildDashboardSuggestionEventsEndpoint(sspId.value, suggestionId),
+    );
+    return response?.data.value?.data ?? [];
+  }
+
+  onMounted(() => {
+    void refreshHistorySuggestions();
+  });
+
+  return {
+    pendingSuggestions,
+    historySuggestions,
+    labelSets,
+    pendingSuggestionsLoading,
+    historySuggestionsLoading,
+    labelSetsLoading,
+    generating,
+    accepting,
+    rejecting,
+    loadingEvents,
+    refreshPendingSuggestions,
+    refreshHistorySuggestions,
+    refreshLabelSets,
+    generateSuggestions,
+    acceptSuggestions,
+    rejectSuggestions,
+    fetchSuggestionEvents,
+  };
+}
+
+export function useSuggestionRunPoller(
+  sspId: Ref<string>,
+  onPoll?: () => Promise<void> | void,
+) {
+  const toast = useToast();
+  const run = ref<SuggestionRun>();
+  const timer = ref<number>();
+  const terminalToastShownFor = ref<string>();
+
+  const { execute, isLoading, error } = useDataApi<SuggestionRun>(
+    null,
+    {},
+    { immediate: false },
+  );
+
+  const progressPercent = computed(() => {
+    if (!run.value?.plannedCalls) {
+      return 0;
+    }
+    return Math.min(
+      100,
+      Math.round((run.value.completedCells / run.value.plannedCalls) * 100),
+    );
+  });
+
+  function stop() {
+    if (timer.value) {
+      window.clearInterval(timer.value);
+      timer.value = undefined;
+    }
+  }
+
+  async function pollLatest() {
+    if (!sspId.value) {
+      return;
+    }
+
+    try {
+      const response = await execute(
+        buildLatestDashboardSuggestionRunEndpoint(sspId.value),
+      );
+      const latestRun = response?.data.value?.data;
+      if (!latestRun) {
+        return;
+      }
+      run.value = latestRun;
+      await onPoll?.();
+
+      if (isRunActive(latestRun)) {
+        start();
+        return;
+      }
+
+      stop();
+      const runKey = latestRun.uuid ?? latestRun.id ?? latestRun.updatedAt;
+      if (runKey && terminalToastShownFor.value === runKey) {
+        return;
+      }
+      terminalToastShownFor.value = runKey;
+
+      if (latestRun.status === 'completed') {
+        toast.add({
+          severity: 'success',
+          summary: 'Suggestions ready',
+          detail: `${latestRun.completedCells} cells completed`,
+          life: 3000,
+        });
+      } else if (latestRun.status === 'failed') {
+        toast.add({
+          severity: 'error',
+          summary: 'Generation failed',
+          detail: latestRun.error ?? 'Dashboard suggestion generation failed.',
+          life: 5000,
+        });
+      }
+    } catch {
+      stop();
+    }
+  }
+
+  function start() {
+    if (timer.value) {
+      return;
+    }
+    timer.value = window.setInterval(() => {
+      void pollLatest();
+    }, 3000);
+  }
+
+  watch(
+    run,
+    (nextRun) => {
+      if (isRunActive(nextRun)) {
+        start();
+      } else {
+        stop();
+      }
+    },
+    { immediate: true },
+  );
+
+  onUnmounted(stop);
+
+  return {
+    run,
+    isPolling: computed(() => Boolean(timer.value)),
+    isLoading,
+    error,
+    progressPercent,
+    pollLatest,
+    start,
+    stop,
+  };
+}
diff --git a/src/router/__tests__/index.spec.ts b/src/router/__tests__/index.spec.ts
index 33cbe07f..1bf28353 100644
--- a/src/router/__tests__/index.spec.ts
+++ b/src/router/__tests__/index.spec.ts
@@ -36,4 +36,19 @@ describe('router', () => {
       }).path,
     ).toBe('/system/components/dashboards/component-1');
   });
+
+  it('registers the dashboard suggestions review route behind auth meta', () => {
+    const route = router
+      .getRoutes()
+      .find((route) => route.name === 'dashboards.suggestions');
+
+    expect(route?.path).toBe('/dashboards/suggestions/:sspId');
+    expect(route?.meta.requiresAuth).toBe(true);
+    expect(
+      router.resolve({
+        name: 'dashboards.suggestions',
+        params: { sspId: 'ssp-1' },
+      }).path,
+    ).toBe('/dashboards/suggestions/ssp-1');
+  });
 });
diff --git a/src/router/index.ts b/src/router/index.ts
index 01b6cbb3..5c02a8e8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -37,6 +37,14 @@ const authenticatedRoutes = [
       requiresAuth: true,
     },
   },
+  {
+    path: '/dashboards/suggestions/:sspId',
+    name: 'dashboards.suggestions',
+    component: () => import('../views/dashboard/SuggestionsView.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
   {
     path: '/dashboards/:id',
     name: 'dashboards.view',
diff --git a/src/stores/ai-config.ts b/src/stores/ai-config.ts
new file mode 100644
index 00000000..c7382e62
--- /dev/null
+++ b/src/stores/ai-config.ts
@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { useDataApi } from '@/composables/axios';
+import { buildDashboardSuggestionsConfigEndpoint } from '@/views/dashboard/partials/dashboard-suggestions';
+
+interface DashboardSuggestionsConfig {
+  enabled: boolean;
+}
+
+export const useAiConfigStore = defineStore('ai-config', () => {
+  const fetched = ref(false);
+  const enabled = ref(false);
+
+  const { execute, isLoading, error } = useDataApi<DashboardSuggestionsConfig>(
+    null,
+    null,
+    { immediate: false },
+  );
+
+  async function fetchDashboardSuggestionsConfig() {
+    if (fetched.value) {
+      return enabled.value;
+    }
+
+    try {
+      const response = await execute(buildDashboardSuggestionsConfigEndpoint());
+      const config = response?.data.value?.data;
+      enabled.value = Boolean(config?.enabled);
+    } catch {
+      enabled.value = false;
+    } finally {
+      fetched.value = true;
+    }
+
+    return enabled.value;
+  }
+
+  return {
+    dashboardSuggestionsEnabled: computed(() => enabled.value),
+    dashboardSuggestionsConfigFetched: computed(() => fetched.value),
+    dashboardSuggestionsConfigLoading: isLoading,
+    dashboardSuggestionsConfigError: error,
+    fetchDashboardSuggestionsConfig,
+  };
+});
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
index 18512962..c6ce6d1f 100644
--- a/src/stores/filters.ts
+++ b/src/stores/filters.ts
@@ -5,6 +5,7 @@ export interface Dashboard {
   id?: string;
   uuid?: string;
   name: string;
+  sspId?: string | null;
   filter: Filter;
   controls: Control[];
   components: SystemComponent[];
diff --git a/src/views/dashboard/CreateFormView.vue b/src/views/dashboard/CreateFormView.vue
index f6eb1f89..4950f887 100644
--- a/src/views/dashboard/CreateFormView.vue
+++ b/src/views/dashboard/CreateFormView.vue
@@ -10,6 +10,16 @@
         <label class="inline-block pb-2">Result Filter</label>
         <FormInput v-model="filter" />
       </div>
+      <div class="mb-4">
+        <label class="inline-block pb-2">Scope</label>
+        <Select
+          v-model="selectedSspId"
+          :options="sspScopeOptions"
+          optionLabel="label"
+          optionValue="value"
+          class="w-full"
+        />
+      </div>
       <div class="mb-4">
         <label class="inline-block pb-2">Controls</label>
         <MultiSelect
@@ -94,6 +104,7 @@ import type { Dashboard } from '@/stores/filters.ts';
 import FormInput from '@/components/forms/FormInput.vue';
 import PrimaryButton from '@/volt/PrimaryButton.vue';
 import MultiSelect from '@/volt/MultiSelect.vue';
+import Select from '@/volt/Select.vue';
 import type {
   Catalog,
   SystemSecurityPlan,
@@ -137,6 +148,7 @@ interface SelectComponent {
 
 const selectedControls = ref<ControlOption[]>([]);
 const selectedComponents = ref<ComponentOption[]>([]);
+const selectedSspId = ref<string | null>(null);
 const controls = ref<SelectControl[]>([]);
 const components = ref<SelectComponent[]>([]);
 const loadingControls = ref<boolean>(true);
@@ -152,6 +164,13 @@ const { data: catalogs } = useDataApi<Catalog[]>('/api/oscal/catalogs');
 const { data: systemSecurityPlans } = useDataApi<SystemSecurityPlan[]>(
   '/api/oscal/system-security-plans',
 );
+const sspScopeOptions = computed(() => [
+  { label: 'Global', value: null },
+  ...(systemSecurityPlans.value ?? []).map((ssp) => ({
+    label: ssp.metadata.title,
+    value: ssp.uuid,
+  })),
+]);
 const { execute: fetchFullCatalog } = useDataApi<Catalog>(null, null, {
   abortPrevious: false,
 });
@@ -339,6 +358,7 @@ async function submit() {
     await createDashboard({
       data: {
         ...dashboard.value,
+        sspId: selectedSspId.value,
         filter: parsedFilter,
         controls: controlIds,
         components: componentIds,
diff --git a/src/views/dashboard/IndexView.vue b/src/views/dashboard/IndexView.vue
index 6419ca10..cb4281d5 100644
--- a/src/views/dashboard/IndexView.vue
+++ b/src/views/dashboard/IndexView.vue
@@ -1,77 +1,137 @@
 <template>
   <CompliancePostureWidget />
 
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <PageHeader>Dashboards</PageHeader>
+      <PageSubHeader>Findings grouped by query</PageSubHeader>
+    </div>
+    <div class="flex gap-2">
+      <RouterLink :to="{ name: 'dashboards.create' }">
+        <PrimaryButton>Create</PrimaryButton>
+      </RouterLink>
+      <SecondaryButton
+        v-if="aiConfig.dashboardSuggestionsEnabled"
+        @click="showSspPicker = true"
+      >
+        AI suggestions
+      </SecondaryButton>
+    </div>
+  </div>
+
   <div v-if="dashboards && dashboards.length > 0">
-    <PageHeader>Dashboards</PageHeader>
-    <PageSubHeader>Findings grouped by query</PageSubHeader>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-4">
-      <PageCard v-for="dashboard in dashboards" :key="dashboard.uuid">
-        <div class="flex justify-between items-center mb-2">
-          <h3 class="text-lg font-semibold text-zinc-600 dark:text-slate-300">
-            {{ dashboard.name }}
-          </h3>
-          <div>
-            <Chip
-              v-for="control in dashboard.controls"
-              :key="control.id"
-              :label="control.id"
-              class="mx-1"
-              v-tooltip.top="control.title"
-            />
-            <Chip
-              v-for="component in dashboard.components"
-              :key="component.uuid"
-              :label="component.title"
-              class="mx-1"
-              v-tooltip.top="component.title"
-            />
+    <section
+      v-for="group in dashboardGroups"
+      :key="group.key"
+      class="mt-6"
+      :data-testid="`dashboard-group-${group.key}`"
+    >
+      <h2 class="text-base font-semibold text-zinc-700 dark:text-slate-200">
+        {{ group.title }}
+      </h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mt-3">
+        <PageCard v-for="dashboard in group.dashboards" :key="dashboard.uuid">
+          <div class="flex justify-between items-center mb-2">
+            <h3 class="text-lg font-semibold text-zinc-600 dark:text-slate-300">
+              {{ dashboard.name }}
+            </h3>
+            <div>
+              <Chip
+                v-for="control in dashboard.controls"
+                :key="control.id"
+                :label="control.id"
+                class="mx-1"
+                v-tooltip.top="control.title"
+              />
+              <Chip
+                v-for="component in dashboard.components"
+                :key="component.uuid"
+                :label="component.title"
+                class="mx-1"
+                v-tooltip.top="component.title"
+              />
+            </div>
           </div>
-        </div>
-        <div class="h-32">
-          <DashboardChart :filter="dashboard.filter" :dashboard="dashboard" />
-        </div>
-        <Button
-          label="Delete Dashboard"
-          @click.prevent="deleteDashboard(dashboard)"
-          class="bg-red-500 border-red-600 hover:bg-red-600 text-white dark:bg-red-700 dark:hover:bg-red-600 dark:border-red-700 mr-4"
-        >
-          Delete
-        </Button>
-      </PageCard>
-    </div>
+          <div class="h-32">
+            <DashboardChart :filter="dashboard.filter" :dashboard="dashboard" />
+          </div>
+          <Button
+            label="Delete Dashboard"
+            @click.prevent="deleteDashboard(dashboard)"
+            class="bg-red-500 border-red-600 hover:bg-red-600 text-white dark:bg-red-700 dark:hover:bg-red-600 dark:border-red-700 mr-4"
+          >
+            Delete
+          </Button>
+        </PageCard>
+      </div>
+    </section>
   </div>
 
-  <Message v-else severity="warn" variant="outlined">
+  <Message v-else severity="warn" variant="outlined" class="mt-6">
     <h4 class="font-bold">No Dashboards Found</h4>
     <p>
       Dashboards can be created on the
-      <RouterLink :to="{ name: 'evidence:index' }" class="underline"
-        >evidence
+      <RouterLink :to="{ name: 'evidence:index' }" class="underline">
+        evidence
       </RouterLink>
       page
     </p>
   </Message>
+
+  <Dialog v-model:visible="showSspPicker" modal header="Select SSP" size="sm">
+    <div class="flex flex-col gap-2">
+      <label for="dashboard-suggestions-ssp">System Security Plan</label>
+      <Select
+        id="dashboard-suggestions-ssp"
+        v-model="selectedSspId"
+        :options="sspOptions"
+        optionLabel="label"
+        optionValue="value"
+        placeholder="Select an SSP"
+        class="w-full"
+      />
+    </div>
+    <template #footer>
+      <SecondaryButton @click="showSspPicker = false">Cancel</SecondaryButton>
+      <PrimaryButton :disabled="!selectedSspId" @click="openSuggestions">
+        Open suggestions
+      </PrimaryButton>
+    </template>
+  </Dialog>
 </template>
+
 <script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import PageHeader from '@/components/PageHeader.vue';
 import PageCard from '@/components/PageCard.vue';
 import PageSubHeader from '@/components/PageSubHeader.vue';
 import type { Dashboard } from '@/stores/filters.ts';
+import type { SystemSecurityPlan } from '@/oscal';
 import DashboardChart from '@/views/dashboard/DashboardChart.vue';
 import CompliancePostureWidget from '@/views/dashboard/CompliancePostureWidget.vue';
 import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'primevue/usetoast';
 import Button from '@/volt/Button.vue';
 import Chip from '@/volt/Chip.vue';
+import Dialog from '@/volt/Dialog.vue';
 import Message from '@/volt/Message.vue';
+import Select from '@/volt/Select.vue';
 import { useDataApi } from '@/composables/axios';
+import { useAiConfigStore } from '@/stores/ai-config';
 
+const router = useRouter();
 const confirm = useConfirm();
 const toast = useToast();
+const aiConfig = useAiConfigStore();
+const showSspPicker = ref(false);
+const selectedSspId = ref<string | null>(null);
 
 const { data: dashboards, execute: refreshDashboards } =
   useDataApi<Dashboard[]>('/api/filters');
+const { data: systemSecurityPlans } = useDataApi<SystemSecurityPlan[]>(
+  '/api/oscal/system-security-plans',
+);
 
 const { execute: executeDelete } = useDataApi<void>(
   null,
@@ -81,6 +141,71 @@ const { execute: executeDelete } = useDataApi<void>(
   { immediate: false },
 );
 
+const sspOptions = computed(() =>
+  (systemSecurityPlans.value ?? []).map((ssp) => ({
+    label: ssp.metadata.title,
+    value: ssp.uuid,
+  })),
+);
+
+const sspTitleById = computed(
+  () =>
+    new Map(
+      (systemSecurityPlans.value ?? []).map((ssp) => [
+        ssp.uuid,
+        ssp.metadata.title,
+      ]),
+    ),
+);
+
+const dashboardGroups = computed(() => {
+  const sections = [
+    {
+      key: 'global',
+      title: 'Global',
+      dashboards: (dashboards.value ?? []).filter(
+        (dashboard) => !dashboard.sspId,
+      ),
+    },
+  ];
+
+  const bySsp = new Map<string, Dashboard[]>();
+  for (const dashboard of dashboards.value ?? []) {
+    if (!dashboard.sspId) {
+      continue;
+    }
+    bySsp.set(dashboard.sspId, [
+      ...(bySsp.get(dashboard.sspId) ?? []),
+      dashboard,
+    ]);
+  }
+
+  for (const [sspId, scopedDashboards] of bySsp) {
+    sections.push({
+      key: sspId,
+      title: sspTitleById.value.get(sspId) ?? `SSP ${sspId}`,
+      dashboards: scopedDashboards,
+    });
+  }
+
+  return sections.filter((section) => section.dashboards.length > 0);
+});
+
+onMounted(() => {
+  void aiConfig.fetchDashboardSuggestionsConfig();
+});
+
+function openSuggestions() {
+  if (!selectedSspId.value) {
+    return;
+  }
+  showSspPicker.value = false;
+  router.push({
+    name: 'dashboards.suggestions',
+    params: { sspId: selectedSspId.value },
+  });
+}
+
 function deleteDashboard(dashboard: Dashboard) {
   confirm.require({
     message: `Are you sure you want to delete the ${dashboard.name} dashboard ?`,
diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
new file mode 100644
index 00000000..0cdc9a1f
--- /dev/null
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -0,0 +1,542 @@
+<template>
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <PageHeader>Dashboard suggestions</PageHeader>
+      <PageSubHeader>{{ sspTitle }}</PageSubHeader>
+    </div>
+    <PrimaryButton
+      v-if="aiConfig.dashboardSuggestionsEnabled"
+      @click="showScopeDialog = true"
+    >
+      Generate suggestions
+    </PrimaryButton>
+  </div>
+
+  <Message
+    v-if="
+      aiConfig.dashboardSuggestionsConfigFetched &&
+      !aiConfig.dashboardSuggestionsEnabled
+    "
+    severity="warn"
+    variant="outlined"
+    class="mt-4"
+  >
+    Dashboard suggestions are disabled.
+  </Message>
+
+  <div v-else class="mt-4 space-y-4">
+    <div class="flex flex-wrap items-center gap-3">
+      <span
+        class="inline-flex items-center gap-2 rounded-md border px-3 py-1 text-sm"
+      >
+        <i
+          v-if="runStatus === 'running' || runStatus === 'pending'"
+          class="pi pi-spin pi-spinner"
+        />
+        {{ runStatusLabel }}
+      </span>
+      <div v-if="run?.plannedCalls" class="min-w-64">
+        <div class="h-2 overflow-hidden rounded bg-zinc-200 dark:bg-slate-700">
+          <div
+            class="h-full bg-emerald-600"
+            :style="{ width: `${progressPercent}%` }"
+          />
+        </div>
+        <p class="mt-1 text-xs text-zinc-500">
+          {{ run.completedCells }} / {{ run.plannedCalls }} cells complete
+        </p>
+      </div>
+    </div>
+
+    <Message
+      v-if="run?.status === 'failed'"
+      severity="error"
+      variant="outlined"
+    >
+      <p>{{ run.error ?? 'Suggestion generation failed.' }}</p>
+      <ul v-if="run.failures?.length" class="mt-2 list-disc pl-5">
+        <li v-for="failure in run.failures" :key="failureKey(failure)">
+          {{ failure.controlKey ?? 'Unknown control' }} /
+          {{ failure.labelSetHash ?? 'Unknown label set' }}:
+          {{ failure.message ?? 'Failed' }}
+        </li>
+      </ul>
+    </Message>
+
+    <div class="flex gap-2 border-b border-zinc-200 dark:border-slate-700">
+      <button
+        class="px-4 py-2 font-semibold"
+        :class="activeTab === 'pending' ? 'border-b-2 border-primary' : ''"
+        @click="activeTab = 'pending'"
+      >
+        Pending
+      </button>
+      <button
+        class="px-4 py-2 font-semibold"
+        :class="activeTab === 'history' ? 'border-b-2 border-primary' : ''"
+        @click="activeTab = 'history'"
+      >
+        History
+      </button>
+    </div>
+
+    <div v-if="activeTab === 'pending'" class="space-y-4">
+      <div
+        v-if="selectedSuggestionIds.length"
+        class="flex flex-wrap items-center gap-2 rounded-md border border-zinc-200 p-3 dark:border-slate-700"
+      >
+        <span class="text-sm text-zinc-600 dark:text-slate-300">
+          {{ selectedSuggestionIds.length }} selected
+        </span>
+        <SecondaryButton @click="acceptSelected"
+          >Accept selected</SecondaryButton
+        >
+        <SecondaryButton @click="openRejectDialog(selectedSuggestionIds)">
+          Reject selected
+        </SecondaryButton>
+      </div>
+
+      <Message
+        v-if="!pendingSuggestionsLoading && pendingGroups.length === 0"
+        severity="info"
+        variant="outlined"
+      >
+        No pending dashboard suggestions.
+      </Message>
+
+      <PageCard
+        v-for="group in pendingGroups"
+        :key="group.hash"
+        :data-testid="`suggestion-group-${group.hash}`"
+      >
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <div class="flex flex-wrap items-center gap-2">
+              <h2
+                class="text-lg font-semibold text-zinc-700 dark:text-slate-200"
+              >
+                {{ groupTitle(group.suggestions[0]) }}
+              </h2>
+              <Chip
+                v-if="group.suggestions[0]?.action === 'extend'"
+                :label="`Extends: ${group.suggestions[0].targetFilterName ?? 'dashboard'}`"
+              />
+              <span class="text-sm text-zinc-500">
+                {{ group.evidenceCount }} matched evidence
+              </span>
+            </div>
+            <div class="mt-2 flex flex-wrap gap-2">
+              <Chip v-for="label in group.labels" :key="label" :label="label" />
+            </div>
+          </div>
+          <div class="flex gap-2">
+            <SecondaryButton @click="acceptGroup(group)">
+              Accept group
+            </SecondaryButton>
+            <SecondaryButton @click="openRejectDialog(groupIds(group))">
+              Reject group
+            </SecondaryButton>
+          </div>
+        </div>
+
+        <div class="mt-4 divide-y divide-zinc-200 dark:divide-slate-700">
+          <div
+            v-for="suggestion in group.suggestions"
+            :key="suggestion.id"
+            class="py-3"
+          >
+            <div class="flex flex-wrap items-start justify-between gap-3">
+              <label class="flex min-w-0 items-start gap-3">
+                <input
+                  v-model="selectedSuggestionIds"
+                  type="checkbox"
+                  :value="suggestion.id"
+                  class="mt-1"
+                />
+                <span>
+                  <span class="font-semibold">
+                    {{ suggestion.controlId }}
+                  </span>
+                  <span>{{ suggestion.controlTitle }}</span>
+                  <span class="ml-2 text-sm text-zinc-500">
+                    {{ confidenceLabel(suggestion.confidence) }}
+                  </span>
+                </span>
+              </label>
+              <div class="flex gap-2">
+                <SecondaryButton @click="toggleReasoning(suggestion.id)">
+                  Reasoning
+                </SecondaryButton>
+                <SecondaryButton @click="acceptOne(suggestion.id)">
+                  Accept
+                </SecondaryButton>
+                <SecondaryButton @click="openRejectDialog([suggestion.id])">
+                  Reject
+                </SecondaryButton>
+              </div>
+            </div>
+            <div
+              v-if="expandedReasoning.has(suggestion.id)"
+              class="mt-3 rounded-md bg-zinc-50 p-3 text-sm dark:bg-slate-800"
+            >
+              <p>
+                <span class="font-semibold">Control fit:</span>
+                {{
+                  suggestion.controlFitReasoning ??
+                  suggestion.reasoning ??
+                  'No control-fit reasoning provided.'
+                }}
+              </p>
+              <p class="mt-2">
+                <span class="font-semibold">System relevance:</span>
+                {{
+                  suggestion.systemRelevanceReasoning ??
+                  suggestion.reasoning ??
+                  'No system-relevance reasoning provided.'
+                }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </PageCard>
+    </div>
+
+    <div v-else class="space-y-3">
+      <Message
+        v-if="!historySuggestionsLoading && !historySuggestions?.length"
+        severity="info"
+        variant="outlined"
+      >
+        No suggestion history.
+      </Message>
+      <PageCard
+        v-for="suggestion in historySuggestions ?? []"
+        :key="suggestion.id"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <p class="font-semibold">
+              {{ suggestion.controlId }} {{ suggestion.controlTitle }}
+            </p>
+            <p class="text-sm text-zinc-500">
+              {{ suggestion.status }} · {{ groupTitle(suggestion) }}
+            </p>
+          </div>
+          <SecondaryButton @click="openAuditDialog(suggestion.id)">
+            Audit events
+          </SecondaryButton>
+        </div>
+      </PageCard>
+
+      <PageCard v-if="run">
+        <h2 class="text-base font-semibold">Latest run</h2>
+        <p class="mt-1 text-sm text-zinc-600 dark:text-slate-300">
+          {{ run.status }} · {{ run.completedCells }}/{{
+            run.plannedCalls
+          }}
+          completed · {{ run.failedCells }} failed
+        </p>
+        <p class="mt-1 text-sm text-zinc-500">
+          Scope:
+          {{ run.scope?.controlKeys?.length ?? 'all' }} controls,
+          {{ run.scope?.labelSetHashes?.length ?? 'all' }} label-sets
+        </p>
+      </PageCard>
+    </div>
+  </div>
+
+  <SuggestionScopeDialog
+    v-model:visible="showScopeDialog"
+    :controls="controlOptions"
+    :labelSets="labelSets ?? []"
+    :generating="generating"
+    :ceilingError="scopeCeilingError"
+    @generate="generate"
+  />
+
+  <Dialog
+    v-model:visible="showRejectDialog"
+    modal
+    header="Reject suggestions"
+    size="sm"
+  >
+    <label class="inline-block pb-2" for="reject-reason">Reason</label>
+    <Textarea
+      id="reject-reason"
+      v-model="rejectReason"
+      rows="4"
+      class="w-full"
+    />
+    <template #footer>
+      <SecondaryButton @click="showRejectDialog = false"
+        >Cancel</SecondaryButton
+      >
+      <PrimaryButton @click="rejectPending">Reject</PrimaryButton>
+    </template>
+  </Dialog>
+
+  <Dialog
+    v-model:visible="showAuditDialog"
+    modal
+    header="Audit events"
+    size="md"
+  >
+    <Message v-if="!auditEvents.length" severity="info" variant="outlined">
+      No audit events found.
+    </Message>
+    <ol v-else class="space-y-3">
+      <li
+        v-for="event in auditEvents"
+        :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' }} · {{ event.createdAt }}
+        </p>
+        <p v-if="event.reasoning" class="mt-2 text-sm">
+          {{ event.reasoning }}
+        </p>
+        <p v-if="event.resultingFilterName" class="mt-2 text-sm">
+          Resulting filter: {{ event.resultingFilterName }}
+        </p>
+      </li>
+    </ol>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import PageCard from '@/components/PageCard.vue';
+import PageHeader from '@/components/PageHeader.vue';
+import PageSubHeader from '@/components/PageSubHeader.vue';
+import type { ImplementedRequirement, SystemSecurityPlan } from '@/oscal';
+import { useDataApi } from '@/composables/axios';
+import {
+  useDashboardSuggestions,
+  useSuggestionRunPoller,
+} from '@/composables/useDashboardSuggestions';
+import { useAiConfigStore } from '@/stores/ai-config';
+import Chip from '@/volt/Chip.vue';
+import Dialog from '@/volt/Dialog.vue';
+import Message from '@/volt/Message.vue';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import SecondaryButton from '@/volt/SecondaryButton.vue';
+import Textarea from '@/volt/Textarea.vue';
+import SuggestionScopeDialog from './partials/SuggestionScopeDialog.vue';
+import {
+  formatLabelSet,
+  type DashboardSuggestion,
+  type DashboardSuggestionEvent,
+  type GenerateDashboardSuggestionsPayload,
+  type SuggestionRunFailure,
+} from './partials/dashboard-suggestions';
+
+const route = useRoute();
+const sspId = computed(() => String(route.params.sspId));
+const aiConfig = useAiConfigStore();
+const activeTab = ref<'pending' | 'history'>('pending');
+const showScopeDialog = ref(false);
+const showRejectDialog = ref(false);
+const showAuditDialog = ref(false);
+const rejectReason = ref('');
+const rejectIds = ref<string[]>([]);
+const selectedSuggestionIds = ref<string[]>([]);
+const expandedReasoning = ref(new Set<string>());
+const auditEvents = ref<DashboardSuggestionEvent[]>([]);
+const scopeCeilingError = ref('');
+
+const { data: systemSecurityPlan } = useDataApi<SystemSecurityPlan>(
+  computed(() => `/api/oscal/system-security-plans/${sspId.value}/full`),
+);
+
+const {
+  pendingSuggestions,
+  historySuggestions,
+  labelSets,
+  pendingSuggestionsLoading,
+  historySuggestionsLoading,
+  generating,
+  refreshPendingSuggestions,
+  generateSuggestions,
+  acceptSuggestions,
+  rejectSuggestions,
+  fetchSuggestionEvents,
+} = useDashboardSuggestions(sspId);
+
+const { run, progressPercent, pollLatest, start } = useSuggestionRunPoller(
+  sspId,
+  async () => {
+    await refreshPendingSuggestions();
+  },
+);
+
+const sspTitle = computed(
+  () => systemSecurityPlan.value?.metadata.title ?? 'Selected SSP',
+);
+const runStatus = computed(() => run.value?.status ?? 'idle');
+const runStatusLabel = computed(() => {
+  if (!run.value) {
+    return 'Idle';
+  }
+  if (run.value.status === 'pending' || run.value.status === 'running') {
+    return `${run.value.status} (${run.value.completedCells}/${run.value.plannedCalls})`;
+  }
+  return run.value.status;
+});
+
+const controlOptions = computed(() =>
+  (
+    systemSecurityPlan.value?.controlImplementation.implementedRequirements ??
+    []
+  )
+    .map((requirement: ImplementedRequirement) => ({
+      label: requirement.controlId,
+      value: requirement.controlId,
+    }))
+    .sort((left, right) => left.label.localeCompare(right.label)),
+);
+
+const pendingGroups = computed(() => {
+  const groups = new Map<
+    string,
+    {
+      hash: string;
+      labels: string[];
+      evidenceCount: number;
+      suggestions: DashboardSuggestion[];
+    }
+  >();
+
+  for (const suggestion of pendingSuggestions.value ?? []) {
+    const group = groups.get(suggestion.labelSetHash) ?? {
+      hash: suggestion.labelSetHash,
+      labels: formatLabelSet(suggestion.labels ?? {}),
+      evidenceCount: suggestion.evidenceCount ?? 0,
+      suggestions: [],
+    };
+    group.evidenceCount = Math.max(
+      group.evidenceCount,
+      suggestion.evidenceCount ?? 0,
+    );
+    group.suggestions.push(suggestion);
+    groups.set(suggestion.labelSetHash, group);
+  }
+
+  return Array.from(groups.values());
+});
+
+onMounted(async () => {
+  await aiConfig.fetchDashboardSuggestionsConfig();
+  await pollLatest();
+  if (run.value?.status === 'pending' || run.value?.status === 'running') {
+    start();
+  }
+});
+
+function groupTitle(suggestion: DashboardSuggestion | undefined) {
+  if (!suggestion) {
+    return 'Proposed dashboard';
+  }
+  return (
+    suggestion.proposedFilterName ??
+    suggestion.targetFilterName ??
+    'Proposed dashboard'
+  );
+}
+
+function groupIds(group: { suggestions: DashboardSuggestion[] }) {
+  return group.suggestions.map((suggestion) => suggestion.id);
+}
+
+function confidenceLabel(confidence: number | undefined) {
+  if (confidence === undefined || confidence === null) {
+    return 'Confidence unavailable';
+  }
+  return `${Math.round(confidence * 100)}% confidence`;
+}
+
+function failureKey(failure: SuggestionRunFailure) {
+  return `${failure.controlKey ?? 'control'}-${failure.labelSetHash ?? 'label'}-${failure.message ?? 'failed'}`;
+}
+
+function toggleReasoning(id: string) {
+  const next = new Set(expandedReasoning.value);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  expandedReasoning.value = next;
+}
+
+async function generate(payload: GenerateDashboardSuggestionsPayload) {
+  scopeCeilingError.value = '';
+  try {
+    const response = await generateSuggestions(payload);
+    const generatedRun = response?.data.value?.data;
+    if (generatedRun) {
+      run.value = generatedRun;
+      start();
+    }
+    showScopeDialog.value = false;
+    await refreshPendingSuggestions();
+  } catch (error) {
+    scopeCeilingError.value = extractErrorMessage(error);
+  }
+}
+
+async function acceptOne(id: string) {
+  await acceptSuggestions([id]);
+  selectedSuggestionIds.value = selectedSuggestionIds.value.filter(
+    (selectedId) => selectedId !== id,
+  );
+}
+
+async function acceptGroup(group: { suggestions: DashboardSuggestion[] }) {
+  await acceptSuggestions(groupIds(group));
+  selectedSuggestionIds.value = selectedSuggestionIds.value.filter(
+    (id) => !groupIds(group).includes(id),
+  );
+}
+
+async function acceptSelected() {
+  const ids = [...selectedSuggestionIds.value];
+  await acceptSuggestions(ids);
+  selectedSuggestionIds.value = [];
+}
+
+function openRejectDialog(ids: string[]) {
+  rejectIds.value = [...ids];
+  rejectReason.value = '';
+  showRejectDialog.value = true;
+}
+
+async function rejectPending() {
+  const ids = [...rejectIds.value];
+  await rejectSuggestions(ids, rejectReason.value || undefined);
+  selectedSuggestionIds.value = selectedSuggestionIds.value.filter(
+    (id) => !ids.includes(id),
+  );
+  showRejectDialog.value = false;
+}
+
+async function openAuditDialog(id: string) {
+  auditEvents.value = await fetchSuggestionEvents(id);
+  showAuditDialog.value = true;
+}
+
+function extractErrorMessage(error: unknown) {
+  const maybeError = error as {
+    response?: { data?: { error?: string; message?: string; data?: unknown } };
+    message?: string;
+  };
+  return (
+    maybeError.response?.data?.error ??
+    maybeError.response?.data?.message ??
+    maybeError.message ??
+    'Generation request failed.'
+  );
+}
+</script>
diff --git a/src/views/dashboard/__tests__/IndexView.spec.ts b/src/views/dashboard/__tests__/IndexView.spec.ts
new file mode 100644
index 00000000..f70ce5b1
--- /dev/null
+++ b/src/views/dashboard/__tests__/IndexView.spec.ts
@@ -0,0 +1,140 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { shallowRef } from 'vue';
+import type { Dashboard } from '@/stores/filters';
+import type { SystemSecurityPlan } from '@/oscal';
+
+const dashboards = shallowRef<Dashboard[]>([]);
+const systemSecurityPlans = shallowRef<SystemSecurityPlan[]>([]);
+
+const mocks = vi.hoisted(() => ({
+  aiEnabled: false,
+  fetchConfig: vi.fn(),
+  routerPush: vi.fn(),
+  confirmRequire: vi.fn(),
+  toastAdd: vi.fn(),
+  refreshDashboards: vi.fn(),
+  deleteDashboard: vi.fn(),
+}));
+
+vi.mock('@/stores/ai-config', () => ({
+  useAiConfigStore: () => ({
+    dashboardSuggestionsEnabled: mocks.aiEnabled,
+    fetchDashboardSuggestionsConfig: mocks.fetchConfig,
+  }),
+}));
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({ push: mocks.routerPush }),
+}));
+
+vi.mock('primevue/useconfirm', () => ({
+  useConfirm: () => ({ require: mocks.confirmRequire }),
+}));
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({ add: mocks.toastAdd }),
+}));
+
+vi.mock('@/composables/axios', () => ({
+  useDataApi: (url?: string | null) => {
+    if (url === '/api/filters') {
+      return { data: dashboards, execute: mocks.refreshDashboards };
+    }
+    if (url === '/api/oscal/system-security-plans') {
+      return { data: systemSecurityPlans };
+    }
+    if (url === null) {
+      return { execute: mocks.deleteDashboard };
+    }
+    throw new Error(`Unexpected useDataApi call: ${url}`);
+  },
+}));
+
+vi.mock('@/views/dashboard/DashboardChart.vue', () => ({
+  default: { name: 'DashboardChart', template: '<div />' },
+}));
+
+vi.mock('@/views/dashboard/CompliancePostureWidget.vue', () => ({
+  default: { name: 'CompliancePostureWidget', template: '<div />' },
+}));
+
+import IndexView from '../IndexView.vue';
+
+function makeDashboard(name: string, sspId: string | null = null): Dashboard {
+  return {
+    id: name,
+    uuid: name,
+    name,
+    sspId,
+    filter: {} as Dashboard['filter'],
+    controls: [],
+    components: [],
+  };
+}
+
+function makeSsp(uuid: string, title: string): SystemSecurityPlan {
+  return {
+    uuid,
+    metadata: { title } as SystemSecurityPlan['metadata'],
+  } as SystemSecurityPlan;
+}
+
+function mountView() {
+  return mount(IndexView, {
+    global: {
+      stubs: {
+        PageHeader: { template: '<h1><slot /></h1>' },
+        PageSubHeader: { template: '<p><slot /></p>' },
+        PageCard: { template: '<section><slot /></section>' },
+        Chip: { props: ['label'], template: '<span>{{ label }}</span>' },
+        Dialog: { template: '<div><slot /><slot name="footer" /></div>' },
+        Message: { template: '<div><slot /></div>' },
+        PrimaryButton: {
+          template: '<button @click="$emit(\'click\')"><slot /></button>',
+        },
+        SecondaryButton: {
+          template: '<button @click="$emit(\'click\')"><slot /></button>',
+        },
+        Select: { template: '<select />' },
+        RouterLink: { props: ['to'], template: '<a><slot /></a>' },
+      },
+    },
+  });
+}
+
+describe('Dashboard IndexView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.aiEnabled = false;
+    dashboards.value = [];
+    systemSecurityPlans.value = [];
+  });
+
+  it('hides the AI suggestions entry point when the config probe is disabled', () => {
+    dashboards.value = [makeDashboard('Global dashboard')];
+    const wrapper = mountView();
+
+    expect(wrapper.text()).not.toContain('AI suggestions');
+    expect(wrapper.text()).toContain('Global dashboard');
+  });
+
+  it('groups dashboards by global and owning SSP scopes', () => {
+    mocks.aiEnabled = true;
+    dashboards.value = [
+      makeDashboard('Global dashboard'),
+      makeDashboard('Scoped dashboard', 'ssp-1'),
+    ];
+    systemSecurityPlans.value = [makeSsp('ssp-1', 'Payments SSP')];
+
+    const wrapper = mountView();
+
+    expect(
+      wrapper.find('[data-testid="dashboard-group-global"]').text(),
+    ).toContain('Global');
+    expect(
+      wrapper.find('[data-testid="dashboard-group-ssp-1"]').text(),
+    ).toContain('Payments SSP');
+    expect(wrapper.text()).toContain('AI suggestions');
+  });
+});
diff --git a/src/views/dashboard/__tests__/SuggestionsView.spec.ts b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
new file mode 100644
index 00000000..6f8c1090
--- /dev/null
+++ b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
@@ -0,0 +1,177 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { nextTick } from 'vue';
+import type { SystemSecurityPlan } from '@/oscal';
+
+const state = vi.hoisted(() => ({
+  pendingSuggestions: { value: [] as unknown[] },
+  historySuggestions: { value: [] as unknown[] },
+  labelSets: { value: [] as unknown[] },
+  ssp: { value: undefined as unknown },
+  acceptSuggestions: vi.fn(),
+  rejectSuggestions: vi.fn(),
+  generateSuggestions: vi.fn(),
+  fetchSuggestionEvents: vi.fn(),
+  refreshPendingSuggestions: vi.fn(),
+  pollLatest: vi.fn(),
+  start: vi.fn(),
+  fetchConfig: vi.fn(),
+}));
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({ params: { sspId: 'ssp-1' } }),
+}));
+
+vi.mock('@/stores/ai-config', () => ({
+  useAiConfigStore: () => ({
+    dashboardSuggestionsEnabled: true,
+    dashboardSuggestionsConfigFetched: true,
+    fetchDashboardSuggestionsConfig: state.fetchConfig,
+  }),
+}));
+
+vi.mock('@/composables/axios', () => ({
+  useDataApi: () => ({ data: state.ssp }),
+}));
+
+vi.mock('@/composables/useDashboardSuggestions', () => ({
+  useDashboardSuggestions: () => ({
+    pendingSuggestions: state.pendingSuggestions,
+    historySuggestions: state.historySuggestions,
+    labelSets: state.labelSets,
+    pendingSuggestionsLoading: { value: false },
+    historySuggestionsLoading: { value: false },
+    generating: { value: false },
+    refreshPendingSuggestions: state.refreshPendingSuggestions,
+    generateSuggestions: state.generateSuggestions,
+    acceptSuggestions: state.acceptSuggestions,
+    rejectSuggestions: state.rejectSuggestions,
+    fetchSuggestionEvents: state.fetchSuggestionEvents,
+  }),
+  useSuggestionRunPoller: () => ({
+    run: { value: undefined },
+    progressPercent: { value: 0 },
+    pollLatest: state.pollLatest,
+    start: state.start,
+  }),
+}));
+
+import SuggestionsView from '../SuggestionsView.vue';
+
+function mountView() {
+  return mount(SuggestionsView, {
+    global: {
+      stubs: {
+        PageHeader: { template: '<h1><slot /></h1>' },
+        PageSubHeader: { template: '<p><slot /></p>' },
+        PageCard: { template: '<section><slot /></section>' },
+        Chip: { props: ['label'], template: '<span>{{ label }}</span>' },
+        Message: { template: '<div><slot /></div>' },
+        SuggestionScopeDialog: { template: '<div />' },
+        Dialog: { template: '<div><slot /><slot name="footer" /></div>' },
+        Textarea: {
+          props: ['modelValue'],
+          emits: ['update:modelValue'],
+          template:
+            '<textarea :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+        },
+        PrimaryButton: {
+          emits: ['click'],
+          template: '<button @click="$emit(\'click\')"><slot /></button>',
+        },
+        SecondaryButton: {
+          emits: ['click'],
+          template: '<button @click="$emit(\'click\')"><slot /></button>',
+        },
+      },
+    },
+  });
+}
+
+describe('SuggestionsView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    state.ssp.value = {
+      uuid: 'ssp-1',
+      metadata: { title: 'Payments SSP' },
+      controlImplementation: { implementedRequirements: [] },
+    } as unknown as SystemSecurityPlan;
+    state.pendingSuggestions.value = [
+      {
+        id: 'sug-1',
+        status: 'pending',
+        controlId: 'AC-1',
+        controlTitle: 'Access control policy',
+        labelSetHash: 'hash-1',
+        labels: { env: 'prod' },
+        confidence: 0.91,
+        controlFitReasoning: 'Fits AC-1',
+        systemRelevanceReasoning: 'Relevant to payments',
+        action: 'create',
+        proposedFilterName: 'Production access',
+        evidenceCount: 3,
+      },
+      {
+        id: 'sug-2',
+        status: 'pending',
+        controlId: 'AC-2',
+        controlTitle: 'Account management',
+        labelSetHash: 'hash-1',
+        labels: { env: 'prod' },
+        confidence: 0.8,
+        controlFitReasoning: 'Fits AC-2',
+        systemRelevanceReasoning: 'Relevant to accounts',
+        action: 'create',
+        proposedFilterName: 'Production access',
+        evidenceCount: 3,
+      },
+    ];
+    state.historySuggestions.value = [];
+    state.fetchSuggestionEvents.mockResolvedValue([]);
+  });
+
+  it('groups pending suggestions by labelSetHash and expands reasoning', async () => {
+    const wrapper = mountView();
+
+    expect(wrapper.findAll('[data-testid^="suggestion-group-"]')).toHaveLength(
+      1,
+    );
+    expect(wrapper.text()).toContain('Production access');
+    expect(wrapper.text()).toContain('AC-1');
+
+    const reasoningButton = wrapper
+      .findAll('button')
+      .find((button) => button.text().includes('Reasoning'));
+    await reasoningButton?.trigger('click');
+    await nextTick();
+
+    expect(wrapper.text()).toContain('Fits AC-1');
+    expect(wrapper.text()).toContain('Relevant to payments');
+  });
+
+  it('wires group accept and reject reason payloads', async () => {
+    const wrapper = mountView();
+
+    await wrapper
+      .findAll('button')
+      .find((button) => button.text() === 'Accept group')
+      ?.trigger('click');
+    expect(state.acceptSuggestions).toHaveBeenCalledWith(['sug-1', 'sug-2']);
+
+    await wrapper
+      .findAll('button')
+      .find((button) => button.text() === 'Reject group')
+      ?.trigger('click');
+    await wrapper.find('textarea').setValue('Not useful');
+    await wrapper
+      .findAll('button')
+      .filter((button) => button.text() === 'Reject')
+      .at(-1)
+      ?.trigger('click');
+
+    expect(state.rejectSuggestions).toHaveBeenCalledWith(
+      ['sug-1', 'sug-2'],
+      'Not useful',
+    );
+  });
+});
diff --git a/src/views/dashboard/partials/SuggestionScopeDialog.vue b/src/views/dashboard/partials/SuggestionScopeDialog.vue
new file mode 100644
index 00000000..19250db9
--- /dev/null
+++ b/src/views/dashboard/partials/SuggestionScopeDialog.vue
@@ -0,0 +1,198 @@
+<template>
+  <Dialog
+    v-model:visible="modelVisible"
+    modal
+    header="Generate suggestions"
+    size="lg"
+  >
+    <div class="flex flex-col gap-5">
+      <div>
+        <label class="inline-block pb-2">Controls</label>
+        <MultiSelect
+          v-model="selectedControls"
+          :options="controls"
+          optionLabel="label"
+          optionValue="value"
+          display="chip"
+          filter
+          class="w-full"
+          placeholder="All controls"
+        />
+      </div>
+
+      <div>
+        <label class="inline-block pb-2">Evidence label sets</label>
+        <MultiSelect
+          v-model="selectedLabelSetHashes"
+          :options="labelSets"
+          optionLabel="hash"
+          optionValue="hash"
+          display="chip"
+          filter
+          class="w-full"
+          placeholder="All label sets"
+        >
+          <template #option="{ option }">
+            <div class="flex flex-wrap items-center gap-2">
+              <Chip
+                v-for="label in formatLabelSet(option.labels)"
+                :key="label"
+                :label="label"
+              />
+              <span class="text-sm text-zinc-500">
+                {{ option.evidenceCount }} evidence
+              </span>
+            </div>
+          </template>
+        </MultiSelect>
+      </div>
+
+      <label class="flex items-center gap-2">
+        <Checkbox v-model="supersedePending" binary />
+        <span>Replace pending suggestions in this scope</span>
+      </label>
+
+      <Message
+        v-if="ceilingError"
+        severity="error"
+        variant="outlined"
+        data-testid="scope-ceiling"
+      >
+        {{ ceilingError }}
+      </Message>
+      <Message
+        v-else-if="requiresLargeRunConfirm"
+        severity="warn"
+        variant="outlined"
+        data-testid="scope-warning"
+      >
+        This will make {{ plannedCalls }} AI calls covering
+        {{ selectedControls.length }} controls x
+        {{ selectedLabelSetHashes.length }} label-sets. These run as queued
+        background jobs and may take a while and incur API costs.
+      </Message>
+      <Message v-else severity="info" variant="outlined">
+        {{ plannedCalls }} AI calls covering
+        {{ selectedControls.length }} controls x
+        {{ selectedLabelSetHashes.length }} label-sets.
+      </Message>
+
+      <label
+        v-if="requiresLargeRunConfirm"
+        class="flex items-center gap-2"
+        data-testid="scope-confirm-large"
+      >
+        <Checkbox v-model="largeRunConfirmed" binary />
+        <span>Confirm this larger generation run</span>
+      </label>
+    </div>
+
+    <template #footer>
+      <SecondaryButton @click="modelVisible = false">Cancel</SecondaryButton>
+      <PrimaryButton
+        :disabled="!canGenerate || generating"
+        @click="submit"
+        data-testid="scope-generate"
+      >
+        Generate
+      </PrimaryButton>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import Checkbox from 'primevue/checkbox';
+import Chip from '@/volt/Chip.vue';
+import Dialog from '@/volt/Dialog.vue';
+import Message from '@/volt/Message.vue';
+import MultiSelect from '@/volt/MultiSelect.vue';
+import type {
+  DashboardSuggestionLabelSet,
+  GenerateDashboardSuggestionsPayload,
+} from './dashboard-suggestions';
+import { formatLabelSet } from './dashboard-suggestions';
+
+interface ControlOption {
+  label: string;
+  value: string;
+}
+
+const props = defineProps<{
+  visible: boolean;
+  controls: ControlOption[];
+  labelSets: DashboardSuggestionLabelSet[];
+  generating?: boolean;
+  ceilingError?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:visible': [visible: boolean];
+  generate: [payload: GenerateDashboardSuggestionsPayload];
+}>();
+
+const selectedControls = ref<string[]>([]);
+const selectedLabelSetHashes = ref<string[]>([]);
+const supersedePending = ref(true);
+const largeRunConfirmed = ref(false);
+const warningThreshold = 25;
+
+const modelVisible = computed({
+  get: () => props.visible,
+  set: (visible: boolean) => emit('update:visible', visible),
+});
+
+const plannedCalls = computed(
+  () => selectedControls.value.length * selectedLabelSetHashes.value.length,
+);
+const requiresLargeRunConfirm = computed(
+  () => plannedCalls.value > warningThreshold,
+);
+const canGenerate = computed(
+  () =>
+    plannedCalls.value > 0 &&
+    !props.ceilingError &&
+    (!requiresLargeRunConfirm.value || largeRunConfirmed.value),
+);
+
+watch(
+  () => props.controls,
+  (controls) => {
+    selectedControls.value = controls.map((control) => control.value);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.labelSets,
+  (labelSets) => {
+    selectedLabelSetHashes.value = labelSets.map((labelSet) => labelSet.hash);
+  },
+  { immediate: true },
+);
+
+watch([plannedCalls, modelVisible], () => {
+  largeRunConfirmed.value = false;
+});
+
+function selectedScope(): GenerateDashboardSuggestionsPayload['scope'] {
+  const scope: GenerateDashboardSuggestionsPayload['scope'] = {};
+  if (selectedControls.value.length !== props.controls.length) {
+    scope.controlKeys = selectedControls.value;
+  }
+  if (selectedLabelSetHashes.value.length !== props.labelSets.length) {
+    scope.labelSetHashes = selectedLabelSetHashes.value;
+  }
+  return Object.keys(scope).length > 0 ? scope : undefined;
+}
+
+function submit() {
+  if (!canGenerate.value) {
+    return;
+  }
+  emit('generate', {
+    supersedePending: supersedePending.value,
+    scope: selectedScope(),
+  });
+}
+</script>
diff --git a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
new file mode 100644
index 00000000..c8b3f6c1
--- /dev/null
+++ b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import SuggestionScopeDialog from '../SuggestionScopeDialog.vue';
+import type { DashboardSuggestionLabelSet } from '../dashboard-suggestions';
+
+function makeLabelSet(hash: string): DashboardSuggestionLabelSet {
+  return {
+    hash,
+    labels: { env: hash },
+    evidenceCount: 2,
+  };
+}
+
+function mountDialog(props = {}) {
+  return mount(SuggestionScopeDialog, {
+    props: {
+      visible: true,
+      controls: [
+        { label: 'AC-1', value: 'AC-1' },
+        { label: 'AC-2', value: 'AC-2' },
+      ],
+      labelSets: [makeLabelSet('hash-1'), makeLabelSet('hash-2')],
+      ...props,
+    },
+    global: {
+      stubs: {
+        Dialog: { template: '<div><slot /><slot name="footer" /></div>' },
+        Chip: { props: ['label'], template: '<span>{{ label }}</span>' },
+        Message: { template: '<div><slot /></div>' },
+        MultiSelect: {
+          name: 'MultiSelect',
+          props: ['modelValue'],
+          emits: ['update:modelValue'],
+          template: '<div />',
+        },
+        Checkbox: {
+          name: 'Checkbox',
+          props: ['modelValue'],
+          emits: ['update:modelValue'],
+          template:
+            '<input type="checkbox" :checked="modelValue" @change="$emit(\'update:modelValue\', true)" />',
+        },
+        PrimaryButton: {
+          props: ['disabled'],
+          template:
+            '<button :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
+        },
+        SecondaryButton: {
+          template: '<button @click="$emit(\'click\')"><slot /></button>',
+        },
+      },
+    },
+  });
+}
+
+describe('SuggestionScopeDialog', () => {
+  it('updates the live cost preview when scope selections change', async () => {
+    const wrapper = mountDialog();
+    expect(wrapper.text()).toContain('4 AI calls covering 2 controls x 2');
+
+    await wrapper
+      .findAllComponents({ name: 'MultiSelect' })[0]
+      .vm.$emit('update:modelValue', ['AC-1']);
+
+    expect(wrapper.text()).toContain('2 AI calls covering 1 controls x 2');
+  });
+
+  it('requires explicit confirmation for larger grids', async () => {
+    const wrapper = mountDialog({
+      controls: Array.from({ length: 6 }, (_, index) => ({
+        label: `AC-${index}`,
+        value: `AC-${index}`,
+      })),
+      labelSets: Array.from({ length: 5 }, (_, index) =>
+        makeLabelSet(`hash-${index}`),
+      ),
+    });
+
+    expect(wrapper.text()).toContain('This will make 30 AI calls');
+    expect(
+      wrapper.find('[data-testid="scope-generate"]').attributes('disabled'),
+    ).toBeDefined();
+
+    await wrapper
+      .findAllComponents({ name: 'Checkbox' })[1]
+      .vm.$emit('update:modelValue', true);
+    await wrapper.find('[data-testid="scope-generate"]').trigger('click');
+
+    expect(wrapper.emitted('generate')?.at(-1)).toEqual([
+      {
+        supersedePending: true,
+        scope: undefined,
+      },
+    ]);
+  });
+
+  it('surfaces the configured ceiling inline and blocks submission', async () => {
+    const wrapper = mountDialog({ ceilingError: 'Maximum is 10 calls' });
+
+    expect(wrapper.find('[data-testid="scope-ceiling"]').text()).toContain(
+      'Maximum is 10 calls',
+    );
+    await wrapper.find('[data-testid="scope-generate"]').trigger('click');
+    expect(wrapper.emitted('generate')).toBeUndefined();
+  });
+});
diff --git a/src/views/dashboard/partials/dashboard-suggestions.ts b/src/views/dashboard/partials/dashboard-suggestions.ts
new file mode 100644
index 00000000..669583e5
--- /dev/null
+++ b/src/views/dashboard/partials/dashboard-suggestions.ts
@@ -0,0 +1,149 @@
+export type DashboardSuggestionStatus =
+  | 'pending'
+  | 'accepted'
+  | 'rejected'
+  | 'superseded';
+
+export type SuggestionRunStatus =
+  | 'idle'
+  | 'pending'
+  | 'running'
+  | 'completed'
+  | 'failed';
+
+export interface DashboardSuggestionLabelSet {
+  hash: string;
+  labels: Record<string, string>;
+  evidenceCount: number;
+  sampleTitles?: string[];
+}
+
+export interface DashboardSuggestionScope {
+  controlKeys?: string[];
+  labelSetHashes?: string[];
+}
+
+export interface GenerateDashboardSuggestionsPayload {
+  supersedePending?: boolean;
+  scope?: DashboardSuggestionScope;
+}
+
+export interface SuggestionRunFailure {
+  controlKey?: string;
+  labelSetHash?: string;
+  message?: string;
+}
+
+export interface SuggestionRun {
+  id?: string;
+  uuid?: string;
+  status: SuggestionRunStatus;
+  plannedCalls: number;
+  completedCells: number;
+  failedCells: number;
+  scope?: DashboardSuggestionScope;
+  error?: string;
+  failures?: SuggestionRunFailure[];
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface DashboardSuggestion {
+  id: string;
+  uuid?: string;
+  status: DashboardSuggestionStatus;
+  controlId: string;
+  controlTitle?: string;
+  labelSetHash: string;
+  labels: Record<string, string>;
+  confidence?: number;
+  reasoning?: string;
+  controlFitReasoning?: string;
+  systemRelevanceReasoning?: string;
+  action?: 'create' | 'extend';
+  proposedFilterName?: string;
+  targetFilterId?: string;
+  targetFilterName?: string;
+  evidenceCount?: number;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface DashboardSuggestionEvent {
+  id?: string;
+  uuid?: string;
+  action?: string;
+  actor?: string;
+  reasoning?: string;
+  resultingFilterId?: string;
+  resultingFilterName?: string;
+  createdAt?: string;
+}
+
+export function dashboardSuggestionsBaseEndpoint(sspId: string): string {
+  return `/api/oscal/system-security-plans/${encodeURIComponent(sspId)}`;
+}
+
+export function buildDashboardSuggestionsConfigEndpoint(): string {
+  return '/api/dashboard-suggestions/config';
+}
+
+export function buildGenerateDashboardSuggestionsEndpoint(
+  sspId: string,
+): string {
+  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestions/generate`;
+}
+
+export function buildDashboardSuggestionLabelSetsEndpoint(
+  sspId: string,
+): string {
+  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestions/label-sets`;
+}
+
+export function buildLatestDashboardSuggestionRunEndpoint(
+  sspId: string,
+): string {
+  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestion-runs/latest`;
+}
+
+export function buildDashboardSuggestionRunEndpoint(
+  sspId: string,
+  runId: string,
+): string {
+  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestion-runs/${encodeURIComponent(runId)}`;
+}
+
+export function buildDashboardSuggestionsEndpoint(
+  sspId: string,
+  status?: string,
+): string {
+  const query = status ? `?status=${encodeURIComponent(status)}` : '';
+  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestions${query}`;
+}
+
+export function buildAcceptDashboardSuggestionsEndpoint(sspId: string): string {
+  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestions/accept`;
+}
+
+export function buildRejectDashboardSuggestionsEndpoint(sspId: string): string {
+  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestions/reject`;
+}
+
+export function buildDashboardSuggestionEventsEndpoint(
+  sspId: string,
+  suggestionId: string,
+): string {
+  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestions/${encodeURIComponent(suggestionId)}/events`;
+}
+
+export function getSuggestionId(suggestion: DashboardSuggestion): string {
+  return suggestion.uuid ?? suggestion.id;
+}
+
+export function formatLabelSet(labels: Record<string, string>): string[] {
+  return Object.entries(labels).map(([key, value]) => `${key}=${value}`);
+}
+
+export function isRunActive(run: SuggestionRun | undefined): boolean {
+  return run?.status === 'pending' || run?.status === 'running';
+}

From 2418cf29d9a3dd08a4f3d3edd9c2bc42b2db4e53 Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 13:14:00 -0300
Subject: [PATCH 02/14] self-review: address pass 1 findings

---
 src/composables/useDashboardSuggestions.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/composables/useDashboardSuggestions.ts b/src/composables/useDashboardSuggestions.ts
index db3637c9..be7551fa 100644
--- a/src/composables/useDashboardSuggestions.ts
+++ b/src/composables/useDashboardSuggestions.ts
@@ -95,16 +95,16 @@ export function useDashboardSuggestions(sspId: Ref<string>) {
     }
 
     const statuses = ['accepted', 'rejected', 'superseded'];
-    const responses = await Promise.all(
-      statuses.map((status) =>
-        fetchHistoryRequest(
-          buildDashboardSuggestionsEndpoint(sspId.value, status),
-        ),
-      ),
-    );
-    historySuggestions.value = responses.flatMap(
-      (response) => response?.data.value?.data ?? [],
-    );
+    const collected: DashboardSuggestion[] = [];
+
+    for (const status of statuses) {
+      const response = await fetchHistoryRequest(
+        buildDashboardSuggestionsEndpoint(sspId.value, status),
+      );
+      collected.push(...(response?.data.value?.data ?? []));
+    }
+
+    historySuggestions.value = collected;
   }
 
   async function rejectSuggestions(ids: string[], reason?: string) {

From c983f7703e0f8f5e0fc27b6328382826785a1fbf Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 13:20:49 -0300
Subject: [PATCH 03/14] self-review: address pass 2 findings

---
 src/composables/useDashboardSuggestions.ts    | 72 ++++++++++++++-----
 src/views/dashboard/SuggestionsView.vue       | 36 +++++++++-
 .../__tests__/SuggestionsView.spec.ts         | 42 ++++++++++-
 .../partials/SuggestionScopeDialog.vue        | 10 +++
 .../__tests__/SuggestionScopeDialog.spec.ts   | 10 +++
 5 files changed, 148 insertions(+), 22 deletions(-)

diff --git a/src/composables/useDashboardSuggestions.ts b/src/composables/useDashboardSuggestions.ts
index be7551fa..b351d3fa 100644
--- a/src/composables/useDashboardSuggestions.ts
+++ b/src/composables/useDashboardSuggestions.ts
@@ -4,7 +4,9 @@ import {
   onUnmounted,
   ref,
   shallowRef,
+  toValue,
   watch,
+  type MaybeRef,
   type Ref,
 } from 'vue';
 import { useToast } from 'primevue/usetoast';
@@ -25,29 +27,27 @@ import {
   isRunActive,
 } from '@/views/dashboard/partials/dashboard-suggestions';
 
-export function useDashboardSuggestions(sspId: Ref<string>) {
-  const pendingEndpoint = computed(() =>
-    sspId.value
-      ? buildDashboardSuggestionsEndpoint(sspId.value, 'pending')
-      : '',
-  );
-  const labelSetsEndpoint = computed(() =>
-    sspId.value ? buildDashboardSuggestionLabelSetsEndpoint(sspId.value) : '',
-  );
-
+export function useDashboardSuggestions(
+  sspId: Ref<string>,
+  enabled: MaybeRef<boolean> = true,
+) {
   const {
     data: pendingSuggestions,
-    execute: refreshPendingSuggestions,
+    execute: fetchPendingSuggestions,
     isLoading: pendingSuggestionsLoading,
-  } = useDataApi<DashboardSuggestion[]>(pendingEndpoint);
+  } = useDataApi<DashboardSuggestion[]>(null, {}, { immediate: false });
   const historySuggestions = shallowRef<DashboardSuggestion[]>([]);
   const { execute: fetchHistoryRequest, isLoading: historySuggestionsLoading } =
     useDataApi<DashboardSuggestion[]>(null, {}, { immediate: false });
   const {
     data: labelSets,
-    execute: refreshLabelSets,
+    execute: fetchLabelSets,
     isLoading: labelSetsLoading,
-  } = useDataApi<DashboardSuggestionLabelSet[]>(labelSetsEndpoint);
+  } = useDataApi<DashboardSuggestionLabelSet[]>(
+    null,
+    {},
+    { immediate: false },
+  );
 
   const { execute: generateRequest, isLoading: generating } =
     useDataApi<SuggestionRun>(null, {}, { immediate: false });
@@ -65,9 +65,35 @@ export function useDashboardSuggestions(sspId: Ref<string>) {
     DashboardSuggestionEvent[]
   >(null, {}, { immediate: false });
 
+  function canFetchSuggestions() {
+    return Boolean(toValue(enabled) && sspId.value);
+  }
+
+  async function refreshPendingSuggestions() {
+    if (!canFetchSuggestions()) {
+      return;
+    }
+
+    return fetchPendingSuggestions(
+      buildDashboardSuggestionsEndpoint(sspId.value, 'pending'),
+    );
+  }
+
+  async function refreshLabelSets() {
+    if (!canFetchSuggestions()) {
+      return;
+    }
+
+    return fetchLabelSets(buildDashboardSuggestionLabelSetsEndpoint(sspId.value));
+  }
+
   async function generateSuggestions(
     payload: GenerateDashboardSuggestionsPayload,
   ) {
+    if (!canFetchSuggestions()) {
+      return;
+    }
+
     return generateRequest(
       buildGenerateDashboardSuggestionsEndpoint(sspId.value),
       {
@@ -79,6 +105,10 @@ export function useDashboardSuggestions(sspId: Ref<string>) {
   }
 
   async function acceptSuggestions(ids: string[]) {
+    if (!canFetchSuggestions()) {
+      return;
+    }
+
     await acceptRequest(buildAcceptDashboardSuggestionsEndpoint(sspId.value), {
       method: 'POST',
       data: { ids },
@@ -89,7 +119,7 @@ export function useDashboardSuggestions(sspId: Ref<string>) {
   }
 
   async function refreshHistorySuggestions() {
-    if (!sspId.value) {
+    if (!canFetchSuggestions()) {
       historySuggestions.value = [];
       return;
     }
@@ -108,6 +138,10 @@ export function useDashboardSuggestions(sspId: Ref<string>) {
   }
 
   async function rejectSuggestions(ids: string[], reason?: string) {
+    if (!canFetchSuggestions()) {
+      return;
+    }
+
     await rejectRequest(buildRejectDashboardSuggestionsEndpoint(sspId.value), {
       method: 'POST',
       data: { ids, reason },
@@ -118,6 +152,10 @@ export function useDashboardSuggestions(sspId: Ref<string>) {
   }
 
   async function fetchSuggestionEvents(suggestionId: string) {
+    if (!canFetchSuggestions()) {
+      return [];
+    }
+
     const response = await eventsRequest(
       buildDashboardSuggestionEventsEndpoint(sspId.value, suggestionId),
     );
@@ -125,7 +163,9 @@ export function useDashboardSuggestions(sspId: Ref<string>) {
   }
 
   onMounted(() => {
-    void refreshHistorySuggestions();
+    if (canFetchSuggestions()) {
+      void refreshHistorySuggestions();
+    }
   });
 
   return {
diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
index 0cdc9a1f..8f60ca15 100644
--- a/src/views/dashboard/SuggestionsView.vue
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -5,7 +5,10 @@
       <PageSubHeader>{{ sspTitle }}</PageSubHeader>
     </div>
     <PrimaryButton
-      v-if="aiConfig.dashboardSuggestionsEnabled"
+      v-if="
+        aiConfig.dashboardSuggestionsConfigFetched &&
+        aiConfig.dashboardSuggestionsEnabled
+      "
       @click="showScopeDialog = true"
     >
       Generate suggestions
@@ -24,7 +27,16 @@
     Dashboard suggestions are disabled.
   </Message>
 
-  <div v-else class="mt-4 space-y-4">
+  <Message
+    v-else-if="!aiConfig.dashboardSuggestionsConfigFetched"
+    severity="info"
+    variant="outlined"
+    class="mt-4"
+  >
+    Loading dashboard suggestions configuration.
+  </Message>
+
+  <div v-else-if="aiConfig.dashboardSuggestionsEnabled" class="mt-4 space-y-4">
     <div class="flex flex-wrap items-center gap-3">
       <span
         class="inline-flex items-center gap-2 rounded-md border px-3 py-1 text-sm"
@@ -246,15 +258,18 @@
   </div>
 
   <SuggestionScopeDialog
+    v-if="aiConfig.dashboardSuggestionsEnabled"
     v-model:visible="showScopeDialog"
     :controls="controlOptions"
     :labelSets="labelSets ?? []"
     :generating="generating"
     :ceilingError="scopeCeilingError"
+    @scope-change="scopeCeilingError = ''"
     @generate="generate"
   />
 
   <Dialog
+    v-if="aiConfig.dashboardSuggestionsEnabled"
     v-model:visible="showRejectDialog"
     modal
     header="Reject suggestions"
@@ -276,6 +291,7 @@
   </Dialog>
 
   <Dialog
+    v-if="aiConfig.dashboardSuggestionsEnabled"
     v-model:visible="showAuditDialog"
     modal
     header="Audit events"
@@ -359,11 +375,20 @@ const {
   historySuggestionsLoading,
   generating,
   refreshPendingSuggestions,
+  refreshHistorySuggestions,
+  refreshLabelSets,
   generateSuggestions,
   acceptSuggestions,
   rejectSuggestions,
   fetchSuggestionEvents,
-} = useDashboardSuggestions(sspId);
+} = useDashboardSuggestions(
+  sspId,
+  computed(
+    () =>
+      aiConfig.dashboardSuggestionsConfigFetched &&
+      aiConfig.dashboardSuggestionsEnabled,
+  ),
+);
 
 const { run, progressPercent, pollLatest, start } = useSuggestionRunPoller(
   sspId,
@@ -429,6 +454,11 @@ const pendingGroups = computed(() => {
 
 onMounted(async () => {
   await aiConfig.fetchDashboardSuggestionsConfig();
+  if (!aiConfig.dashboardSuggestionsEnabled) {
+    return;
+  }
+  await refreshLabelSets();
+  await refreshHistorySuggestions();
   await pollLatest();
   if (run.value?.status === 'pending' || run.value?.status === 'running') {
     start();
diff --git a/src/views/dashboard/__tests__/SuggestionsView.spec.ts b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
index 6f8c1090..0d89ce3d 100644
--- a/src/views/dashboard/__tests__/SuggestionsView.spec.ts
+++ b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { nextTick } from 'vue';
 import type { SystemSecurityPlan } from '@/oscal';
@@ -13,9 +13,13 @@ const state = vi.hoisted(() => ({
   generateSuggestions: vi.fn(),
   fetchSuggestionEvents: vi.fn(),
   refreshPendingSuggestions: vi.fn(),
+  refreshHistorySuggestions: vi.fn(),
+  refreshLabelSets: vi.fn(),
   pollLatest: vi.fn(),
   start: vi.fn(),
   fetchConfig: vi.fn(),
+  aiEnabled: true,
+  aiFetched: true,
 }));
 
 vi.mock('vue-router', () => ({
@@ -24,8 +28,12 @@ vi.mock('vue-router', () => ({
 
 vi.mock('@/stores/ai-config', () => ({
   useAiConfigStore: () => ({
-    dashboardSuggestionsEnabled: true,
-    dashboardSuggestionsConfigFetched: true,
+    get dashboardSuggestionsEnabled() {
+      return state.aiEnabled;
+    },
+    get dashboardSuggestionsConfigFetched() {
+      return state.aiFetched;
+    },
     fetchDashboardSuggestionsConfig: state.fetchConfig,
   }),
 }));
@@ -43,6 +51,8 @@ vi.mock('@/composables/useDashboardSuggestions', () => ({
     historySuggestionsLoading: { value: false },
     generating: { value: false },
     refreshPendingSuggestions: state.refreshPendingSuggestions,
+    refreshHistorySuggestions: state.refreshHistorySuggestions,
+    refreshLabelSets: state.refreshLabelSets,
     generateSuggestions: state.generateSuggestions,
     acceptSuggestions: state.acceptSuggestions,
     rejectSuggestions: state.rejectSuggestions,
@@ -91,6 +101,12 @@ function mountView() {
 describe('SuggestionsView', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    state.aiEnabled = true;
+    state.aiFetched = true;
+    state.fetchConfig.mockImplementation(async () => {
+      state.aiFetched = true;
+      return state.aiEnabled;
+    });
     state.ssp.value = {
       uuid: 'ssp-1',
       metadata: { title: 'Payments SSP' },
@@ -174,4 +190,24 @@ describe('SuggestionsView', () => {
       'Not useful',
     );
   });
+
+  it('does not poll or refresh suggestions when the config is disabled', 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('Dashboard suggestions are disabled.');
+    expect(state.refreshLabelSets).not.toHaveBeenCalled();
+    expect(state.refreshHistorySuggestions).not.toHaveBeenCalled();
+    expect(state.pollLatest).not.toHaveBeenCalled();
+    expect(state.start).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/views/dashboard/partials/SuggestionScopeDialog.vue b/src/views/dashboard/partials/SuggestionScopeDialog.vue
index 19250db9..8062fd21 100644
--- a/src/views/dashboard/partials/SuggestionScopeDialog.vue
+++ b/src/views/dashboard/partials/SuggestionScopeDialog.vue
@@ -128,6 +128,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   'update:visible': [visible: boolean];
+  'scope-change': [];
   generate: [payload: GenerateDashboardSuggestionsPayload];
 }>();
 
@@ -171,6 +172,15 @@ watch(
   { immediate: true },
 );
 
+watch(
+  [selectedControls, selectedLabelSetHashes],
+  () => {
+    largeRunConfirmed.value = false;
+    emit('scope-change');
+  },
+  { deep: true },
+);
+
 watch([plannedCalls, modelVisible], () => {
   largeRunConfirmed.value = false;
 });
diff --git a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
index c8b3f6c1..08bb37cd 100644
--- a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
+++ b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
@@ -103,4 +103,14 @@ describe('SuggestionScopeDialog', () => {
     await wrapper.find('[data-testid="scope-generate"]').trigger('click');
     expect(wrapper.emitted('generate')).toBeUndefined();
   });
+
+  it('emits scope-change when the selected scope changes', async () => {
+    const wrapper = mountDialog({ ceilingError: 'Maximum is 10 calls' });
+
+    await wrapper
+      .findAllComponents({ name: 'MultiSelect' })[0]
+      .vm.$emit('update:modelValue', ['AC-1']);
+
+    expect(wrapper.emitted('scope-change')).toBeTruthy();
+  });
 });

From 56bd5129a668e4be135f26b6807348618464db69 Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 13:24:04 -0300
Subject: [PATCH 04/14] self-review: address pass 3 findings

---
 src/composables/useDashboardSuggestions.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/composables/useDashboardSuggestions.ts b/src/composables/useDashboardSuggestions.ts
index b351d3fa..acf20526 100644
--- a/src/composables/useDashboardSuggestions.ts
+++ b/src/composables/useDashboardSuggestions.ts
@@ -43,11 +43,7 @@ export function useDashboardSuggestions(
     data: labelSets,
     execute: fetchLabelSets,
     isLoading: labelSetsLoading,
-  } = useDataApi<DashboardSuggestionLabelSet[]>(
-    null,
-    {},
-    { immediate: false },
-  );
+  } = useDataApi<DashboardSuggestionLabelSet[]>(null, {}, { immediate: false });
 
   const { execute: generateRequest, isLoading: generating } =
     useDataApi<SuggestionRun>(null, {}, { immediate: false });
@@ -84,7 +80,9 @@ export function useDashboardSuggestions(
       return;
     }
 
-    return fetchLabelSets(buildDashboardSuggestionLabelSetsEndpoint(sspId.value));
+    return fetchLabelSets(
+      buildDashboardSuggestionLabelSetsEndpoint(sspId.value),
+    );
   }
 
   async function generateSuggestions(

From d79b45945306f9806c290778a10098e7579aa9f7 Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Mon, 15 Jun 2026 13:35:23 -0300
Subject: [PATCH 05/14] fix: address review feedback

---
 .../__tests__/useDashboardSuggestions.spec.ts   | 17 +++++++++++++++++
 src/composables/useDashboardSuggestions.ts      |  9 ++++++++-
 src/views/dashboard/SuggestionsView.vue         |  4 ++--
 .../dashboard/__tests__/SuggestionsView.spec.ts | 16 ++++++++++++++++
 .../dashboard/partials/dashboard-suggestions.ts | 11 -----------
 5 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/composables/__tests__/useDashboardSuggestions.spec.ts b/src/composables/__tests__/useDashboardSuggestions.spec.ts
index 7aa1130f..ab46decb 100644
--- a/src/composables/__tests__/useDashboardSuggestions.spec.ts
+++ b/src/composables/__tests__/useDashboardSuggestions.spec.ts
@@ -75,4 +75,21 @@ describe('useSuggestionRunPoller', () => {
 
     scope.stop();
   });
+
+  it('keeps polling after a transient poll error', async () => {
+    mocks.execute
+      .mockRejectedValueOnce(new Error('temporary outage'))
+      .mockResolvedValueOnce(response('completed', 2, 'run-1'));
+
+    const scope = effectScope();
+    const poller = scope.run(() => useSuggestionRunPoller(ref('ssp-1')));
+
+    poller?.start();
+    await vi.advanceTimersByTimeAsync(3000);
+    await vi.advanceTimersByTimeAsync(3000);
+
+    expect(mocks.execute).toHaveBeenCalledTimes(2);
+
+    scope.stop();
+  });
 });
diff --git a/src/composables/useDashboardSuggestions.ts b/src/composables/useDashboardSuggestions.ts
index acf20526..138a0af0 100644
--- a/src/composables/useDashboardSuggestions.ts
+++ b/src/composables/useDashboardSuggestions.ts
@@ -187,9 +187,14 @@ export function useDashboardSuggestions(
   };
 }
 
+interface SuggestionRunPollerOptions {
+  stopOnPollError?: boolean;
+}
+
 export function useSuggestionRunPoller(
   sspId: Ref<string>,
   onPoll?: () => Promise<void> | void,
+  options: SuggestionRunPollerOptions = {},
 ) {
   const toast = useToast();
   const run = ref<SuggestionRun>();
@@ -263,7 +268,9 @@ export function useSuggestionRunPoller(
         });
       }
     } catch {
-      stop();
+      if (options.stopOnPollError) {
+        stop();
+      }
     }
   }
 
diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
index 8f60ca15..82bf63a1 100644
--- a/src/views/dashboard/SuggestionsView.vue
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -398,7 +398,7 @@ const { run, progressPercent, pollLatest, start } = useSuggestionRunPoller(
 );
 
 const sspTitle = computed(
-  () => systemSecurityPlan.value?.metadata.title ?? 'Selected SSP',
+  () => systemSecurityPlan.value?.metadata?.title ?? 'Selected SSP',
 );
 const runStatus = computed(() => run.value?.status ?? 'idle');
 const runStatusLabel = computed(() => {
@@ -413,7 +413,7 @@ const runStatusLabel = computed(() => {
 
 const controlOptions = computed(() =>
   (
-    systemSecurityPlan.value?.controlImplementation.implementedRequirements ??
+    systemSecurityPlan.value?.controlImplementation?.implementedRequirements ??
     []
   )
     .map((requirement: ImplementedRequirement) => ({
diff --git a/src/views/dashboard/__tests__/SuggestionsView.spec.ts b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
index 0d89ce3d..ad5872c1 100644
--- a/src/views/dashboard/__tests__/SuggestionsView.spec.ts
+++ b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
@@ -191,6 +191,22 @@ describe('SuggestionsView', () => {
     );
   });
 
+  it('refreshes and polls suggestions when the config is enabled', async () => {
+    state.aiEnabled = true;
+    state.aiFetched = false;
+    state.fetchConfig.mockImplementation(async () => {
+      state.aiFetched = true;
+      return true;
+    });
+
+    mountView();
+    await flushPromises();
+
+    expect(state.refreshLabelSets).toHaveBeenCalled();
+    expect(state.refreshHistorySuggestions).toHaveBeenCalled();
+    expect(state.pollLatest).toHaveBeenCalled();
+  });
+
   it('does not poll or refresh suggestions when the config is disabled', async () => {
     state.aiEnabled = false;
     state.aiFetched = false;
diff --git a/src/views/dashboard/partials/dashboard-suggestions.ts b/src/views/dashboard/partials/dashboard-suggestions.ts
index 669583e5..24e52518 100644
--- a/src/views/dashboard/partials/dashboard-suggestions.ts
+++ b/src/views/dashboard/partials/dashboard-suggestions.ts
@@ -106,13 +106,6 @@ export function buildLatestDashboardSuggestionRunEndpoint(
   return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestion-runs/latest`;
 }
 
-export function buildDashboardSuggestionRunEndpoint(
-  sspId: string,
-  runId: string,
-): string {
-  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestion-runs/${encodeURIComponent(runId)}`;
-}
-
 export function buildDashboardSuggestionsEndpoint(
   sspId: string,
   status?: string,
@@ -136,10 +129,6 @@ export function buildDashboardSuggestionEventsEndpoint(
   return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestions/${encodeURIComponent(suggestionId)}/events`;
 }
 
-export function getSuggestionId(suggestion: DashboardSuggestion): string {
-  return suggestion.uuid ?? suggestion.id;
-}
-
 export function formatLabelSet(labels: Record<string, string>): string[] {
   return Object.entries(labels).map(([key, value]) => `${key}=${value}`);
 }

From 3a06fda92374b35239061016b43a683ec5b73dfd Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 16 Jun 2026 06:01:02 -0300
Subject: [PATCH 06/14] fix: address review feedback

---
 .../ControlStatementImplementation.vue        | 40 ++++++++++++
 src/views/dashboard/IndexView.vue             | 61 +------------------
 src/views/dashboard/SuggestionsView.vue       |  2 +-
 .../dashboard/__tests__/IndexView.spec.ts     | 24 +-------
 .../__tests__/SuggestionsView.spec.ts         |  4 +-
 5 files changed, 47 insertions(+), 84 deletions(-)

diff --git a/src/views/control-implementations/partials/ControlStatementImplementation.vue b/src/views/control-implementations/partials/ControlStatementImplementation.vue
index c738f144..ed15a7d9 100644
--- a/src/views/control-implementations/partials/ControlStatementImplementation.vue
+++ b/src/views/control-implementations/partials/ControlStatementImplementation.vue
@@ -30,6 +30,7 @@ import SystemImplementationComponentCreateForm from '@/components/system-securit
 import DashboardEvidenceCounter from '@/views/control-implementations/partials/DashboardEvidenceCounter.vue';
 import TooltipTitle from '@/components/TooltipTitle.vue';
 import Message from '@/volt/Message.vue';
+import { useAiConfigStore } from '@/stores/ai-config';
 import ControlStatementMetadata from './ControlStatementMetadata.vue';
 import ControlStatementSuggestions from './ControlStatementSuggestions.vue';
 import ControlStatementByComponents from './ControlStatementByComponents.vue';
@@ -57,6 +58,7 @@ const { system } = useSystemStore();
 const toast = useToast();
 const router = useRouter();
 const axios = useAuthenticatedInstance();
+const aiConfig = useAiConfigStore();
 
 const showCreateStatementModal = ref(false);
 const showEditStatementModal = ref(false);
@@ -393,6 +395,8 @@ watch(selectedComponent, () => {
 });
 
 onMounted(() => {
+  void aiConfig.fetchDashboardSuggestionsConfig();
+
   if (!system.securityPlan?.uuid) {
     return;
   }
@@ -1199,6 +1203,17 @@ function viewDashboardEvidence(dashboard: DashboardWithControls) {
   }
 }
 
+function openDashboardSuggestions() {
+  if (!resolvedSspId.value || !aiConfig.dashboardSuggestionsEnabled) {
+    return;
+  }
+
+  router.push({
+    name: 'dashboards.suggestions',
+    params: { sspId: resolvedSspId.value },
+  });
+}
+
 // Get unique titles for the dropdown (only show each title once)
 const uniqueEvidenceTitles = computed(() => {
   const titleMap = new Map<string, SearchableEvidence>();
@@ -1420,6 +1435,31 @@ async function submitEvidenceLinking() {
         @apply-suggestion="applySuggestedComponent"
       />
 
+      <div
+        v-if="showComponentsSection && aiConfig.dashboardSuggestionsEnabled"
+        class="mt-6"
+      >
+        <PrimaryButton
+          :disabled="!resolvedSspId"
+          @click="openDashboardSuggestions"
+        >
+          AI dashboard suggestions
+        </PrimaryButton>
+      </div>
+
+      <Message
+        v-if="
+          showComponentsSection &&
+          aiConfig.dashboardSuggestionsConfigFetched &&
+          !aiConfig.dashboardSuggestionsEnabled
+        "
+        severity="warn"
+        variant="outlined"
+        class="mt-6"
+      >
+        AI is not configured, so dashboard suggestions cannot be generated.
+      </Message>
+
       <ControlStatementByComponents
         v-if="showComponentsSection && localStatement"
         :by-components="localStatement.byComponents || []"
diff --git a/src/views/dashboard/IndexView.vue b/src/views/dashboard/IndexView.vue
index cb4281d5..4a37cb94 100644
--- a/src/views/dashboard/IndexView.vue
+++ b/src/views/dashboard/IndexView.vue
@@ -6,16 +6,10 @@
       <PageHeader>Dashboards</PageHeader>
       <PageSubHeader>Findings grouped by query</PageSubHeader>
     </div>
-    <div class="flex gap-2">
+    <div>
       <RouterLink :to="{ name: 'dashboards.create' }">
         <PrimaryButton>Create</PrimaryButton>
       </RouterLink>
-      <SecondaryButton
-        v-if="aiConfig.dashboardSuggestionsEnabled"
-        @click="showSspPicker = true"
-      >
-        AI suggestions
-      </SecondaryButton>
     </div>
   </div>
 
@@ -77,32 +71,10 @@
       page
     </p>
   </Message>
-
-  <Dialog v-model:visible="showSspPicker" modal header="Select SSP" size="sm">
-    <div class="flex flex-col gap-2">
-      <label for="dashboard-suggestions-ssp">System Security Plan</label>
-      <Select
-        id="dashboard-suggestions-ssp"
-        v-model="selectedSspId"
-        :options="sspOptions"
-        optionLabel="label"
-        optionValue="value"
-        placeholder="Select an SSP"
-        class="w-full"
-      />
-    </div>
-    <template #footer>
-      <SecondaryButton @click="showSspPicker = false">Cancel</SecondaryButton>
-      <PrimaryButton :disabled="!selectedSspId" @click="openSuggestions">
-        Open suggestions
-      </PrimaryButton>
-    </template>
-  </Dialog>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { computed } from 'vue';
 import PageHeader from '@/components/PageHeader.vue';
 import PageCard from '@/components/PageCard.vue';
 import PageSubHeader from '@/components/PageSubHeader.vue';
@@ -114,18 +86,11 @@ import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'primevue/usetoast';
 import Button from '@/volt/Button.vue';
 import Chip from '@/volt/Chip.vue';
-import Dialog from '@/volt/Dialog.vue';
 import Message from '@/volt/Message.vue';
-import Select from '@/volt/Select.vue';
 import { useDataApi } from '@/composables/axios';
-import { useAiConfigStore } from '@/stores/ai-config';
 
-const router = useRouter();
 const confirm = useConfirm();
 const toast = useToast();
-const aiConfig = useAiConfigStore();
-const showSspPicker = ref(false);
-const selectedSspId = ref<string | null>(null);
 
 const { data: dashboards, execute: refreshDashboards } =
   useDataApi<Dashboard[]>('/api/filters');
@@ -141,13 +106,6 @@ const { execute: executeDelete } = useDataApi<void>(
   { immediate: false },
 );
 
-const sspOptions = computed(() =>
-  (systemSecurityPlans.value ?? []).map((ssp) => ({
-    label: ssp.metadata.title,
-    value: ssp.uuid,
-  })),
-);
-
 const sspTitleById = computed(
   () =>
     new Map(
@@ -191,21 +149,6 @@ const dashboardGroups = computed(() => {
   return sections.filter((section) => section.dashboards.length > 0);
 });
 
-onMounted(() => {
-  void aiConfig.fetchDashboardSuggestionsConfig();
-});
-
-function openSuggestions() {
-  if (!selectedSspId.value) {
-    return;
-  }
-  showSspPicker.value = false;
-  router.push({
-    name: 'dashboards.suggestions',
-    params: { sspId: selectedSspId.value },
-  });
-}
-
 function deleteDashboard(dashboard: Dashboard) {
   confirm.require({
     message: `Are you sure you want to delete the ${dashboard.name} dashboard ?`,
diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
index 82bf63a1..fea26e0a 100644
--- a/src/views/dashboard/SuggestionsView.vue
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -24,7 +24,7 @@
     variant="outlined"
     class="mt-4"
   >
-    Dashboard suggestions are disabled.
+    AI is not configured, so dashboard suggestions cannot be generated.
   </Message>
 
   <Message
diff --git a/src/views/dashboard/__tests__/IndexView.spec.ts b/src/views/dashboard/__tests__/IndexView.spec.ts
index f70ce5b1..37362ea1 100644
--- a/src/views/dashboard/__tests__/IndexView.spec.ts
+++ b/src/views/dashboard/__tests__/IndexView.spec.ts
@@ -8,26 +8,12 @@ const dashboards = shallowRef<Dashboard[]>([]);
 const systemSecurityPlans = shallowRef<SystemSecurityPlan[]>([]);
 
 const mocks = vi.hoisted(() => ({
-  aiEnabled: false,
-  fetchConfig: vi.fn(),
-  routerPush: vi.fn(),
   confirmRequire: vi.fn(),
   toastAdd: vi.fn(),
   refreshDashboards: vi.fn(),
   deleteDashboard: vi.fn(),
 }));
 
-vi.mock('@/stores/ai-config', () => ({
-  useAiConfigStore: () => ({
-    dashboardSuggestionsEnabled: mocks.aiEnabled,
-    fetchDashboardSuggestionsConfig: mocks.fetchConfig,
-  }),
-}));
-
-vi.mock('vue-router', () => ({
-  useRouter: () => ({ push: mocks.routerPush }),
-}));
-
 vi.mock('primevue/useconfirm', () => ({
   useConfirm: () => ({ require: mocks.confirmRequire }),
 }));
@@ -88,15 +74,10 @@ function mountView() {
         PageSubHeader: { template: '<p><slot /></p>' },
         PageCard: { template: '<section><slot /></section>' },
         Chip: { props: ['label'], template: '<span>{{ label }}</span>' },
-        Dialog: { template: '<div><slot /><slot name="footer" /></div>' },
         Message: { template: '<div><slot /></div>' },
         PrimaryButton: {
           template: '<button @click="$emit(\'click\')"><slot /></button>',
         },
-        SecondaryButton: {
-          template: '<button @click="$emit(\'click\')"><slot /></button>',
-        },
-        Select: { template: '<select />' },
         RouterLink: { props: ['to'], template: '<a><slot /></a>' },
       },
     },
@@ -106,12 +87,11 @@ function mountView() {
 describe('Dashboard IndexView', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    mocks.aiEnabled = false;
     dashboards.value = [];
     systemSecurityPlans.value = [];
   });
 
-  it('hides the AI suggestions entry point when the config probe is disabled', () => {
+  it('does not render the AI suggestions launcher on the global dashboard index', () => {
     dashboards.value = [makeDashboard('Global dashboard')];
     const wrapper = mountView();
 
@@ -120,7 +100,6 @@ describe('Dashboard IndexView', () => {
   });
 
   it('groups dashboards by global and owning SSP scopes', () => {
-    mocks.aiEnabled = true;
     dashboards.value = [
       makeDashboard('Global dashboard'),
       makeDashboard('Scoped dashboard', 'ssp-1'),
@@ -135,6 +114,5 @@ describe('Dashboard IndexView', () => {
     expect(
       wrapper.find('[data-testid="dashboard-group-ssp-1"]').text(),
     ).toContain('Payments SSP');
-    expect(wrapper.text()).toContain('AI suggestions');
   });
 });
diff --git a/src/views/dashboard/__tests__/SuggestionsView.spec.ts b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
index ad5872c1..1e8b826a 100644
--- a/src/views/dashboard/__tests__/SuggestionsView.spec.ts
+++ b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
@@ -220,7 +220,9 @@ describe('SuggestionsView', () => {
     await wrapper.vm.$forceUpdate();
     await nextTick();
 
-    expect(wrapper.text()).toContain('Dashboard suggestions are disabled.');
+    expect(wrapper.text()).toContain(
+      'AI is not configured, so dashboard suggestions cannot be generated.',
+    );
     expect(state.refreshLabelSets).not.toHaveBeenCalled();
     expect(state.refreshHistorySuggestions).not.toHaveBeenCalled();
     expect(state.pollLatest).not.toHaveBeenCalled();

From 2a99977662bcb7fe59ab075eebdf18d9273d2861 Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 16 Jun 2026 06:26:22 -0300
Subject: [PATCH 07/14] fix: address review feedback

---
 src/views/dashboard/SuggestionsView.vue       | 187 +++++++++++++++++-
 .../__tests__/SuggestionsView.spec.ts         |  79 +++++++-
 .../partials/SuggestionScopeDialog.vue        |  26 ++-
 .../__tests__/SuggestionScopeDialog.spec.ts   |  31 ++-
 4 files changed, 310 insertions(+), 13 deletions(-)

diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
index fea26e0a..ed70bb72 100644
--- a/src/views/dashboard/SuggestionsView.vue
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -322,18 +322,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import PageCard from '@/components/PageCard.vue';
 import PageHeader from '@/components/PageHeader.vue';
 import PageSubHeader from '@/components/PageSubHeader.vue';
-import type { ImplementedRequirement, SystemSecurityPlan } from '@/oscal';
-import { useDataApi } from '@/composables/axios';
+import type {
+  Catalog,
+  Control,
+  ImplementedRequirement,
+  SystemSecurityPlan,
+} from '@/oscal';
+import { useAuthenticatedInstance, useDataApi } from '@/composables/axios';
 import {
   useDashboardSuggestions,
   useSuggestionRunPoller,
 } from '@/composables/useDashboardSuggestions';
 import { useAiConfigStore } from '@/stores/ai-config';
+import type { DataResponse } from '@/stores/types';
 import Chip from '@/volt/Chip.vue';
 import Dialog from '@/volt/Dialog.vue';
 import Message from '@/volt/Message.vue';
@@ -352,6 +358,7 @@ import {
 const route = useRoute();
 const sspId = computed(() => String(route.params.sspId));
 const aiConfig = useAiConfigStore();
+const axios = useAuthenticatedInstance();
 const activeTab = ref<'pending' | 'history'>('pending');
 const showScopeDialog = ref(false);
 const showRejectDialog = ref(false);
@@ -362,6 +369,19 @@ const selectedSuggestionIds = ref<string[]>([]);
 const expandedReasoning = ref(new Set<string>());
 const auditEvents = ref<DashboardSuggestionEvent[]>([]);
 const scopeCeilingError = ref('');
+const controlTitleById = ref(new Map<string, string>());
+const controlProfileTitlesById = ref(new Map<string, string[]>());
+
+interface SspProfileBinding {
+  id?: string;
+  uuid?: string;
+  title: string;
+}
+
+interface ResolvedControlWithCatalog {
+  controlId: string;
+  title?: string;
+}
 
 const { data: systemSecurityPlan } = useDataApi<SystemSecurityPlan>(
   computed(() => `/api/oscal/system-security-plans/${sspId.value}/full`),
@@ -416,10 +436,21 @@ const controlOptions = computed(() =>
     systemSecurityPlan.value?.controlImplementation?.implementedRequirements ??
     []
   )
-    .map((requirement: ImplementedRequirement) => ({
-      label: requirement.controlId,
-      value: requirement.controlId,
-    }))
+    .map((requirement: ImplementedRequirement) => {
+      const title = controlTitleById.value.get(requirement.controlId);
+      const profileTitles =
+        controlProfileTitlesById.value.get(requirement.controlId) ?? [];
+      const titleLabel = title
+        ? `${requirement.controlId} - ${title}`
+        : requirement.controlId;
+      const profileLabel = profileTitles.length
+        ? ` (${profileTitles.join(', ')})`
+        : '';
+      return {
+        label: `${titleLabel}${profileLabel}`,
+        value: requirement.controlId,
+      };
+    })
     .sort((left, right) => left.label.localeCompare(right.label)),
 );
 
@@ -465,6 +496,23 @@ onMounted(async () => {
   }
 });
 
+watch(
+  () => [
+    sspId.value,
+    aiConfig.dashboardSuggestionsConfigFetched,
+    aiConfig.dashboardSuggestionsEnabled,
+  ],
+  ([, configFetched, enabled]) => {
+    if (!configFetched || !enabled) {
+      controlTitleById.value = new Map();
+      controlProfileTitlesById.value = new Map();
+      return;
+    }
+    void loadControlMetadata();
+  },
+  { immediate: true },
+);
+
 function groupTitle(suggestion: DashboardSuggestion | undefined) {
   if (!suggestion) {
     return 'Proposed dashboard';
@@ -476,6 +524,131 @@ function groupTitle(suggestion: DashboardSuggestion | undefined) {
   );
 }
 
+async function loadControlMetadata() {
+  controlTitleById.value = new Map();
+  controlProfileTitlesById.value = new Map();
+
+  if (!sspId.value) {
+    return;
+  }
+
+  controlTitleById.value = await loadCatalogControlTitles();
+
+  try {
+    const profilesResponse = await axios.get<DataResponse<SspProfileBinding[]>>(
+      `/api/oscal/system-security-plans/${encodeURIComponent(sspId.value)}/profiles`,
+    );
+    const profileBindings = profilesResponse.data?.data ?? [];
+    const resolvedProfileResults = await Promise.allSettled(
+      profileBindings
+        .map((profileBinding) => ({
+          uuid: profileBinding.uuid ?? profileBinding.id,
+          title: profileBinding.title,
+        }))
+        .filter(
+          (profileBinding): profileBinding is { uuid: string; title: string } =>
+            Boolean(profileBinding.uuid),
+        )
+        .map(async (profileBinding) => {
+          const response = await axios.get<
+            DataResponse<ResolvedControlWithCatalog[]>
+          >(
+            `/api/oscal/profiles/${encodeURIComponent(profileBinding.uuid)}/resolved-with-catalogs`,
+          );
+          return {
+            title: profileBinding.title,
+            controls: response.data?.data ?? [],
+          };
+        }),
+    );
+
+    const titles = new Map(controlTitleById.value);
+    const profileTitles = new Map<string, Set<string>>();
+
+    for (const result of resolvedProfileResults) {
+      if (result.status !== 'fulfilled') {
+        continue;
+      }
+
+      for (const control of result.value.controls) {
+        if (!control.controlId) {
+          continue;
+        }
+        if (control.title && !titles.has(control.controlId)) {
+          titles.set(control.controlId, control.title);
+        }
+        const profiles = profileTitles.get(control.controlId) ?? new Set();
+        profiles.add(result.value.title);
+        profileTitles.set(control.controlId, profiles);
+      }
+    }
+
+    controlTitleById.value = titles;
+    controlProfileTitlesById.value = new Map(
+      Array.from(profileTitles.entries()).map(([controlId, profiles]) => [
+        controlId,
+        Array.from(profiles).sort((left, right) => left.localeCompare(right)),
+      ]),
+    );
+  } catch {
+    controlProfileTitlesById.value = new Map();
+  }
+}
+
+async function loadCatalogControlTitles() {
+  const titles = new Map<string, string>();
+
+  try {
+    const catalogsResponse = await axios.get<DataResponse<Catalog[]>>(
+      '/api/oscal/catalogs',
+    );
+    const catalogIds = (catalogsResponse.data?.data ?? [])
+      .map((catalog) => catalog.uuid)
+      .filter(Boolean);
+    const catalogResults = await Promise.allSettled(
+      catalogIds.map((catalogId) =>
+        axios.get<DataResponse<Catalog>>(
+          `/api/oscal/catalogs/${encodeURIComponent(catalogId)}/full`,
+        ),
+      ),
+    );
+
+    for (const result of catalogResults) {
+      if (result.status !== 'fulfilled') {
+        continue;
+      }
+      collectControlTitles(result.value.data?.data, titles);
+    }
+  } catch {
+    return titles;
+  }
+
+  return titles;
+}
+
+function collectControlTitles(
+  catalog: Catalog | undefined,
+  titles: Map<string, string>,
+) {
+  for (const group of catalog?.groups ?? []) {
+    for (const control of group.controls ?? []) {
+      collectControlTitle(control, titles);
+    }
+  }
+  for (const control of catalog?.controls ?? []) {
+    collectControlTitle(control, titles);
+  }
+}
+
+function collectControlTitle(control: Control, titles: Map<string, string>) {
+  if (control.id && control.title && !titles.has(control.id)) {
+    titles.set(control.id, control.title);
+  }
+  for (const childControl of control.controls ?? []) {
+    collectControlTitle(childControl, titles);
+  }
+}
+
 function groupIds(group: { suggestions: DashboardSuggestion[] }) {
   return group.suggestions.map((suggestion) => suggestion.id);
 }
diff --git a/src/views/dashboard/__tests__/SuggestionsView.spec.ts b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
index 1e8b826a..70a0e15e 100644
--- a/src/views/dashboard/__tests__/SuggestionsView.spec.ts
+++ b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
@@ -2,6 +2,7 @@ import { flushPromises, mount } from '@vue/test-utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { nextTick } from 'vue';
 import type { SystemSecurityPlan } from '@/oscal';
+import SuggestionScopeDialog from '../partials/SuggestionScopeDialog.vue';
 
 const state = vi.hoisted(() => ({
   pendingSuggestions: { value: [] as unknown[] },
@@ -17,6 +18,7 @@ const state = vi.hoisted(() => ({
   refreshLabelSets: vi.fn(),
   pollLatest: vi.fn(),
   start: vi.fn(),
+  axiosGet: vi.fn(),
   fetchConfig: vi.fn(),
   aiEnabled: true,
   aiFetched: true,
@@ -39,6 +41,7 @@ vi.mock('@/stores/ai-config', () => ({
 }));
 
 vi.mock('@/composables/axios', () => ({
+  useAuthenticatedInstance: () => ({ get: state.axiosGet }),
   useDataApi: () => ({ data: state.ssp }),
 }));
 
@@ -77,7 +80,12 @@ function mountView() {
         PageCard: { template: '<section><slot /></section>' },
         Chip: { props: ['label'], template: '<span>{{ label }}</span>' },
         Message: { template: '<div><slot /></div>' },
-        SuggestionScopeDialog: { template: '<div />' },
+        SuggestionScopeDialog: {
+          name: 'SuggestionScopeDialog',
+          props: ['controls'],
+          template:
+            '<div><span v-for="control in controls" :key="control.value">{{ control.label }}</span></div>',
+        },
         Dialog: { template: '<div><slot /><slot name="footer" /></div>' },
         Textarea: {
           props: ['modelValue'],
@@ -110,7 +118,9 @@ describe('SuggestionsView', () => {
     state.ssp.value = {
       uuid: 'ssp-1',
       metadata: { title: 'Payments SSP' },
-      controlImplementation: { implementedRequirements: [] },
+      controlImplementation: {
+        implementedRequirements: [{ controlId: 'AC-1' }, { controlId: 'AC-2' }],
+      },
     } as unknown as SystemSecurityPlan;
     state.pendingSuggestions.value = [
       {
@@ -144,6 +154,53 @@ describe('SuggestionsView', () => {
     ];
     state.historySuggestions.value = [];
     state.fetchSuggestionEvents.mockResolvedValue([]);
+    state.axiosGet.mockImplementation(async (url: string) => {
+      if (url === '/api/oscal/catalogs') {
+        return {
+          data: {
+            data: [{ uuid: 'catalog-1', metadata: { title: 'Catalog' } }],
+          },
+        };
+      }
+      if (url === '/api/oscal/catalogs/catalog-1/full') {
+        return {
+          data: {
+            data: {
+              uuid: 'catalog-1',
+              metadata: { title: 'Catalog' },
+              groups: [
+                {
+                  id: 'ac',
+                  title: 'Access Control',
+                  controls: [
+                    { id: 'AC-1', title: 'Access control policy' },
+                    { id: 'AC-2', title: 'Account management' },
+                  ],
+                },
+              ],
+            },
+          },
+        };
+      }
+      if (url === '/api/oscal/system-security-plans/ssp-1/profiles') {
+        return {
+          data: {
+            data: [{ uuid: 'profile-1', title: 'Moderate Baseline' }],
+          },
+        };
+      }
+      if (url === '/api/oscal/profiles/profile-1/resolved-with-catalogs') {
+        return {
+          data: {
+            data: [
+              { controlId: 'AC-1', title: 'Access control policy' },
+              { controlId: 'AC-2', title: 'Account management' },
+            ],
+          },
+        };
+      }
+      throw new Error(`Unexpected axios get: ${url}`);
+    });
   });
 
   it('groups pending suggestions by labelSetHash and expands reasoning', async () => {
@@ -207,6 +264,24 @@ describe('SuggestionsView', () => {
     expect(state.pollLatest).toHaveBeenCalled();
   });
 
+  it('enriches scope control options with catalog titles and profile membership', async () => {
+    const wrapper = mountView();
+    await flushPromises();
+
+    const controls = wrapper
+      .findComponent(SuggestionScopeDialog)
+      .props('controls') as Array<{ label: string; value: string }>;
+
+    expect(controls).toContainEqual({
+      label: 'AC-1 - Access control policy (Moderate Baseline)',
+      value: 'AC-1',
+    });
+    expect(controls).toContainEqual({
+      label: 'AC-2 - Account management (Moderate Baseline)',
+      value: 'AC-2',
+    });
+  });
+
   it('does not poll or refresh suggestions when the config is disabled', async () => {
     state.aiEnabled = false;
     state.aiFetched = false;
diff --git a/src/views/dashboard/partials/SuggestionScopeDialog.vue b/src/views/dashboard/partials/SuggestionScopeDialog.vue
index 8062fd21..2708f6ce 100644
--- a/src/views/dashboard/partials/SuggestionScopeDialog.vue
+++ b/src/views/dashboard/partials/SuggestionScopeDialog.vue
@@ -24,8 +24,8 @@
         <label class="inline-block pb-2">Evidence label sets</label>
         <MultiSelect
           v-model="selectedLabelSetHashes"
-          :options="labelSets"
-          optionLabel="hash"
+          :options="labelSetOptions"
+          optionLabel="title"
           optionValue="hash"
           display="chip"
           filter
@@ -118,6 +118,10 @@ interface ControlOption {
   value: string;
 }
 
+type LabelSetOption = DashboardSuggestionLabelSet & {
+  title: string;
+};
+
 const props = defineProps<{
   visible: boolean;
   controls: ControlOption[];
@@ -155,6 +159,12 @@ const canGenerate = computed(
     !props.ceilingError &&
     (!requiresLargeRunConfirm.value || largeRunConfirmed.value),
 );
+const labelSetOptions = computed<LabelSetOption[]>(() =>
+  props.labelSets.map((labelSet) => ({
+    ...labelSet,
+    title: getLabelSetTitle(labelSet),
+  })),
+);
 
 watch(
   () => props.controls,
@@ -205,4 +215,16 @@ function submit() {
     scope: selectedScope(),
   });
 }
+
+function getLabelSetTitle(labelSet: DashboardSuggestionLabelSet) {
+  const sampleTitle = labelSet.sampleTitles?.find(
+    (title) => title.trim().length > 0,
+  );
+  if (sampleTitle) {
+    return sampleTitle;
+  }
+
+  const labelSummary = formatLabelSet(labelSet.labels ?? {}).join(', ');
+  return labelSummary || labelSet.hash;
+}
 </script>
diff --git a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
index 08bb37cd..7a289655 100644
--- a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
+++ b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
@@ -29,9 +29,10 @@ function mountDialog(props = {}) {
         Message: { template: '<div><slot /></div>' },
         MultiSelect: {
           name: 'MultiSelect',
-          props: ['modelValue'],
+          props: ['modelValue', 'options', 'optionLabel', 'optionValue'],
           emits: ['update:modelValue'],
-          template: '<div />',
+          template:
+            '<div><span v-for="option in options" :key="option[optionValue]">{{ option[optionLabel] }}</span></div>',
         },
         Checkbox: {
           name: 'Checkbox',
@@ -113,4 +114,30 @@ describe('SuggestionScopeDialog', () => {
 
     expect(wrapper.emitted('scope-change')).toBeTruthy();
   });
+
+  it('shows human label-set titles instead of selected hash labels', () => {
+    const wrapper = mountDialog({
+      labelSets: [
+        {
+          hash: 'opaque-hash',
+          labels: { env: 'prod', service: 'payments' },
+          evidenceCount: 2,
+          sampleTitles: ['Payment evidence'],
+        },
+        {
+          hash: 'fallback-hash',
+          labels: { env: 'stage' },
+          evidenceCount: 1,
+        },
+      ],
+    });
+
+    const labelSetSelector = wrapper.findAllComponents({
+      name: 'MultiSelect',
+    })[1];
+
+    expect(labelSetSelector.text()).toContain('Payment evidence');
+    expect(labelSetSelector.text()).toContain('env=stage');
+    expect(labelSetSelector.text()).not.toContain('opaque-hash');
+  });
 });

From 6986e73553dc8691f2b18d3aafd84b06d5868512 Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 16 Jun 2026 06:34:49 -0300
Subject: [PATCH 08/14] fix: address review feedback

---
 src/views/dashboard/SuggestionsView.vue       |   1 +
 .../partials/SuggestionScopeDialog.vue        | 127 +++++++++++++++---
 .../__tests__/SuggestionScopeDialog.spec.ts   | 112 ++++++++++++++-
 .../partials/dashboard-suggestions.ts         |  12 ++
 4 files changed, 232 insertions(+), 20 deletions(-)

diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
index ed70bb72..08611457 100644
--- a/src/views/dashboard/SuggestionsView.vue
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -260,6 +260,7 @@
   <SuggestionScopeDialog
     v-if="aiConfig.dashboardSuggestionsEnabled"
     v-model:visible="showScopeDialog"
+    :ssp-id="sspId"
     :controls="controlOptions"
     :labelSets="labelSets ?? []"
     :generating="generating"
diff --git a/src/views/dashboard/partials/SuggestionScopeDialog.vue b/src/views/dashboard/partials/SuggestionScopeDialog.vue
index 2708f6ce..0462ef7e 100644
--- a/src/views/dashboard/partials/SuggestionScopeDialog.vue
+++ b/src/views/dashboard/partials/SuggestionScopeDialog.vue
@@ -53,12 +53,19 @@
       </label>
 
       <Message
-        v-if="ceilingError"
+        v-if="scopeError"
         severity="error"
         variant="outlined"
         data-testid="scope-ceiling"
       >
-        {{ ceilingError }}
+        {{ scopeError }}
+      </Message>
+      <Message
+        v-else-if="previewLoading || !preview"
+        severity="info"
+        variant="outlined"
+      >
+        Loading suggestion estimate.
       </Message>
       <Message
         v-else-if="requiresLargeRunConfirm"
@@ -66,15 +73,15 @@
         variant="outlined"
         data-testid="scope-warning"
       >
-        This will make {{ plannedCalls }} AI calls covering
-        {{ selectedControls.length }} controls x
-        {{ selectedLabelSetHashes.length }} label-sets. These run as queued
-        background jobs and may take a while and incur API costs.
+        This will make {{ preview.plannedCalls }} AI calls covering
+        {{ preview.controlCount }} controls x {{ preview.labelSetCount }}
+        label-sets. These run as queued background jobs and may take a while and
+        incur API costs.
       </Message>
       <Message v-else severity="info" variant="outlined">
-        {{ plannedCalls }} AI calls covering
-        {{ selectedControls.length }} controls x
-        {{ selectedLabelSetHashes.length }} label-sets.
+        {{ preview.plannedCalls }} AI calls covering
+        {{ preview.controlCount }} controls x {{ preview.labelSetCount }}
+        label-sets.
       </Message>
 
       <label
@@ -107,11 +114,17 @@ import Chip from '@/volt/Chip.vue';
 import Dialog from '@/volt/Dialog.vue';
 import Message from '@/volt/Message.vue';
 import MultiSelect from '@/volt/MultiSelect.vue';
+import { useAuthenticatedInstance } from '@/composables/axios';
 import type {
+  DashboardSuggestionsPreview,
   DashboardSuggestionLabelSet,
   GenerateDashboardSuggestionsPayload,
 } from './dashboard-suggestions';
-import { formatLabelSet } from './dashboard-suggestions';
+import {
+  buildPreviewDashboardSuggestionsEndpoint,
+  formatLabelSet,
+} from './dashboard-suggestions';
+import type { DataResponse } from '@/stores/types';
 
 interface ControlOption {
   label: string;
@@ -124,6 +137,7 @@ type LabelSetOption = DashboardSuggestionLabelSet & {
 
 const props = defineProps<{
   visible: boolean;
+  sspId: string;
   controls: ControlOption[];
   labelSets: DashboardSuggestionLabelSet[];
   generating?: boolean;
@@ -140,23 +154,29 @@ const selectedControls = ref<string[]>([]);
 const selectedLabelSetHashes = ref<string[]>([]);
 const supersedePending = ref(true);
 const largeRunConfirmed = ref(false);
+const preview = ref<DashboardSuggestionsPreview | null>(null);
+const previewLoading = ref(false);
+const previewError = ref('');
 const warningThreshold = 25;
+const axios = useAuthenticatedInstance();
+let previewTimer: ReturnType<typeof setTimeout> | undefined;
+let latestPreviewRequestId = 0;
 
 const modelVisible = computed({
   get: () => props.visible,
   set: (visible: boolean) => emit('update:visible', visible),
 });
 
-const plannedCalls = computed(
-  () => selectedControls.value.length * selectedLabelSetHashes.value.length,
-);
 const requiresLargeRunConfirm = computed(
-  () => plannedCalls.value > warningThreshold,
+  () => (preview.value?.plannedCalls ?? 0) > warningThreshold,
 );
+const scopeError = computed(() => props.ceilingError || previewError.value);
 const canGenerate = computed(
   () =>
-    plannedCalls.value > 0 &&
-    !props.ceilingError &&
+    !!preview.value &&
+    preview.value.plannedCalls > 0 &&
+    !previewLoading.value &&
+    !scopeError.value &&
     (!requiresLargeRunConfirm.value || largeRunConfirmed.value),
 );
 const labelSetOptions = computed<LabelSetOption[]>(() =>
@@ -186,13 +206,31 @@ watch(
   [selectedControls, selectedLabelSetHashes],
   () => {
     largeRunConfirmed.value = false;
+    previewError.value = '';
     emit('scope-change');
+    schedulePreview();
   },
   { deep: true },
 );
 
-watch([plannedCalls, modelVisible], () => {
-  largeRunConfirmed.value = false;
+watch(
+  [modelVisible],
+  () => {
+    largeRunConfirmed.value = false;
+    schedulePreview();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.sspId,
+  () => {
+    schedulePreview();
+  },
+);
+
+watch([() => props.controls, () => props.labelSets], () => {
+  schedulePreview();
 });
 
 function selectedScope(): GenerateDashboardSuggestionsPayload['scope'] {
@@ -216,6 +254,59 @@ function submit() {
   });
 }
 
+function schedulePreview() {
+  const requestId = latestPreviewRequestId + 1;
+  latestPreviewRequestId = requestId;
+
+  if (previewTimer) {
+    clearTimeout(previewTimer);
+  }
+  preview.value = null;
+  previewError.value = '';
+
+  if (!modelVisible.value || !props.sspId) {
+    previewLoading.value = false;
+    return;
+  }
+
+  previewLoading.value = true;
+  previewTimer = setTimeout(() => {
+    void fetchPreview(requestId);
+  }, 250);
+}
+
+async function fetchPreview(requestId: number) {
+  try {
+    const scope = selectedScope();
+    const response = await axios.post<
+      DataResponse<DashboardSuggestionsPreview>
+    >(
+      buildPreviewDashboardSuggestionsEndpoint(props.sspId),
+      scope ? { scope } : {},
+    );
+    if (requestId !== latestPreviewRequestId) {
+      return;
+    }
+    preview.value = response.data.data;
+    previewError.value = '';
+  } catch (error) {
+    if (requestId !== latestPreviewRequestId) {
+      return;
+    }
+    const status = (error as { response?: { status?: number } }).response
+      ?.status;
+    preview.value = null;
+    previewError.value =
+      status === 422
+        ? 'The selected scope does not include any controls or label sets.'
+        : 'Unable to preview the selected suggestion scope.';
+  } finally {
+    if (requestId === latestPreviewRequestId) {
+      previewLoading.value = false;
+    }
+  }
+}
+
 function getLabelSetTitle(labelSet: DashboardSuggestionLabelSet) {
   const sampleTitle = labelSet.sampleTitles?.find(
     (title) => title.trim().length > 0,
diff --git a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
index 7a289655..024d2103 100644
--- a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
+++ b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
@@ -1,8 +1,21 @@
-import { mount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
+import { flushPromises, mount } from '@vue/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import SuggestionScopeDialog from '../SuggestionScopeDialog.vue';
 import type { DashboardSuggestionLabelSet } from '../dashboard-suggestions';
 
+const state = vi.hoisted(() => ({
+  axiosPost: vi.fn(),
+  preview: {
+    plannedCalls: undefined as number | undefined,
+    controlCount: undefined as number | undefined,
+    labelSetCount: undefined as number | undefined,
+  },
+}));
+
+vi.mock('@/composables/axios', () => ({
+  useAuthenticatedInstance: () => ({ post: state.axiosPost }),
+}));
+
 function makeLabelSet(hash: string): DashboardSuggestionLabelSet {
   return {
     hash,
@@ -15,6 +28,7 @@ function mountDialog(props = {}) {
   return mount(SuggestionScopeDialog, {
     props: {
       visible: true,
+      sspId: 'ssp-1',
       controls: [
         { label: 'AC-1', value: 'AC-1' },
         { label: 'AC-2', value: 'AC-2' },
@@ -54,19 +68,67 @@ function mountDialog(props = {}) {
   });
 }
 
+async function flushPreview() {
+  await flushPromises();
+  await vi.runOnlyPendingTimersAsync();
+  await flushPromises();
+}
+
 describe('SuggestionScopeDialog', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    state.preview = {
+      plannedCalls: undefined,
+      controlCount: undefined,
+      labelSetCount: undefined,
+    };
+    state.axiosPost.mockImplementation(async (_url: string, body: unknown) => {
+      const scope = (
+        body as {
+          scope?: { controlKeys?: string[]; labelSetHashes?: string[] };
+        }
+      )?.scope;
+      const controlCount =
+        state.preview.controlCount ?? scope?.controlKeys?.length ?? 2;
+      const labelSetCount =
+        state.preview.labelSetCount ?? scope?.labelSetHashes?.length ?? 2;
+      return {
+        data: {
+          data: {
+            plannedCalls:
+              state.preview.plannedCalls ?? controlCount * labelSetCount,
+            controlCount,
+            labelSetCount,
+          },
+        },
+      };
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('updates the live cost preview when scope selections change', async () => {
     const wrapper = mountDialog();
+    await flushPreview();
     expect(wrapper.text()).toContain('4 AI calls covering 2 controls x 2');
 
     await wrapper
       .findAllComponents({ name: 'MultiSelect' })[0]
       .vm.$emit('update:modelValue', ['AC-1']);
+    await flushPreview();
 
     expect(wrapper.text()).toContain('2 AI calls covering 1 controls x 2');
   });
 
   it('requires explicit confirmation for larger grids', async () => {
+    state.preview = {
+      plannedCalls: 30,
+      controlCount: 6,
+      labelSetCount: 5,
+    };
     const wrapper = mountDialog({
       controls: Array.from({ length: 6 }, (_, index) => ({
         label: `AC-${index}`,
@@ -76,6 +138,7 @@ describe('SuggestionScopeDialog', () => {
         makeLabelSet(`hash-${index}`),
       ),
     });
+    await flushPreview();
 
     expect(wrapper.text()).toContain('This will make 30 AI calls');
     expect(
@@ -97,6 +160,7 @@ describe('SuggestionScopeDialog', () => {
 
   it('surfaces the configured ceiling inline and blocks submission', async () => {
     const wrapper = mountDialog({ ceilingError: 'Maximum is 10 calls' });
+    await flushPreview();
 
     expect(wrapper.find('[data-testid="scope-ceiling"]').text()).toContain(
       'Maximum is 10 calls',
@@ -107,6 +171,7 @@ describe('SuggestionScopeDialog', () => {
 
   it('emits scope-change when the selected scope changes', async () => {
     const wrapper = mountDialog({ ceilingError: 'Maximum is 10 calls' });
+    await flushPreview();
 
     await wrapper
       .findAllComponents({ name: 'MultiSelect' })[0]
@@ -115,6 +180,49 @@ describe('SuggestionScopeDialog', () => {
     expect(wrapper.emitted('scope-change')).toBeTruthy();
   });
 
+  it('uses preview planned calls for large-run confirmation instead of local cartesian size', async () => {
+    state.preview = {
+      plannedCalls: 1,
+      controlCount: 16,
+      labelSetCount: 89,
+    };
+    const wrapper = mountDialog({
+      controls: Array.from({ length: 16 }, (_, index) => ({
+        label: `AC-${index}`,
+        value: `AC-${index}`,
+      })),
+      labelSets: Array.from({ length: 89 }, (_, index) =>
+        makeLabelSet(`hash-${index}`),
+      ),
+    });
+    await flushPreview();
+
+    expect(wrapper.text()).toContain('1 AI calls covering 16 controls x 89');
+    expect(wrapper.find('[data-testid="scope-confirm-large"]').exists()).toBe(
+      false,
+    );
+
+    await wrapper.find('[data-testid="scope-generate"]').trigger('click');
+    expect(wrapper.emitted('generate')?.at(-1)).toEqual([
+      {
+        supersedePending: true,
+        scope: undefined,
+      },
+    ]);
+  });
+
+  it('blocks generation when preview returns an empty resolved scope', async () => {
+    state.axiosPost.mockRejectedValueOnce({ response: { status: 422 } });
+    const wrapper = mountDialog();
+    await flushPreview();
+
+    expect(wrapper.find('[data-testid="scope-ceiling"]').text()).toContain(
+      'The selected scope does not include any controls or label sets.',
+    );
+    await wrapper.find('[data-testid="scope-generate"]').trigger('click');
+    expect(wrapper.emitted('generate')).toBeUndefined();
+  });
+
   it('shows human label-set titles instead of selected hash labels', () => {
     const wrapper = mountDialog({
       labelSets: [
diff --git a/src/views/dashboard/partials/dashboard-suggestions.ts b/src/views/dashboard/partials/dashboard-suggestions.ts
index 24e52518..6c00ad8f 100644
--- a/src/views/dashboard/partials/dashboard-suggestions.ts
+++ b/src/views/dashboard/partials/dashboard-suggestions.ts
@@ -28,6 +28,12 @@ export interface GenerateDashboardSuggestionsPayload {
   scope?: DashboardSuggestionScope;
 }
 
+export interface DashboardSuggestionsPreview {
+  plannedCalls: number;
+  controlCount: number;
+  labelSetCount: number;
+}
+
 export interface SuggestionRunFailure {
   controlKey?: string;
   labelSetHash?: string;
@@ -94,6 +100,12 @@ export function buildGenerateDashboardSuggestionsEndpoint(
   return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestions/generate`;
 }
 
+export function buildPreviewDashboardSuggestionsEndpoint(
+  sspId: string,
+): string {
+  return `${dashboardSuggestionsBaseEndpoint(sspId)}/dashboard-suggestions/preview`;
+}
+
 export function buildDashboardSuggestionLabelSetsEndpoint(
   sspId: string,
 ): string {

From 2b0524beb3799d55b6ae9cf5de7e144c565d1102 Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 16 Jun 2026 07:02:42 -0300
Subject: [PATCH 09/14] fix: address review feedback

---
 src/views/dashboard/SuggestionsView.vue       | 136 ++++++++++++++----
 .../__tests__/SuggestionsView.spec.ts         |  36 ++++-
 .../partials/SuggestionScopeDialog.vue        |  39 ++++-
 .../__tests__/SuggestionScopeDialog.spec.ts   |  41 +++++-
 4 files changed, 213 insertions(+), 39 deletions(-)

diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
index 08611457..2e40f6f0 100644
--- a/src/views/dashboard/SuggestionsView.vue
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -371,6 +371,7 @@ const expandedReasoning = ref(new Set<string>());
 const auditEvents = ref<DashboardSuggestionEvent[]>([]);
 const scopeCeilingError = ref('');
 const controlTitleById = ref(new Map<string, string>());
+const controlCatalogById = ref(new Map<string, string>());
 const controlProfileTitlesById = ref(new Map<string, string[]>());
 
 interface SspProfileBinding {
@@ -382,6 +383,7 @@ interface SspProfileBinding {
 interface ResolvedControlWithCatalog {
   controlId: string;
   title?: string;
+  catalogId?: string;
 }
 
 const { data: systemSecurityPlan } = useDataApi<SystemSecurityPlan>(
@@ -439,17 +441,19 @@ const controlOptions = computed(() =>
   )
     .map((requirement: ImplementedRequirement) => {
       const title = controlTitleById.value.get(requirement.controlId);
+      const catalogTitle = controlCatalogById.value.get(requirement.controlId);
       const profileTitles =
         controlProfileTitlesById.value.get(requirement.controlId) ?? [];
       const titleLabel = title
         ? `${requirement.controlId} - ${title}`
         : requirement.controlId;
-      const profileLabel = profileTitles.length
-        ? ` (${profileTitles.join(', ')})`
-        : '';
       return {
-        label: `${titleLabel}${profileLabel}`,
+        label: titleLabel,
         value: requirement.controlId,
+        controlId: requirement.controlId,
+        title,
+        catalogTitle,
+        profileTitles,
       };
     })
     .sort((left, right) => left.label.localeCompare(right.label)),
@@ -506,6 +510,7 @@ watch(
   ([, configFetched, enabled]) => {
     if (!configFetched || !enabled) {
       controlTitleById.value = new Map();
+      controlCatalogById.value = new Map();
       controlProfileTitlesById.value = new Map();
       return;
     }
@@ -527,14 +532,13 @@ function groupTitle(suggestion: DashboardSuggestion | undefined) {
 
 async function loadControlMetadata() {
   controlTitleById.value = new Map();
+  controlCatalogById.value = new Map();
   controlProfileTitlesById.value = new Map();
 
   if (!sspId.value) {
     return;
   }
 
-  controlTitleById.value = await loadCatalogControlTitles();
-
   try {
     const profilesResponse = await axios.get<DataResponse<SspProfileBinding[]>>(
       `/api/oscal/system-security-plans/${encodeURIComponent(sspId.value)}/profiles`,
@@ -564,6 +568,7 @@ async function loadControlMetadata() {
     );
 
     const titles = new Map(controlTitleById.value);
+    const controlCatalogIds = new Map<string, string>();
     const profileTitles = new Map<string, Set<string>>();
 
     for (const result of resolvedProfileResults) {
@@ -578,13 +583,21 @@ async function loadControlMetadata() {
         if (control.title && !titles.has(control.controlId)) {
           titles.set(control.controlId, control.title);
         }
+        if (control.catalogId && !controlCatalogIds.has(control.controlId)) {
+          controlCatalogIds.set(control.controlId, control.catalogId);
+        }
         const profiles = profileTitles.get(control.controlId) ?? new Set();
         profiles.add(result.value.title);
         profileTitles.set(control.controlId, profiles);
       }
     }
 
+    const catalogTitles = await loadCatalogControlTitles(
+      titles,
+      controlCatalogIds,
+    );
     controlTitleById.value = titles;
+    controlCatalogById.value = catalogTitles;
     controlProfileTitlesById.value = new Map(
       Array.from(profileTitles.entries()).map(([controlId, profiles]) => [
         controlId,
@@ -592,61 +605,130 @@ async function loadControlMetadata() {
       ]),
     );
   } catch {
+    const titles = new Map<string, string>();
+    const catalogTitles = await loadCatalogControlTitles(titles, new Map());
+    controlTitleById.value = titles;
+    controlCatalogById.value = catalogTitles;
     controlProfileTitlesById.value = new Map();
   }
 }
 
-async function loadCatalogControlTitles() {
-  const titles = new Map<string, string>();
+async function loadCatalogControlTitles(
+  titles: Map<string, string>,
+  controlCatalogIds: Map<string, string>,
+) {
+  const catalogTitles = new Map<string, string>();
+  const implementedControlIds = new Set(
+    systemSecurityPlan.value?.controlImplementation?.implementedRequirements
+      ?.map((requirement) => requirement.controlId)
+      .filter(Boolean) ?? [],
+  );
+  const missingControlIds = new Set(
+    Array.from(implementedControlIds).filter(
+      (controlId) => !titles.has(controlId),
+    ),
+  );
 
   try {
     const catalogsResponse = await axios.get<DataResponse<Catalog[]>>(
       '/api/oscal/catalogs',
     );
-    const catalogIds = (catalogsResponse.data?.data ?? [])
-      .map((catalog) => catalog.uuid)
-      .filter(Boolean);
-    const catalogResults = await Promise.allSettled(
-      catalogIds.map((catalogId) =>
-        axios.get<DataResponse<Catalog>>(
-          `/api/oscal/catalogs/${encodeURIComponent(catalogId)}/full`,
-        ),
-      ),
+    const catalogs = catalogsResponse.data?.data ?? [];
+    const catalogTitleByUuid = new Map(
+      catalogs
+        .filter((catalog) => catalog.uuid)
+        .map((catalog) => [catalog.uuid, catalog.metadata?.title ?? '']),
     );
 
-    for (const result of catalogResults) {
-      if (result.status !== 'fulfilled') {
-        continue;
+    for (const [controlId, catalogId] of controlCatalogIds) {
+      const catalogTitle = catalogTitleByUuid.get(catalogId);
+      if (catalogTitle) {
+        catalogTitles.set(controlId, catalogTitle);
+      }
+    }
+
+    const referencedCatalogIds = new Set(controlCatalogIds.values());
+    const catalogIds = catalogs
+      .map((catalog) => catalog.uuid)
+      .filter(
+        (catalogId) =>
+          catalogId &&
+          missingControlIds.size > 0 &&
+          (referencedCatalogIds.size === 0 ||
+            referencedCatalogIds.has(catalogId)),
+      );
+
+    for (const catalogId of catalogIds) {
+      const response = await axios.get<DataResponse<Catalog>>(
+        `/api/oscal/catalogs/${encodeURIComponent(catalogId)}/full`,
+      );
+      collectControlTitles(
+        response.data?.data,
+        titles,
+        catalogTitles,
+        missingControlIds,
+      );
+      if (missingControlIds.size === 0) {
+        break;
       }
-      collectControlTitles(result.value.data?.data, titles);
     }
   } catch {
-    return titles;
+    return catalogTitles;
   }
 
-  return titles;
+  return catalogTitles;
 }
 
 function collectControlTitles(
   catalog: Catalog | undefined,
   titles: Map<string, string>,
+  catalogTitles: Map<string, string>,
+  missingControlIds: Set<string>,
 ) {
   for (const group of catalog?.groups ?? []) {
     for (const control of group.controls ?? []) {
-      collectControlTitle(control, titles);
+      collectControlTitle(
+        control,
+        titles,
+        catalogTitles,
+        missingControlIds,
+        catalog,
+      );
     }
   }
   for (const control of catalog?.controls ?? []) {
-    collectControlTitle(control, titles);
+    collectControlTitle(
+      control,
+      titles,
+      catalogTitles,
+      missingControlIds,
+      catalog,
+    );
   }
 }
 
-function collectControlTitle(control: Control, titles: Map<string, string>) {
+function collectControlTitle(
+  control: Control,
+  titles: Map<string, string>,
+  catalogTitles: Map<string, string>,
+  missingControlIds: Set<string>,
+  catalog: Catalog | undefined,
+) {
   if (control.id && control.title && !titles.has(control.id)) {
     titles.set(control.id, control.title);
+    missingControlIds.delete(control.id);
+  }
+  if (control.id && catalog?.metadata?.title && !catalogTitles.has(control.id)) {
+    catalogTitles.set(control.id, catalog.metadata.title);
   }
   for (const childControl of control.controls ?? []) {
-    collectControlTitle(childControl, titles);
+    collectControlTitle(
+      childControl,
+      titles,
+      catalogTitles,
+      missingControlIds,
+      catalog,
+    );
   }
 }
 
diff --git a/src/views/dashboard/__tests__/SuggestionsView.spec.ts b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
index 70a0e15e..afe5ab28 100644
--- a/src/views/dashboard/__tests__/SuggestionsView.spec.ts
+++ b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
@@ -193,8 +193,16 @@ describe('SuggestionsView', () => {
         return {
           data: {
             data: [
-              { controlId: 'AC-1', title: 'Access control policy' },
-              { controlId: 'AC-2', title: 'Account management' },
+              {
+                controlId: 'AC-1',
+                title: 'Access control policy',
+                catalogId: 'catalog-1',
+              },
+              {
+                controlId: 'AC-2',
+                title: 'Account management',
+                catalogId: 'catalog-1',
+              },
             ],
           },
         };
@@ -270,16 +278,34 @@ describe('SuggestionsView', () => {
 
     const controls = wrapper
       .findComponent(SuggestionScopeDialog)
-      .props('controls') as Array<{ label: string; value: string }>;
+      .props('controls') as Array<{
+      label: string;
+      value: string;
+      controlId: string;
+      title: string;
+      catalogTitle: string;
+      profileTitles: string[];
+    }>;
 
     expect(controls).toContainEqual({
-      label: 'AC-1 - Access control policy (Moderate Baseline)',
+      label: 'AC-1 - Access control policy',
       value: 'AC-1',
+      controlId: 'AC-1',
+      title: 'Access control policy',
+      catalogTitle: 'Catalog',
+      profileTitles: ['Moderate Baseline'],
     });
     expect(controls).toContainEqual({
-      label: 'AC-2 - Account management (Moderate Baseline)',
+      label: 'AC-2 - Account management',
       value: 'AC-2',
+      controlId: 'AC-2',
+      title: 'Account management',
+      catalogTitle: 'Catalog',
+      profileTitles: ['Moderate Baseline'],
     });
+    expect(state.axiosGet).not.toHaveBeenCalledWith(
+      '/api/oscal/catalogs/catalog-1/full',
+    );
   });
 
   it('does not poll or refresh suggestions when the config is disabled', async () => {
diff --git a/src/views/dashboard/partials/SuggestionScopeDialog.vue b/src/views/dashboard/partials/SuggestionScopeDialog.vue
index 0462ef7e..4027be9a 100644
--- a/src/views/dashboard/partials/SuggestionScopeDialog.vue
+++ b/src/views/dashboard/partials/SuggestionScopeDialog.vue
@@ -17,7 +17,32 @@
           filter
           class="w-full"
           placeholder="All controls"
-        />
+        >
+          <template #option="{ option }">
+            <div class="flex flex-col gap-1">
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="font-medium">
+                  {{
+                    option.controlId && option.title
+                      ? `${option.controlId} - ${option.title}`
+                      : option.label
+                  }}
+                </span>
+                <Chip
+                  v-for="profileTitle in option.profileTitles ?? []"
+                  :key="profileTitle"
+                  :label="profileTitle"
+                />
+              </div>
+              <span
+                v-if="option.catalogTitle"
+                class="text-xs text-gray-500 dark:text-slate-400"
+              >
+                {{ option.catalogTitle }}
+              </span>
+            </div>
+          </template>
+        </MultiSelect>
       </div>
 
       <div>
@@ -108,7 +133,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 import Checkbox from 'primevue/checkbox';
 import Chip from '@/volt/Chip.vue';
 import Dialog from '@/volt/Dialog.vue';
@@ -129,6 +154,10 @@ import type { DataResponse } from '@/stores/types';
 interface ControlOption {
   label: string;
   value: string;
+  controlId?: string;
+  title?: string;
+  catalogTitle?: string;
+  profileTitles?: string[];
 }
 
 type LabelSetOption = DashboardSuggestionLabelSet & {
@@ -275,6 +304,12 @@ function schedulePreview() {
   }, 250);
 }
 
+onUnmounted(() => {
+  if (previewTimer) {
+    clearTimeout(previewTimer);
+  }
+});
+
 async function fetchPreview(requestId: number) {
   try {
     const scope = selectedScope();
diff --git a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
index 024d2103..a44687a3 100644
--- a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
+++ b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
@@ -30,7 +30,14 @@ function mountDialog(props = {}) {
       visible: true,
       sspId: 'ssp-1',
       controls: [
-        { label: 'AC-1', value: 'AC-1' },
+        {
+          label: 'AC-1 - Access control policy',
+          value: 'AC-1',
+          controlId: 'AC-1',
+          title: 'Access control policy',
+          catalogTitle: 'NIST SP 800-53 Rev 5',
+          profileTitles: ['Moderate Baseline'],
+        },
         { label: 'AC-2', value: 'AC-2' },
       ],
       labelSets: [makeLabelSet('hash-1'), makeLabelSet('hash-2')],
@@ -46,7 +53,7 @@ function mountDialog(props = {}) {
           props: ['modelValue', 'options', 'optionLabel', 'optionValue'],
           emits: ['update:modelValue'],
           template:
-            '<div><span v-for="option in options" :key="option[optionValue]">{{ option[optionLabel] }}</span></div>',
+            '<div><div v-for="option in options" :key="option[optionValue]"><slot name="option" :option="option">{{ option[optionLabel] }}</slot></div></div>',
         },
         Checkbox: {
           name: 'Checkbox',
@@ -180,6 +187,26 @@ describe('SuggestionScopeDialog', () => {
     expect(wrapper.emitted('scope-change')).toBeTruthy();
   });
 
+  it('renders controls with catalog and profile metadata in dropdown options', () => {
+    const wrapper = mountDialog();
+    const controlSelector = wrapper.findAllComponents({
+      name: 'MultiSelect',
+    })[0];
+
+    expect(controlSelector.text()).toContain('AC-1 - Access control policy');
+    expect(controlSelector.text()).toContain('NIST SP 800-53 Rev 5');
+    expect(controlSelector.text()).toContain('Moderate Baseline');
+  });
+
+  it('clears the pending preview timer on unmount', async () => {
+    const wrapper = mountDialog();
+
+    wrapper.unmount();
+    await vi.runOnlyPendingTimersAsync();
+
+    expect(state.axiosPost).not.toHaveBeenCalled();
+  });
+
   it('uses preview planned calls for large-run confirmation instead of local cartesian size', async () => {
     state.preview = {
       plannedCalls: 1,
@@ -243,9 +270,13 @@ describe('SuggestionScopeDialog', () => {
     const labelSetSelector = wrapper.findAllComponents({
       name: 'MultiSelect',
     })[1];
+    const labelSetOptions = labelSetSelector.props('options') as Array<{
+      title: string;
+    }>;
 
-    expect(labelSetSelector.text()).toContain('Payment evidence');
-    expect(labelSetSelector.text()).toContain('env=stage');
-    expect(labelSetSelector.text()).not.toContain('opaque-hash');
+    expect(labelSetOptions.map((option) => option.title)).toEqual([
+      'Payment evidence',
+      'env=stage',
+    ]);
   });
 });

From e93df1d79f5fb9b1cf913e254da843fe3313fe1b Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 16 Jun 2026 07:04:31 -0300
Subject: [PATCH 10/14] fix: CI failures

---
 src/views/dashboard/SuggestionsView.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
index 2e40f6f0..1842943a 100644
--- a/src/views/dashboard/SuggestionsView.vue
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -718,7 +718,11 @@ function collectControlTitle(
     titles.set(control.id, control.title);
     missingControlIds.delete(control.id);
   }
-  if (control.id && catalog?.metadata?.title && !catalogTitles.has(control.id)) {
+  if (
+    control.id &&
+    catalog?.metadata?.title &&
+    !catalogTitles.has(control.id)
+  ) {
     catalogTitles.set(control.id, catalog.metadata.title);
   }
   for (const childControl of control.controls ?? []) {

From 6b3e3ce072c0fadabe65a52f4aa218129f3b9dc2 Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 16 Jun 2026 07:31:38 -0300
Subject: [PATCH 11/14] fix: address review feedback

---
 src/views/dashboard/SuggestionsView.vue       | 41 +++++++++++--------
 .../__tests__/SuggestionsView.spec.ts         |  8 ++--
 .../partials/SuggestionScopeDialog.vue        | 21 ++++++----
 .../__tests__/SuggestionScopeDialog.spec.ts   |  3 ++
 4 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
index 1842943a..b5ae0f81 100644
--- a/src/views/dashboard/SuggestionsView.vue
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -440,10 +440,11 @@ const controlOptions = computed(() =>
     []
   )
     .map((requirement: ImplementedRequirement) => {
-      const title = controlTitleById.value.get(requirement.controlId);
-      const catalogTitle = controlCatalogById.value.get(requirement.controlId);
+      const controlKey = normalizeControlId(requirement.controlId);
+      const title = controlTitleById.value.get(controlKey);
+      const catalogTitle = controlCatalogById.value.get(controlKey);
       const profileTitles =
-        controlProfileTitlesById.value.get(requirement.controlId) ?? [];
+        controlProfileTitlesById.value.get(controlKey) ?? [];
       const titleLabel = title
         ? `${requirement.controlId} - ${title}`
         : requirement.controlId;
@@ -530,6 +531,10 @@ function groupTitle(suggestion: DashboardSuggestion | undefined) {
   );
 }
 
+function normalizeControlId(controlId?: string) {
+  return (controlId ?? '').toLowerCase();
+}
+
 async function loadControlMetadata() {
   controlTitleById.value = new Map();
   controlCatalogById.value = new Map();
@@ -577,18 +582,19 @@ async function loadControlMetadata() {
       }
 
       for (const control of result.value.controls) {
-        if (!control.controlId) {
+        const controlKey = normalizeControlId(control.controlId);
+        if (!controlKey) {
           continue;
         }
-        if (control.title && !titles.has(control.controlId)) {
-          titles.set(control.controlId, control.title);
+        if (control.title && !titles.has(controlKey)) {
+          titles.set(controlKey, control.title);
         }
-        if (control.catalogId && !controlCatalogIds.has(control.controlId)) {
-          controlCatalogIds.set(control.controlId, control.catalogId);
+        if (control.catalogId && !controlCatalogIds.has(controlKey)) {
+          controlCatalogIds.set(controlKey, control.catalogId);
         }
-        const profiles = profileTitles.get(control.controlId) ?? new Set();
+        const profiles = profileTitles.get(controlKey) ?? new Set();
         profiles.add(result.value.title);
-        profileTitles.set(control.controlId, profiles);
+        profileTitles.set(controlKey, profiles);
       }
     }
 
@@ -620,7 +626,7 @@ async function loadCatalogControlTitles(
   const catalogTitles = new Map<string, string>();
   const implementedControlIds = new Set(
     systemSecurityPlan.value?.controlImplementation?.implementedRequirements
-      ?.map((requirement) => requirement.controlId)
+      ?.map((requirement) => normalizeControlId(requirement.controlId))
       .filter(Boolean) ?? [],
   );
   const missingControlIds = new Set(
@@ -714,16 +720,17 @@ function collectControlTitle(
   missingControlIds: Set<string>,
   catalog: Catalog | undefined,
 ) {
-  if (control.id && control.title && !titles.has(control.id)) {
-    titles.set(control.id, control.title);
-    missingControlIds.delete(control.id);
+  const controlKey = normalizeControlId(control.id);
+  if (controlKey && control.title && !titles.has(controlKey)) {
+    titles.set(controlKey, control.title);
+    missingControlIds.delete(controlKey);
   }
   if (
-    control.id &&
+    controlKey &&
     catalog?.metadata?.title &&
-    !catalogTitles.has(control.id)
+    !catalogTitles.has(controlKey)
   ) {
-    catalogTitles.set(control.id, catalog.metadata.title);
+    catalogTitles.set(controlKey, catalog.metadata.title);
   }
   for (const childControl of control.controls ?? []) {
     collectControlTitle(
diff --git a/src/views/dashboard/__tests__/SuggestionsView.spec.ts b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
index afe5ab28..839b784f 100644
--- a/src/views/dashboard/__tests__/SuggestionsView.spec.ts
+++ b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
@@ -119,7 +119,7 @@ describe('SuggestionsView', () => {
       uuid: 'ssp-1',
       metadata: { title: 'Payments SSP' },
       controlImplementation: {
-        implementedRequirements: [{ controlId: 'AC-1' }, { controlId: 'AC-2' }],
+        implementedRequirements: [{ controlId: 'ac-1' }, { controlId: 'AC-2' }],
       },
     } as unknown as SystemSecurityPlan;
     state.pendingSuggestions.value = [
@@ -288,9 +288,9 @@ describe('SuggestionsView', () => {
     }>;
 
     expect(controls).toContainEqual({
-      label: 'AC-1 - Access control policy',
-      value: 'AC-1',
-      controlId: 'AC-1',
+      label: 'ac-1 - Access control policy',
+      value: 'ac-1',
+      controlId: 'ac-1',
       title: 'Access control policy',
       catalogTitle: 'Catalog',
       profileTitles: ['Moderate Baseline'],
diff --git a/src/views/dashboard/partials/SuggestionScopeDialog.vue b/src/views/dashboard/partials/SuggestionScopeDialog.vue
index 4027be9a..9ac8c628 100644
--- a/src/views/dashboard/partials/SuggestionScopeDialog.vue
+++ b/src/views/dashboard/partials/SuggestionScopeDialog.vue
@@ -58,15 +58,20 @@
           placeholder="All label sets"
         >
           <template #option="{ option }">
-            <div class="flex flex-wrap items-center gap-2">
-              <Chip
-                v-for="label in formatLabelSet(option.labels)"
-                :key="label"
-                :label="label"
-              />
-              <span class="text-sm text-zinc-500">
-                {{ option.evidenceCount }} evidence
+            <div class="flex flex-col gap-1">
+              <span class="font-medium">
+                {{ option.title || getLabelSetTitle(option) }}
               </span>
+              <div
+                class="flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-slate-400"
+              >
+                <Chip
+                  v-for="label in formatLabelSet(option.labels)"
+                  :key="label"
+                  :label="label"
+                />
+                <span>{{ option.evidenceCount }} evidence</span>
+              </div>
             </div>
           </template>
         </MultiSelect>
diff --git a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
index a44687a3..e0310025 100644
--- a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
+++ b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
@@ -278,5 +278,8 @@ describe('SuggestionScopeDialog', () => {
       'Payment evidence',
       'env=stage',
     ]);
+    expect(labelSetSelector.text()).toContain('Payment evidence');
+    expect(labelSetSelector.text()).toContain('env=prod');
+    expect(labelSetSelector.text()).toContain('2 evidence');
   });
 });

From 582bf6d9dc6b942cd16112e6e673e9c19634f03f Mon Sep 17 00:00:00 2001
From: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
Date: Tue, 16 Jun 2026 08:41:57 -0300
Subject: [PATCH 12/14] fix: small fixes on forms, labels, and display as whole

Signed-off-by: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
---
 src/composables/axios/index.ts                | 15 +++++++++-
 src/composables/useDashboardSuggestions.ts    |  3 ++
 .../partials/SuggestionScopeDialog.vue        | 29 ++++++++++++++-----
 .../partials/dashboard-suggestions.ts         |  9 ++++++
 4 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/src/composables/axios/index.ts b/src/composables/axios/index.ts
index 21db1cf0..756bcdad 100644
--- a/src/composables/axios/index.ts
+++ b/src/composables/axios/index.ts
@@ -14,6 +14,15 @@ import { useAxios } from '@vueuse/integrations/useAxios';
 import camelcaseKeys from 'camelcase-keys';
 import { default as _decamelizeKeys } from 'decamelize-keys';
 
+declare module 'axios' {
+  interface AxiosRequestConfig {
+    // Object paths whose child keys should be left untouched by the response
+    // camelcase conversion (e.g. arbitrary label maps that may use snake_case
+    // or `_`-prefixed keys we need to preserve verbatim).
+    camelcaseStopPaths?: readonly string[];
+  }
+}
+
 const useAuthenticatedInstance = () => {
   const userStore = useUserStore();
   const configStore = useConfigStore();
@@ -62,7 +71,11 @@ const useAuthenticatedInstance = () => {
       // Brute force camelcase conversion. OSCAL apis are all kebab-case so should be converted to
       // camel case, but any manually written APIs will be camel case and therefore won't change
       if (response.data) {
-        response.data = camelcaseKeys(response.data, { deep: true });
+        const stopPaths = response.config?.camelcaseStopPaths;
+        response.data = camelcaseKeys(response.data, {
+          deep: true,
+          ...(stopPaths ? { stopPaths: [...stopPaths] } : {}),
+        });
       }
       return response;
     },
diff --git a/src/composables/useDashboardSuggestions.ts b/src/composables/useDashboardSuggestions.ts
index 138a0af0..bca8279e 100644
--- a/src/composables/useDashboardSuggestions.ts
+++ b/src/composables/useDashboardSuggestions.ts
@@ -82,6 +82,9 @@ export function useDashboardSuggestions(
 
     return fetchLabelSets(
       buildDashboardSuggestionLabelSetsEndpoint(sspId.value),
+      // Preserve raw label keys (e.g. `_agent`, `_plugin`) so the UI can filter
+      // out internal labels; otherwise camelcase conversion strips the `_`.
+      { camelcaseStopPaths: ['data.labels'] },
     );
   }
 
diff --git a/src/views/dashboard/partials/SuggestionScopeDialog.vue b/src/views/dashboard/partials/SuggestionScopeDialog.vue
index 9ac8c628..6838a414 100644
--- a/src/views/dashboard/partials/SuggestionScopeDialog.vue
+++ b/src/views/dashboard/partials/SuggestionScopeDialog.vue
@@ -66,11 +66,14 @@
                 class="flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-slate-400"
               >
                 <Chip
-                  v-for="label in formatLabelSet(option.labels)"
+                  v-for="label in option.displayLabels"
                   :key="label"
                   :label="label"
                 />
-                <span>{{ option.evidenceCount }} evidence</span>
+                <span v-if="option.hiddenLabelCount > 0">
+                  {{ option.hiddenLabelCount }} more
+                  {{ option.hiddenLabelCount === 1 ? 'label' : 'labels' }}
+                </span>
               </div>
             </div>
           </template>
@@ -152,7 +155,7 @@ import type {
 } from './dashboard-suggestions';
 import {
   buildPreviewDashboardSuggestionsEndpoint,
-  formatLabelSet,
+  formatVisibleLabelSet,
 } from './dashboard-suggestions';
 import type { DataResponse } from '@/stores/types';
 
@@ -167,8 +170,13 @@ interface ControlOption {
 
 type LabelSetOption = DashboardSuggestionLabelSet & {
   title: string;
+  displayLabels: string[];
+  hiddenLabelCount: number;
 };
 
+// Max non-internal labels shown per label set before collapsing into a count.
+const MAX_VISIBLE_LABELS = 5;
+
 const props = defineProps<{
   visible: boolean;
   sspId: string;
@@ -214,10 +222,15 @@ const canGenerate = computed(
     (!requiresLargeRunConfirm.value || largeRunConfirmed.value),
 );
 const labelSetOptions = computed<LabelSetOption[]>(() =>
-  props.labelSets.map((labelSet) => ({
-    ...labelSet,
-    title: getLabelSetTitle(labelSet),
-  })),
+  props.labelSets.map((labelSet) => {
+    const visibleLabels = formatVisibleLabelSet(labelSet.labels ?? {});
+    return {
+      ...labelSet,
+      title: getLabelSetTitle(labelSet),
+      displayLabels: visibleLabels.slice(0, MAX_VISIBLE_LABELS),
+      hiddenLabelCount: Math.max(0, visibleLabels.length - MAX_VISIBLE_LABELS),
+    };
+  }),
 );
 
 watch(
@@ -355,7 +368,7 @@ function getLabelSetTitle(labelSet: DashboardSuggestionLabelSet) {
     return sampleTitle;
   }
 
-  const labelSummary = formatLabelSet(labelSet.labels ?? {}).join(', ');
+  const labelSummary = formatVisibleLabelSet(labelSet.labels ?? {}).join(', ');
   return labelSummary || labelSet.hash;
 }
 </script>
diff --git a/src/views/dashboard/partials/dashboard-suggestions.ts b/src/views/dashboard/partials/dashboard-suggestions.ts
index 6c00ad8f..b3dc0158 100644
--- a/src/views/dashboard/partials/dashboard-suggestions.ts
+++ b/src/views/dashboard/partials/dashboard-suggestions.ts
@@ -145,6 +145,15 @@ export function formatLabelSet(labels: Record<string, string>): string[] {
   return Object.entries(labels).map(([key, value]) => `${key}=${value}`);
 }
 
+// Labels whose key starts with `_` are internal and hidden from the UI.
+export function formatVisibleLabelSet(
+  labels: Record<string, string>,
+): string[] {
+  return Object.entries(labels)
+    .filter(([key]) => !key.startsWith('_'))
+    .map(([key, value]) => `${key}=${value}`);
+}
+
 export function isRunActive(run: SuggestionRun | undefined): boolean {
   return run?.status === 'pending' || run?.status === 'running';
 }

From 9275bfa907e23d393bbaf2dff7d865535c935dd6 Mon Sep 17 00:00:00 2001
From: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
Date: Tue, 16 Jun 2026 09:03:58 -0300
Subject: [PATCH 13/14] fix: tests

Signed-off-by: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
---
 .../dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
index e0310025..699fc531 100644
--- a/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
+++ b/src/views/dashboard/partials/__tests__/SuggestionScopeDialog.spec.ts
@@ -280,6 +280,7 @@ describe('SuggestionScopeDialog', () => {
     ]);
     expect(labelSetSelector.text()).toContain('Payment evidence');
     expect(labelSetSelector.text()).toContain('env=prod');
-    expect(labelSetSelector.text()).toContain('2 evidence');
+    // Evidence counts are no longer rendered (label sets are 1-for-1 with evidence).
+    expect(labelSetSelector.text()).not.toContain('2 evidence');
   });
 });

From f56e6cd8b909e4017585505eb13e6e38e05c664b Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 16 Jun 2026 09:34:06 -0300
Subject: [PATCH 14/14] fix: address review feedback

---
 src/composables/useDashboardSuggestions.ts    |  2 ++
 src/views/dashboard/SuggestionsView.vue       | 33 ++++++++++++++-----
 .../__tests__/SuggestionsView.spec.ts         | 25 +++++++++++---
 .../partials/dashboard-suggestions.ts         |  3 +-
 4 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/composables/useDashboardSuggestions.ts b/src/composables/useDashboardSuggestions.ts
index bca8279e..42e0e191 100644
--- a/src/composables/useDashboardSuggestions.ts
+++ b/src/composables/useDashboardSuggestions.ts
@@ -72,6 +72,7 @@ export function useDashboardSuggestions(
 
     return fetchPendingSuggestions(
       buildDashboardSuggestionsEndpoint(sspId.value, 'pending'),
+      { camelcaseStopPaths: ['data.labelSet'] },
     );
   }
 
@@ -131,6 +132,7 @@ export function useDashboardSuggestions(
     for (const status of statuses) {
       const response = await fetchHistoryRequest(
         buildDashboardSuggestionsEndpoint(sspId.value, status),
+        { camelcaseStopPaths: ['data.labelSet'] },
       );
       collected.push(...(response?.data.value?.data ?? []));
     }
diff --git a/src/views/dashboard/SuggestionsView.vue b/src/views/dashboard/SuggestionsView.vue
index b5ae0f81..ae64b035 100644
--- a/src/views/dashboard/SuggestionsView.vue
+++ b/src/views/dashboard/SuggestionsView.vue
@@ -133,9 +133,16 @@
                 v-if="group.suggestions[0]?.action === 'extend'"
                 :label="`Extends: ${group.suggestions[0].targetFilterName ?? 'dashboard'}`"
               />
-              <span class="text-sm text-zinc-500">
+              <RouterLink
+                :to="{
+                  name: 'evidence:index',
+                  query: { filter: group.labels.join(' and ') },
+                }"
+                class="text-sm text-zinc-500 hover:underline focus-visible:underline"
+                :title="group.sampleTitles.slice(0, 3).join('\n')"
+              >
                 {{ group.evidenceCount }} matched evidence
-              </span>
+              </RouterLink>
             </div>
             <div class="mt-2 flex flex-wrap gap-2">
               <Chip v-for="label in group.labels" :key="label" :label="label" />
@@ -324,7 +331,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { RouterLink, useRoute } from 'vue-router';
 import PageCard from '@/components/PageCard.vue';
 import PageHeader from '@/components/PageHeader.vue';
 import PageSubHeader from '@/components/PageSubHeader.vue';
@@ -460,6 +467,13 @@ const controlOptions = computed(() =>
     .sort((left, right) => left.label.localeCompare(right.label)),
 );
 
+const labelSetByHash = computed(
+  () =>
+    new Map(
+      (labelSets.value ?? []).map((labelSet) => [labelSet.hash, labelSet]),
+    ),
+);
+
 const pendingGroups = computed(() => {
   const groups = new Map<
     string,
@@ -467,21 +481,22 @@ const pendingGroups = computed(() => {
       hash: string;
       labels: string[];
       evidenceCount: number;
+      sampleTitles: string[];
       suggestions: DashboardSuggestion[];
     }
   >();
 
   for (const suggestion of pendingSuggestions.value ?? []) {
+    const matched = labelSetByHash.value.get(suggestion.labelSetHash);
     const group = groups.get(suggestion.labelSetHash) ?? {
       hash: suggestion.labelSetHash,
-      labels: formatLabelSet(suggestion.labels ?? {}),
-      evidenceCount: suggestion.evidenceCount ?? 0,
+      labels: formatLabelSet(
+        matched?.labels ?? suggestion.labelSet ?? suggestion.labels ?? {},
+      ),
+      evidenceCount: matched?.evidenceCount ?? 0,
+      sampleTitles: matched?.sampleTitles ?? [],
       suggestions: [],
     };
-    group.evidenceCount = Math.max(
-      group.evidenceCount,
-      suggestion.evidenceCount ?? 0,
-    );
     group.suggestions.push(suggestion);
     groups.set(suggestion.labelSetHash, group);
   }
diff --git a/src/views/dashboard/__tests__/SuggestionsView.spec.ts b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
index 839b784f..8c4543b7 100644
--- a/src/views/dashboard/__tests__/SuggestionsView.spec.ts
+++ b/src/views/dashboard/__tests__/SuggestionsView.spec.ts
@@ -25,6 +25,10 @@ const state = vi.hoisted(() => ({
 }));
 
 vi.mock('vue-router', () => ({
+  RouterLink: {
+    props: ['to'],
+    template: '<a :data-to="JSON.stringify(to)"><slot /></a>',
+  },
   useRoute: () => ({ params: { sspId: 'ssp-1' } }),
 }));
 
@@ -129,13 +133,11 @@ describe('SuggestionsView', () => {
         controlId: 'AC-1',
         controlTitle: 'Access control policy',
         labelSetHash: 'hash-1',
-        labels: { env: 'prod' },
         confidence: 0.91,
         controlFitReasoning: 'Fits AC-1',
         systemRelevanceReasoning: 'Relevant to payments',
         action: 'create',
         proposedFilterName: 'Production access',
-        evidenceCount: 3,
       },
       {
         id: 'sug-2',
@@ -143,13 +145,19 @@ describe('SuggestionsView', () => {
         controlId: 'AC-2',
         controlTitle: 'Account management',
         labelSetHash: 'hash-1',
-        labels: { env: 'prod' },
         confidence: 0.8,
         controlFitReasoning: 'Fits AC-2',
         systemRelevanceReasoning: 'Relevant to accounts',
         action: 'create',
         proposedFilterName: 'Production access',
-        evidenceCount: 3,
+      },
+    ];
+    state.labelSets.value = [
+      {
+        hash: 'hash-1',
+        labels: { _agent: 'scanner', env: 'prod' },
+        evidenceCount: 7,
+        sampleTitles: ['Scanner evidence'],
       },
     ];
     state.historySuggestions.value = [];
@@ -219,6 +227,15 @@ describe('SuggestionsView', () => {
     );
     expect(wrapper.text()).toContain('Production access');
     expect(wrapper.text()).toContain('AC-1');
+    expect(wrapper.text()).toContain('_agent=scanner');
+    expect(wrapper.text()).toContain('env=prod');
+
+    const evidenceLink = wrapper.find('a[data-to]');
+    expect(evidenceLink.text()).toContain('7 matched evidence');
+    expect(JSON.parse(evidenceLink.attributes('data-to') ?? '{}')).toEqual({
+      name: 'evidence:index',
+      query: { filter: '_agent=scanner and env=prod' },
+    });
 
     const reasoningButton = wrapper
       .findAll('button')
diff --git a/src/views/dashboard/partials/dashboard-suggestions.ts b/src/views/dashboard/partials/dashboard-suggestions.ts
index b3dc0158..4cc16854 100644
--- a/src/views/dashboard/partials/dashboard-suggestions.ts
+++ b/src/views/dashboard/partials/dashboard-suggestions.ts
@@ -61,7 +61,8 @@ export interface DashboardSuggestion {
   controlId: string;
   controlTitle?: string;
   labelSetHash: string;
-  labels: Record<string, string>;
+  labelSet?: Record<string, string>;
+  labels?: Record<string, string>;
   confidence?: number;
   reasoning?: string;
   controlFitReasoning?: string;