Add control to implementation page, and add dividers to make page cle…

src/views/control-implementations/IndexView.vue

@@ -149,10 +149,27 @@
 
   <Drawer
     v-model:visible="controlDrawerOpen"
-    header="Implementation"
     position="right"
     class="w-full! md:w-1/2! lg:w-3/5!"
   >
+    <template #header>
+      <div v-if="selectedControl" class="min-w-0">
+        <div class="flex items-center gap-x-3">
+          <Badge class="text-base">{{ selectedControl.id }}</Badge>
+          <h4 class="font-semibold text-2xl truncate">
+            {{ selectedControl.title }}
+          </h4>
+        </div>
+        <p
+          v-if="selectedControlDescription"
+          class="mt-1 text-sm text-gray-500 dark:text-slate-400"
+        >
+          {{ selectedControlDescription }}
+        </p>
+      </div>
+      <h4 v-else class="font-semibold text-2xl">Implementation</h4>
+    </template>
+
     <ControlImplementationSuggestions
       v-if="aiConfigStore.dashboardSuggestionsEnabled"
       :control-id="selectedDrawerControlId"
@@ -238,6 +255,7 @@ import ControlImplementationSuggestions from '@/views/control-implementations/pa
 import type { Catalog, Group } from '@/oscal';
 import type { DataResponse } from '@/stores/types.ts';
 import type {
+  Control,
   ControlImplementation,
   ImplementedRequirement,
   Risk,
@@ -408,6 +426,38 @@ const selectedDrawerControlId = computed(
     selectedControlId.value ?? selectedImplementedRequirement.value?.controlId,
 );
 
+// Flattens the catalog tree once per rebuild so the drawer can look up a
+// control's title/description by id, regardless of whether it was opened by
+// clicking a row or restored from persisted drawer state on page load.
+const controlsById = computed(() => {
+  const map: Record<string, Control> = {};
+  const walk = (node: TreeNode) => {
+    if (node.type === 'control') {
+      const control = node.data as Control;
+      map[normalizeId(control.id)] = control;
+    }
+    for (const child of node.children ?? []) {
+      walk(child);
+    }
+  };
+  for (const node of nodes.value) {
+    walk(node);
+  }
+  return map;
+});
+
+const selectedControl = computed<Control | undefined>(() => {
+  const key = normalizeId(selectedDrawerControlId.value);
+  return key ? controlsById.value[key] : undefined;
+});
+
+const selectedControlDescription = computed(() => {
+  const statementPart = selectedControl.value?.parts?.find(
+    (part) => part.name === 'statement',
+  );
+  return statementPart?.prose ?? '';
+});
+
 const selectedControlDashboardSuggestions = computed(() => {
   const key = normalizeId(selectedDrawerControlId.value);
   return key ? (pendingDashboardSuggestionsByControl.value[key] ?? []) : [];

src/views/control-implementations/partials/ControlStatementByComponents.vue

@@ -56,11 +56,11 @@ const menuItems = computed(() => [
     <BurgerMenu :items="menuItems" />
   </div>
 
-  <div v-for="(byComponent, index) in byComponents" :key="byComponent.uuid">
-    <div
-      v-if="index !== 0"
-      class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 my-4"
-    ></div>
+  <div
+    v-if="byComponents.length === 0"
+    class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 mt-4"
+  ></div>
+  <div v-for="byComponent in byComponents" :key="byComponent.uuid">
     <StatementByComponent
       :by-component="byComponent"
       :control-id="controlId"
@@ -69,5 +69,6 @@ const menuItems = computed(() => [
       @save="emit('save', $event)"
       @delete="emit('delete', $event)"
     />
+    <div class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 my-4"></div>
   </div>
 </template>

src/views/control-implementations/partials/ControlStatementImplementation.vue

@@ -1368,6 +1368,7 @@ async function submitEvidenceLinking() {
       >
         AI is not configured, so dashboard suggestions cannot be generated.
       </Message>
+      <div class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 mt-4"></div>
 
       <ControlStatementByComponents
         v-if="showComponentsSection && localStatement"
@@ -1524,6 +1525,7 @@ async function submitEvidenceLinking() {
           @add-condition="addLabelCondition"
           @remove-condition="removeLabelCondition"
         />
+        <div class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 mt-4"></div>
       </div>
     </div>
     <div v-else>

src/views/control-implementations/partials/ControlStatementMetadata.vue

@@ -89,4 +89,5 @@ function formatLinks(links: Statement['links']): string {
       Edit
     </Button>
   </div>
+  <div class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 mt-4"></div>
 </template>

src/views/control-implementations/partials/ControlStatementSuggestions.vue

@@ -107,5 +107,6 @@ function formatRelevanceScore(score: number | undefined): string {
         All suggestions applied.
       </Message>
     </div>
+    <div class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 mt-4"></div>
   </div>
 </template>

src/views/control-implementations/partials/CreateByComponentForm.vue

@@ -152,4 +152,5 @@ function submit() {
       </PrimaryButton>
     </div>
   </form>
+  <div class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 mt-4"></div>
 </template>

src/views/control-implementations/partials/IndexControlImplementation.vue

@@ -2,6 +2,7 @@
 import { v4 as uuidv4 } from 'uuid';
 import Drawer from '@/volt/Drawer.vue';
 import Message from '@/volt/Message.vue';
+import Badge from '@/volt/Badge.vue';
 import type { ImplementedRequirement, Statement } from '@/oscal';
 import PartDisplay from '@/components/PartDisplay.vue';
 import type { Part } from '@/oscal';
@@ -75,6 +76,13 @@ const selectedStatementStatusCue = computed(() => {
 const inheritedChipClass =
   'rounded px-2 py-0.5 text-xs font-medium bg-purple-600 text-white dark:bg-purple-400 dark:text-purple-950';
 
+const controlDescription = computed(() => {
+  const statementPart = control.parts?.find(
+    (part) => part.name === 'statement',
+  );
+  return statementPart?.prose ?? '';
+});
+
 const selectedStatementInherited = computed(
   () =>
     !!selectedPart.value &&
@@ -314,22 +322,36 @@ async function onPartSelect(e: Event, part: Part) {
     class="w-full! md:w-1/2! lg:w-3/5!"
   >
     <template #header>
-      <div class="flex flex-wrap items-center gap-2">
-        <TooltipTitle
-          text="Implementation Statement"
-          tooltip-key="system.implementation.statement.drawer"
-          position="bottom"
-        />
-        <span
-          v-if="selectedStatementStatusCue"
-          class="rounded px-2 py-0.5 text-xs font-medium"
-          :class="selectedStatementStatusCue.countClass"
+      <div class="min-w-0">
+        <div class="flex flex-wrap items-center gap-2">
+          <TooltipTitle
+            text="Implementation Statement"
+            tooltip-key="system.implementation.statement.drawer"
+            position="bottom"
+          />
+          <span
+            v-if="selectedStatementStatusCue"
+            class="rounded px-2 py-0.5 text-xs font-medium"
+            :class="selectedStatementStatusCue.countClass"
+          >
+            {{ selectedStatementStatusCue.label }}
+          </span>
+          <span v-if="selectedStatementInherited" :class="inheritedChipClass">
+            Inherited
+          </span>
+        </div>
+        <div class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 mt-4"></div>
+        <div class="mt-2 flex items-center gap-x-3">
+          <Badge class="text-base">{{ control.id }}</Badge>
+          <h4 class="font-medium truncate">{{ control.title }}</h4>
+        </div>
+        <p
+          v-if="controlDescription"
+          class="mt-1 text-sm text-gray-500 dark:text-slate-400"
         >
-          {{ selectedStatementStatusCue.label }}
-        </span>
-        <span v-if="selectedStatementInherited" :class="inheritedChipClass">
-          Inherited
-        </span>
+          {{ controlDescription }}
+        </p>
+        <div class="h-0.5 w-full bg-gray-200 dark:bg-slate-700 mt-4"></div>
       </div>
     </template>
     <ControlStatementImplementation
@@ -375,4 +397,17 @@ async function onPartSelect(e: Event, part: Part) {
 .dark .part-display .hover {
   background-color: rgb(44 57 74);
 }
+
+/* Separates sibling statement parts (top-level items and nested a./b./c.
+   sub-items alike) so it's clear where one part's badges/rows end and the
+   next part begins. */
+.part-display [data-type='part'] + [data-type='part'] {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgb(226 232 240);
+}
+
+.dark .part-display [data-type='part'] + [data-type='part'] {
+  border-top-color: rgb(51 65 85);
+}
 </style>

src/views/control-implementations/partials/__tests__/ControlStatementByComponents.spec.ts

@@ -74,7 +74,6 @@ describe('ControlStatementByComponents', () => {
     expect(
       wrapper.findAll('[data-test="statement-by-component"]'),
     ).toHaveLength(2);
-    expect(wrapper.findAll('.h-0\\.5')).toHaveLength(1);
   });
 
   it('emits addComponent, createComponent and inheritFromSsp from burger menu commands', async () => {