From 0af67f3281c72118debb3485150847b67253d45a Mon Sep 17 00:00:00 2001
From: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
Date: Mon, 5 Oct 2026 07:40:54 -0300
Subject: [PATCH 1/2] feat(agent-config): plugin tabs and add-plugin dialog

Layer 18 of 21 in the stacked split of compliance-framework/ui#318.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../config/AgentConfigEffectiveView.vue       | 151 ++++++++++
 src/components/agents/config/PluginTabs.vue   | 263 ++++++++++++++++++
 .../AgentConfigEffectiveView.spec.ts          | 123 ++++++++
 .../config/__tests__/PluginLibVersion.spec.ts |  54 ++++
 .../agents/config/editor/AddPluginAction.vue  |  57 ++++
 .../agents/config/editor/AddPluginDialog.vue  | 205 ++++++++++++++
 6 files changed, 853 insertions(+)
 create mode 100644 src/components/agents/config/AgentConfigEffectiveView.vue
 create mode 100644 src/components/agents/config/PluginTabs.vue
 create mode 100644 src/components/agents/config/__tests__/AgentConfigEffectiveView.spec.ts
 create mode 100644 src/components/agents/config/__tests__/PluginLibVersion.spec.ts
 create mode 100644 src/components/agents/config/editor/AddPluginAction.vue
 create mode 100644 src/components/agents/config/editor/AddPluginDialog.vue

diff --git a/src/components/agents/config/AgentConfigEffectiveView.vue b/src/components/agents/config/AgentConfigEffectiveView.vue
new file mode 100644
index 00000000..5d6a9796
--- /dev/null
+++ b/src/components/agents/config/AgentConfigEffectiveView.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="space-y-4" data-test="effective-view">
+    <p
+      v-if="!effective"
+      class="rounded-md border border-dashed border-ccf-300 p-4 text-sm text-gray-500 dark:border-slate-700 dark:text-slate-400"
+      data-test="effective-empty"
+    >
+      {{ NOT_REPORTED_TEXT }}
+    </p>
+    <template v-else>
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <p
+          v-if="appliedRevisionNote !== null"
+          class="text-sm text-amber-700 dark:text-amber-300"
+          data-test="provenance-note"
+        >
+          <template v-if="provenanceFallback">
+            Could not load r{{ appliedRevisionNote }}, the revision this
+            instance runs; provenance is shown against the desired revision.
+          </template>
+          <template v-else>
+            Provenance reflects r{{ appliedRevisionNote }}, the revision this
+            instance runs.
+          </template>
+        </p>
+        <span v-else />
+        <SelectButton
+          v-model="mode"
+          :options="modeOptions"
+          option-label="label"
+          option-value="value"
+          :allow-empty="false"
+          aria-label="Effective configuration display"
+        />
+      </div>
+
+      <template v-if="mode === 'summary'">
+        <LockedKeysPanel :doc="effective" />
+        <ConfigFlagsSummary
+          :effective="effective"
+          :base="base"
+          :overlay="appliedOverlay"
+        />
+        <PluginTabs
+          :cards="pluginCards"
+          :base="base"
+          :overlay="appliedOverlay"
+          :plugin-reports="pluginReports"
+        />
+      </template>
+      <ConfigYamlViewer
+        v-else
+        :doc="effective"
+        :filename="filename"
+        :empty-text="NOT_REPORTED_TEXT"
+        :legend="LOCKED_LEGEND"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import SelectButton from '@/volt/SelectButton.vue';
+import type { ConfigDoc, OverlayDoc, PluginReport } from '@/types/agent-config';
+import { sanitizeForDisplay } from '@/utils/agent-config/display';
+import { isPlainObject } from '@/utils/agent-config/merge-patch';
+import { pointer } from '@/utils/agent-config/json-pointer';
+import { useWorkspace } from '@/composables/agent-config/useConfigWorkspace';
+import LockedKeysPanel from './LockedKeysPanel.vue';
+import ConfigFlagsSummary from './ConfigFlagsSummary.vue';
+import PluginTabs, { type PluginCard } from './PluginTabs.vue';
+import ConfigYamlViewer from './ConfigYamlViewer.vue';
+import { LOCKED_LEGEND, NOT_REPORTED_TEXT } from './constants';
+
+const props = defineProps<{
+  /** The instance's reported effective config (null = not reported). */
+  effectiveDoc: ConfigDoc | null;
+  base: ConfigDoc | null;
+  /** Overlay of the revision the instance runs (U1.3 appliedOverlay). */
+  appliedOverlay: OverlayDoc | null;
+  /** Applied revision when the instance is not in sync, else null. */
+  appliedRevisionNote: number | null;
+  /** The applied revision's overlay could not be loaded (desired overlay used instead). */
+  provenanceFallback?: boolean;
+  filename: string;
+  /** R76: the instance's plugins and the agent library each was built with. */
+  pluginReports?: PluginReport[] | null;
+}>();
+
+const mode = ref<'summary' | 'yaml'>('summary');
+const modeOptions = [
+  { label: 'Summary', value: 'summary' },
+  { label: 'YAML', value: 'yaml' },
+];
+
+const effective = computed(() =>
+  props.effectiveDoc ? sanitizeForDisplay(props.effectiveDoc) : null,
+);
+
+const ws = useWorkspace();
+
+const pluginCards = computed(() => {
+  const cards: PluginCard[] = [];
+  const eff = effective.value?.plugins ?? {};
+  for (const [name, plugin] of Object.entries(eff)) {
+    cards.push({
+      name,
+      plugin: plugin ?? null,
+      removed: false,
+      pendingNew: false,
+    });
+  }
+  // Base plugins the overlay removed render greyed ("Removed by overlay").
+  const overlayPlugins = props.appliedOverlay?.plugins;
+  if (isPlainObject(overlayPlugins)) {
+    for (const [name, v] of Object.entries(overlayPlugins)) {
+      const basePlugin = props.base?.plugins?.[name];
+      if (v === null && basePlugin && !(name in eff)) {
+        cards.push({
+          name,
+          plugin: basePlugin,
+          removed: true,
+          pendingNew: false,
+        });
+      }
+    }
+  }
+  // Plugins the pending draft adds (R69), shown from the draft. A plugin the saved desired
+  // revision adds but this instance has not applied yet is not "pending" and is not shown.
+  if (ws?.ready.value) {
+    for (const [name, plugin] of Object.entries(
+      ws.draft.effectiveDraft.value.plugins ?? {},
+    )) {
+      if (
+        isPlainObject(plugin) &&
+        !cards.some((c) => c.name === name) &&
+        ws.draft.pendingAt(pointer('plugins', name))
+      ) {
+        cards.push({
+          name,
+          plugin: plugin as PluginCard['plugin'],
+          removed: false,
+          pendingNew: true,
+        });
+      }
+    }
+  }
+  return cards.sort((a, b) => a.name.localeCompare(b.name));
+});
+</script>
diff --git a/src/components/agents/config/PluginTabs.vue b/src/components/agents/config/PluginTabs.vue
new file mode 100644
index 00000000..4e4b13eb
--- /dev/null
+++ b/src/components/agents/config/PluginTabs.vue
@@ -0,0 +1,263 @@
+<template>
+  <!-- relative: the sr-only descriptions below are position:absolute; without a positioned
+       ancestor they are placed against the document and, deep inside the scrolling <main>,
+       stretch the document itself (a second page scrollbar). -->
+  <section class="relative space-y-2" data-test="plugin-tabs">
+    <h4
+      :id="headingId"
+      class="text-sm font-semibold text-gray-900 dark:text-slate-200"
+    >
+      Plugins
+    </h4>
+    <div
+      v-if="!cards.length"
+      class="flex flex-wrap items-center justify-between gap-2 rounded-md border border-dashed border-ccf-300 p-4 dark:border-slate-700"
+    >
+      <p class="text-sm text-gray-500 dark:text-slate-400">
+        No plugins configured.
+      </p>
+      <AddPluginAction
+        v-if="canAddPlugin && addAccess"
+        :access="addAccess"
+        @open="addPluginOpen = true"
+      />
+    </div>
+    <Tabs v-else :value="active" scrollable @update:value="onTab">
+      <div ref="strip" class="flex items-end gap-1">
+        <TabList class="min-w-0 flex-1">
+          <Tab
+            v-for="card in cards"
+            :key="card.name"
+            :value="card.name"
+            class="flex items-center gap-1.5 rounded-t-md px-3! py-2! text-sm aria-selected:bg-slate-100 dark:aria-selected:bg-slate-800"
+            :aria-describedby="
+              installText(card)
+                ? `${headingId}-${card.name}-install`
+                : undefined
+            "
+            :data-test="`plugin-tab-${card.name}`"
+          >
+            <span
+              class="font-mono"
+              :class="{ 'line-through opacity-70': card.removed }"
+              >{{ card.name }}</span
+            >
+            <span
+              v-for="hint in hintsOf(card)"
+              :key="hint.key"
+              class="rounded-full px-1.5 text-[0.65rem] leading-4 font-medium"
+              :class="HINT_CLASSES[hint.severity]"
+              :data-test="`plugin-tab-hint-${hint.key}`"
+              >{{ hint.label }}</span
+            >
+            <i
+              v-if="installState(card) === 'restricted'"
+              v-tooltip.top="installText(card)"
+              aria-hidden="true"
+              class="pi pi-shield text-xs text-amber-600 dark:text-amber-400"
+              data-test="plugin-tab-restricted"
+            />
+            <i
+              v-else-if="installState(card) === 'readonly'"
+              v-tooltip.top="installText(card)"
+              aria-hidden="true"
+              class="pi pi-ban text-xs text-red-600 dark:text-red-400"
+              data-test="plugin-tab-not-installed"
+            />
+          </Tab>
+        </TabList>
+        <AddPluginAction
+          v-if="canAddPlugin && addAccess"
+          class="mb-1 flex-shrink-0"
+          :access="addAccess"
+          @open="addPluginOpen = true"
+        />
+      </div>
+      <TabPanel
+        v-for="card in cards"
+        :key="card.name"
+        :value="card.name"
+        class="pt-3"
+        :data-test="`plugin-panel-${card.name}`"
+      >
+        <PluginSummaryCard
+          :name="card.name"
+          :plugin="card.plugin"
+          :base="base"
+          :overlay="overlay"
+          :removed="card.removed"
+          :pending-new="card.pendingNew"
+          :report="reportOf(card.name)"
+        />
+      </TabPanel>
+    </Tabs>
+    <!-- Descriptions of the tabs' install markers (a tab is a button: no focusable icons). -->
+    <template v-for="card in cards" :key="card.name">
+      <span
+        v-if="installText(card)"
+        :id="`${headingId}-${card.name}-install`"
+        class="sr-only"
+        >{{ installText(card) }}</span
+      >
+    </template>
+    <AddPluginDialog
+      v-if="canAddPlugin"
+      v-model:visible="addPluginOpen"
+      :existing="existingPluginNames"
+      @add="addPlugin"
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+// The plugins of the Effective view, one tab per plugin so the selected plugin's card gets
+// the full width. PrimeVue (Volt) Tabs provide the ARIA tablist / tab / tabpanel roles and
+// the keyboard model (←/→ move the focus, Home/End, Enter/Space select); `scrollable` adds
+// scroll buttons when the strip overflows. Panels stay mounted (v-show), so an open inline
+// editor keeps its state across tab switches. The "add" action sits after the tablist, not
+// in it: it opens a dialog rather than showing a panel. Adding a plugin selects its tab.
+import { computed, nextTick, ref, useId, watch } from 'vue';
+import Tabs from '@/volt/Tabs.vue';
+import TabList from '@/volt/TabList.vue';
+import Tab from '@/volt/Tab.vue';
+import TabPanel from '@/volt/TabPanel.vue';
+import type {
+  ConfigDoc,
+  OverlayDoc,
+  PluginDoc,
+  PluginReport,
+} from '@/types/agent-config';
+import { pointer } from '@/utils/agent-config/json-pointer';
+import { addPluginTooltip } from '@/utils/agent-config/field-access';
+import { useWorkspace } from '@/composables/agent-config/useConfigWorkspace';
+import PluginSummaryCard from './PluginSummaryCard.vue';
+import AddPluginDialog from './editor/AddPluginDialog.vue';
+import AddPluginAction from './editor/AddPluginAction.vue';
+
+export interface PluginCard {
+  name: string;
+  plugin: PluginDoc | null;
+  /** A base plugin the applied overlay removed. */
+  removed: boolean;
+  /** Added by the pending draft. */
+  pendingNew: boolean;
+}
+
+const props = defineProps<{
+  cards: PluginCard[];
+  base: ConfigDoc | null;
+  overlay: OverlayDoc | null;
+  pluginReports?: PluginReport[] | null;
+}>();
+
+const ws = useWorkspace();
+const headingId = `plugins-${useId()}`;
+
+/** The selected plugin; falls back to the first tab when it disappears (e.g. discarded). */
+const selected = ref('');
+const active = computed(() =>
+  props.cards.some((c) => c.name === selected.value)
+    ? selected.value
+    : (props.cards[0]?.name ?? ''),
+);
+
+function select(name: string): void {
+  selected.value = name;
+}
+function onTab(value: string | number): void {
+  select(String(value));
+}
+
+function reportOf(name: string): PluginReport | null {
+  return props.pluginReports?.find((r) => r.name === name) ?? null;
+}
+
+type HintSeverity = 'info' | 'danger' | 'secondary';
+const HINT_CLASSES: Record<HintSeverity, string> = {
+  info: 'bg-sky-100 text-sky-800 dark:bg-sky-500/15 dark:text-sky-200',
+  danger: 'bg-red-100 text-red-700 dark:bg-red-500/15 dark:text-red-300',
+  secondary:
+    'bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
+};
+
+/** The card's status, condensed for the tab label. */
+function hintsOf(card: PluginCard) {
+  const hints: { key: string; label: string; severity: HintSeverity }[] = [];
+  const ptr = pointer('plugins', card.name);
+  const pending = !!ws && ws.ready.value && ws.draft.pendingAt(ptr);
+  const effDraft = ws?.draft.effectiveDraft.value.plugins ?? {};
+  if (card.pendingNew) {
+    hints.push({ key: 'new', label: 'new', severity: 'info' });
+  } else if (pending && !card.removed && !effDraft[card.name]) {
+    hints.push({ key: 'removal', label: 'removal', severity: 'danger' });
+  } else if (pending) {
+    hints.push({ key: 'pending', label: 'pending', severity: 'info' });
+  }
+  if (card.removed) {
+    hints.push({ key: 'removed', label: 'removed', severity: 'secondary' });
+  } else if (card.plugin?.enabled === false) {
+    hints.push({ key: 'disabled', label: 'disabled', severity: 'secondary' });
+  }
+  return hints;
+}
+
+/**
+ * R71 for a plugin the draft adds: whether the reporting instances would install it with its
+ * source (readonly = none would). Only for editors.
+ */
+function installAccess(card: PluginCard) {
+  if (!card.pendingNew || !ws?.canConfigure.value) return null;
+  return ws.accessAt(pointer('plugins', card.name));
+}
+function installState(card: PluginCard) {
+  return installAccess(card)?.state ?? 'editable';
+}
+function installText(card: PluginCard): string {
+  const a = installAccess(card);
+  return a ? addPluginTooltip(a, card.plugin?.source ?? card.name) : '';
+}
+
+// ---- Add plugin (agent:configure; a pending change), gated by R71 (addPluginAccess) ----
+const canAddPlugin = computed(
+  () => !!ws && ws.ready.value && ws.canConfigure.value,
+);
+const addAccess = computed(() =>
+  canAddPlugin.value ? ws!.addPluginAccess() : null,
+);
+const addPluginOpen = ref(false);
+const existingPluginNames = computed(() => {
+  const names = new Set(props.cards.map((c) => c.name));
+  for (const b of ws?.bases.value ?? [])
+    Object.keys(b.plugins ?? {}).forEach((n) => names.add(n));
+  return Array.from(names);
+});
+/** Adds the plugin to the draft and selects its (new) tab. */
+function addPlugin(plugin: {
+  name: string;
+  source: string;
+  schedule?: string;
+}) {
+  ws?.draft.set(pointer('plugins', plugin.name), {
+    source: plugin.source,
+    ...(plugin.schedule ? { schedule: plugin.schedule } : {}),
+    policies: [],
+  });
+  select(plugin.name);
+}
+
+// The Volt TabList keeps its pass-through theme private, so the tablist element is labelled
+// by the "Plugins" heading once rendered.
+const strip = ref<HTMLElement | null>(null);
+watch(
+  () => props.cards.length > 0,
+  async () => {
+    await nextTick();
+    strip.value
+      ?.querySelector('[role="tablist"]')
+      ?.setAttribute('aria-labelledby', headingId);
+  },
+  { immediate: true },
+);
+
+defineExpose({ select, active });
+</script>
diff --git a/src/components/agents/config/__tests__/AgentConfigEffectiveView.spec.ts b/src/components/agents/config/__tests__/AgentConfigEffectiveView.spec.ts
new file mode 100644
index 00000000..16bf2c84
--- /dev/null
+++ b/src/components/agents/config/__tests__/AgentConfigEffectiveView.spec.ts
@@ -0,0 +1,123 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount, enableAutoUnmount } from '@vue/test-utils';
+import type { ConfigDoc, OverlayDoc } from '@/types/agent-config';
+import { baseConfig } from '@/composables/agent-config/__tests__/fixtures';
+import { mergePatch } from '@/utils/agent-config/merge-patch';
+import AgentConfigEffectiveView from '../AgentConfigEffectiveView.vue';
+import { globalWith, piniaWith, READER } from './helpers';
+
+// PrimeVue's TabList schedules a 150 ms ink-bar update on mount and never clears it; a wrapper
+// left mounted lets it fire after this file's jsdom environment is torn down
+// ("HTMLElement is not defined"). Unmounting nulls its refs, so the timer becomes a no-op.
+enableAutoUnmount(afterEach);
+
+function mountView(
+  overlay: OverlayDoc,
+  effectiveOverride?: ConfigDoc,
+  note: number | null = null,
+) {
+  const effective =
+    effectiveOverride ?? mergePatch<ConfigDoc>(baseConfig, overlay);
+  return mount(AgentConfigEffectiveView, {
+    props: {
+      effectiveDoc: effective,
+      base: baseConfig,
+      appliedOverlay: overlay,
+      appliedRevisionNote: note,
+      filename: 'a-effective-r7.yaml',
+    },
+    global: globalWith(piniaWith(READER)),
+  });
+}
+
+describe('AgentConfigEffectiveView', () => {
+  it('renders provenance badges for file / overlay / overrides / removed', () => {
+    const wrapper = mountView({
+      verbosity: 2,
+      plugins: {
+        'ubuntu-packages': null,
+        extra: { source: 'ghcr.io/compliance-framework/extra:v1' },
+        'local-ssh': { schedule: '@hourly' },
+      },
+    });
+    const ssh = wrapper.find('[data-test="plugin-card-local-ssh"]');
+    expect(ssh.find('[data-provenance="overrides-file"]').exists()).toBe(true);
+    const extra = wrapper.find('[data-test="plugin-card-extra"]');
+    expect(extra.find('[data-provenance="overlay"]').exists()).toBe(true);
+    const removed = wrapper.find('[data-test="plugin-card-ubuntu-packages"]');
+    expect(removed.text()).toContain('Removed by overlay');
+    expect(
+      removed.find('[data-provenance="removed-by-overlay"]').exists(),
+    ).toBe(true);
+    const flags = wrapper.find('[data-test="flags-summary"]');
+    expect(flags.text()).toContain('Trace');
+    expect(flags.find('[data-provenance="overrides-file"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it('shows plain file provenance when the applied overlay is empty, and the pending note', () => {
+    const wrapper = mountView({}, undefined, 6);
+    expect(
+      wrapper
+        .find('[data-test="plugin-card-local-ssh"] [data-provenance="file"]')
+        .exists(),
+    ).toBe(true);
+    expect(wrapper.find('[data-test="provenance-note"]').text()).toContain(
+      'r6',
+    );
+  });
+
+  it('shows the forbidden keys locked and muted (R71) and never renders client_secret', () => {
+    const leaky = mergePatch<ConfigDoc>(baseConfig, {}) as ConfigDoc;
+    leaky.api = {
+      url: 'https://x',
+      auth: { client_id: 'cid', client_secret: 'SUPER-SECRET' },
+    };
+    const wrapper = mountView({}, leaky);
+    const locked = wrapper.find('[data-test="locked-keys"]');
+    expect(locked.text()).toContain('api.auth.client_id');
+    expect(locked.text()).toContain('cid');
+    expect(locked.findAll('[data-test="lock-icon"]').length).toBe(8);
+    expect(
+      locked.find('[data-test="lock-icon"]').attributes('aria-label'),
+    ).toBe('Set on the agent host; can never be changed remotely');
+    expect(locked.findAll('[data-state="forbidden"]').length).toBe(8);
+    // No pencil on a forbidden field.
+    expect(locked.find('[data-test^="edit-"]').exists()).toBe(false);
+    expect(wrapper.html()).not.toContain('SUPER-SECRET');
+  });
+
+  it('never renders client_secret in YAML mode either', async () => {
+    const leaky = mergePatch<ConfigDoc>(baseConfig, {}) as ConfigDoc;
+    leaky.api = {
+      url: 'https://x',
+      auth: { client_id: 'cid', client_secret: 'SUPER-SECRET' },
+    };
+    const wrapper = mountView({}, leaky);
+    wrapper
+      .findComponent({ name: 'SelectButton' })
+      .vm.$emit('update:modelValue', 'yaml');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('[data-test="yaml-text"]').text()).toContain(
+      'client_id: cid',
+    );
+    expect(wrapper.html()).not.toContain('SUPER-SECRET');
+  });
+
+  it('shows the not-reported text without an effective config', () => {
+    const wrapper = mount(AgentConfigEffectiveView, {
+      props: {
+        effectiveDoc: null,
+        base: null,
+        appliedOverlay: null,
+        appliedRevisionNote: null,
+        filename: 'x.yaml',
+      },
+      global: globalWith(piniaWith(READER)),
+    });
+    expect(wrapper.find('[data-test="effective-empty"]').text()).toContain(
+      'No configuration reported yet.',
+    );
+  });
+});
diff --git a/src/components/agents/config/__tests__/PluginLibVersion.spec.ts b/src/components/agents/config/__tests__/PluginLibVersion.spec.ts
new file mode 100644
index 00000000..956617f4
--- /dev/null
+++ b/src/components/agents/config/__tests__/PluginLibVersion.spec.ts
@@ -0,0 +1,54 @@
+// R76 on the Configuration tab: the plugin's agent library on the Effective view.
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount, enableAutoUnmount } from '@vue/test-utils';
+import {
+  SSH_SOURCE,
+  baseConfig,
+} from '@/composables/agent-config/__tests__/fixtures';
+import type { ConfigDoc, PluginReport } from '@/types/agent-config';
+import AgentConfigEffectiveView from '../AgentConfigEffectiveView.vue';
+import { READER, globalWith, piniaWith } from './helpers';
+
+// PrimeVue's TabList schedules a 150 ms ink-bar update on mount and never clears it; a wrapper
+// left mounted lets it fire after this file's jsdom environment is torn down
+// ("HTMLElement is not defined"). Unmounting nulls its refs, so the timer becomes a no-op.
+enableAutoUnmount(afterEach);
+
+describe('plugin agent library badge (R76)', () => {
+  function view(plugins: PluginReport[] | null) {
+    return mount(AgentConfigEffectiveView, {
+      props: {
+        effectiveDoc: baseConfig as ConfigDoc,
+        base: baseConfig,
+        appliedOverlay: {},
+        appliedRevisionNote: null,
+        filename: 'x.yaml',
+        pluginReports: plugins,
+      },
+      global: globalWith(piniaWith(READER)),
+    });
+  }
+
+  it('shows the reported library, and nothing when it is unknown', () => {
+    const w = view([
+      { name: 'local-ssh', source: SSH_SOURCE, libVersion: 'v0.1.9' },
+      { name: 'ubuntu-packages', libVersion: '' },
+    ]);
+    expect(
+      w
+        .find('[data-test="plugin-card-local-ssh"] [data-test="plugin-lib"]')
+        .text(),
+    ).toBe('agent v0.1.9');
+    expect(
+      w
+        .find(
+          '[data-test="plugin-card-ubuntu-packages"] [data-test="plugin-lib"]',
+        )
+        .exists(),
+    ).toBe(false);
+  });
+
+  it('shows nothing for agents that do not report plugins', () => {
+    expect(view(null).find('[data-test="plugin-lib"]').exists()).toBe(false);
+  });
+});
diff --git a/src/components/agents/config/editor/AddPluginAction.vue b/src/components/agents/config/editor/AddPluginAction.vue
new file mode 100644
index 00000000..43c4bf75
--- /dev/null
+++ b/src/components/agents/config/editor/AddPluginAction.vue
@@ -0,0 +1,57 @@
+<template>
+  <!-- relative: contains the absolutely positioned sr-only description (see PluginTabs). -->
+  <span
+    class="relative inline-flex items-center gap-1.5"
+    data-test="add-plugin-action"
+  >
+    <span
+      v-tooltip.top="{ value: tooltip, disabled: !disabled }"
+      :tabindex="disabled ? 0 : undefined"
+      :aria-label="disabled ? tooltip : undefined"
+      data-test="add-plugin-wrapper"
+    >
+      <SecondaryButton
+        size="small"
+        :disabled="disabled"
+        :aria-describedby="tooltip && !disabled ? descId : undefined"
+        :data-state="access.state"
+        data-test="add-plugin"
+        @click="$emit('open')"
+      >
+        <i class="pi pi-plus mr-1" />Add plugin
+      </SecondaryButton>
+    </span>
+    <i
+      v-if="access.state === 'restricted'"
+      v-tooltip.top="tooltip"
+      role="img"
+      tabindex="0"
+      class="pi pi-shield text-xs text-amber-600 dark:text-amber-400"
+      :aria-label="tooltip"
+      data-test="add-plugin-restricted"
+    />
+    <span v-if="tooltip && !disabled" :id="descId" class="sr-only">{{
+      tooltip
+    }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+// The "Add plugin" action with the R71 three states for a new plugin, before its source is
+// known (field-access.ts addPluginAccess): no reporting instance could install one →
+// disabled with the reasons; some → enabled with a shield; all (or no reporting instance
+// yet) → enabled.
+import { computed, useId } from 'vue';
+import SecondaryButton from '@/volt/SecondaryButton.vue';
+import {
+  addPluginTooltip,
+  type FieldAccess,
+} from '@/utils/agent-config/field-access';
+
+const props = defineProps<{ access: FieldAccess }>();
+defineEmits<{ open: [] }>();
+
+const descId = `add-plugin-${useId()}`;
+const disabled = computed(() => props.access.state === 'readonly');
+const tooltip = computed(() => addPluginTooltip(props.access));
+</script>
diff --git a/src/components/agents/config/editor/AddPluginDialog.vue b/src/components/agents/config/editor/AddPluginDialog.vue
new file mode 100644
index 00000000..c4d1c6b9
--- /dev/null
+++ b/src/components/agents/config/editor/AddPluginDialog.vue
@@ -0,0 +1,205 @@
+<template>
+  <Dialog
+    :visible="visible"
+    modal
+    header="Add plugin"
+    class="w-full max-w-lg"
+    @update:visible="$emit('update:visible', $event)"
+  >
+    <form
+      class="space-y-3"
+      data-test="add-plugin-form"
+      @submit.prevent="submit"
+    >
+      <div>
+        <label class="field-label" for="add-plugin-name">Name</label>
+        <InputText
+          id="add-plugin-name"
+          v-model="name"
+          size="small"
+          class="w-full font-mono"
+          data-test="add-plugin-name"
+        />
+        <p
+          v-if="name && nameError"
+          class="mt-1 text-xs text-red-600 dark:text-red-400"
+        >
+          {{ nameError }}
+        </p>
+      </div>
+      <div>
+        <label class="field-label" for="add-plugin-source">Source</label>
+        <InputText
+          id="add-plugin-source"
+          v-model="source"
+          size="small"
+          class="w-full font-mono"
+          placeholder="ghcr.io/org/plugin:v1"
+          data-test="add-plugin-source"
+        />
+        <p
+          v-if="source && sourceError"
+          class="mt-1 text-xs text-red-600 dark:text-red-400"
+        >
+          {{ sourceError }}
+        </p>
+        <p
+          v-else-if="sourceAccess"
+          class="mt-1 flex items-start gap-1.5 text-xs"
+          :class="ACCESS_CLASSES[sourceAccess.state]"
+          role="status"
+          :data-state="sourceAccess.state"
+          data-test="add-plugin-access"
+        >
+          <i
+            class="pi mt-0.5 text-xs"
+            :class="ACCESS_ICONS[sourceAccess.state]"
+          />
+          <span>{{ accessText }}</span>
+        </p>
+      </div>
+      <div>
+        <label class="field-label" for="add-plugin-schedule"
+          >Schedule (optional)</label
+        >
+        <InputText
+          id="add-plugin-schedule"
+          v-model="schedule"
+          size="small"
+          class="w-full font-mono"
+          placeholder="*/5 * * * *"
+          data-test="add-plugin-schedule"
+        />
+        <p
+          v-if="scheduleError"
+          class="mt-1 text-xs text-red-600 dark:text-red-400"
+        >
+          {{ scheduleError }}
+        </p>
+        <p v-else-if="schedule" class="mt-1 text-xs text-gray-500">
+          {{ describeCron5(schedule) }}
+        </p>
+      </div>
+      <div class="flex justify-end gap-2 pt-2">
+        <TertiaryButton type="button" @click="$emit('update:visible', false)"
+          >Cancel</TertiaryButton
+        >
+        <PrimaryButton
+          type="submit"
+          :disabled="!valid || noneInstall"
+          data-test="add-plugin-submit"
+          >Add plugin</PrimaryButton
+        >
+      </div>
+    </form>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import Dialog from '@/volt/Dialog.vue';
+import InputText from '@/volt/InputText.vue';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import TertiaryButton from '@/volt/TertiaryButton.vue';
+import { NAME_RE } from '@/utils/agent-config/validation';
+import { describeCron5, validateCron5 } from '@/utils/agent-config/cron5';
+import {
+  addPluginTooltip,
+  type FieldState,
+} from '@/utils/agent-config/field-access';
+import { useWorkspace } from '@/composables/agent-config/useConfigWorkspace';
+
+const props = defineProps<{ visible: boolean; existing: string[] }>();
+const emit = defineEmits<{
+  'update:visible': [v: boolean];
+  add: [plugin: { name: string; source: string; schedule?: string }];
+}>();
+
+const name = ref('');
+const source = ref('');
+const schedule = ref('');
+
+watch(
+  () => props.visible,
+  (v) => {
+    if (v) {
+      name.value = '';
+      source.value = '';
+      schedule.value = '';
+    }
+  },
+);
+
+const nameError = computed(() => {
+  if (!NAME_RE.test(name.value)) {
+    return 'Use lowercase letters, digits, "_" and "-" (starting with a letter or digit, max 63)';
+  }
+  if (props.existing.includes(name.value))
+    return 'A plugin with this name exists';
+  return '';
+});
+const sourceError = computed(() => {
+  if (!source.value.trim()) return 'A source is required';
+  return '';
+});
+const scheduleError = computed(() =>
+  schedule.value ? validateCron5(schedule.value) : null,
+);
+// R71 with the concrete source: would the reporting instances install this plugin?
+const ws = useWorkspace();
+const sourceAccess = computed(() => {
+  const src = source.value.trim();
+  return ws && src ? ws.addPluginAccess(src) : null;
+});
+/** No reporting instance would install it: adding it is blocked, as for read-only fields. */
+const noneInstall = computed(() => sourceAccess.value?.state === 'readonly');
+const accessText = computed(() => {
+  const a = sourceAccess.value;
+  if (!a) return '';
+  if (!a.total) {
+    return 'No instance has a fresh report: each instance installs it according to its own remote_config when it reports.';
+  }
+  if (a.state === 'editable') {
+    return `All ${a.total} reporting instance${a.total === 1 ? '' : 's'} would install it.`;
+  }
+  return addPluginTooltip(a, source.value.trim());
+});
+const ACCESS_CLASSES: Record<FieldState, string> = {
+  editable: 'text-gray-500 dark:text-slate-400',
+  forbidden: 'text-red-600 dark:text-red-400',
+  readonly: 'text-red-600 dark:text-red-400',
+  restricted: 'text-amber-700 dark:text-amber-300',
+};
+const ACCESS_ICONS: Record<FieldState, string> = {
+  editable: 'pi-check-circle',
+  forbidden: 'pi-ban',
+  readonly: 'pi-ban',
+  restricted: 'pi-shield',
+};
+
+const valid = computed(
+  () =>
+    !!name.value &&
+    !nameError.value &&
+    !sourceError.value &&
+    !scheduleError.value,
+);
+
+function submit() {
+  if (!valid.value || noneInstall.value) return;
+  emit('add', {
+    name: name.value,
+    source: source.value.trim(),
+    ...(schedule.value ? { schedule: schedule.value.trim() } : {}),
+  });
+  emit('update:visible', false);
+}
+</script>
+
+<style scoped>
+@reference '@/assets/base.css';
+
+.field-label {
+  @apply mb-1 block text-xs font-medium tracking-wide text-gray-500 uppercase dark:text-slate-400;
+}
+</style>

From c5da8fa3903c95bedde68f6f2cdfa3d3ab2f4d57 Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 6 Oct 2026 08:23:59 -0300
Subject: [PATCH 2/2] fix(agent-config): plugin tabs by own name; Add plugin
 never replaces a defined plugin

- the tab's removal hint and the "Removed by overlay" card read plugins
  as own properties (getOwn), so a plugin named "constructor" is
  matched like any other
- Add plugin refuses every name the saved overlay or the draft defines
  (non-null), not only the shown cards and loaded files: adding writes
  the whole plugin and replaced a saved definition this instance does
  not run yet
- Add plugin waits, with the reason, until every reporting instance's
  file is loaded; the Effective view says files are loading, or names
  the ones that failed with a Retry

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../config/AgentConfigEffectiveView.vue       |  47 +++++-
 src/components/agents/config/PluginTabs.vue   |  17 +-
 .../AgentConfigEffectiveView.spec.ts          |  23 +++
 .../config/__tests__/PluginLibVersion.spec.ts |   5 +-
 .../__tests__/PluginTabsWorkspace.spec.ts     | 158 ++++++++++++++++++
 .../agents/config/editor/AddPluginAction.vue  |  14 +-
 6 files changed, 255 insertions(+), 9 deletions(-)
 create mode 100644 src/components/agents/config/__tests__/PluginTabsWorkspace.spec.ts

diff --git a/src/components/agents/config/AgentConfigEffectiveView.vue b/src/components/agents/config/AgentConfigEffectiveView.vue
index 5d6a9796..b5b24eda 100644
--- a/src/components/agents/config/AgentConfigEffectiveView.vue
+++ b/src/components/agents/config/AgentConfigEffectiveView.vue
@@ -8,6 +8,32 @@
       {{ NOT_REPORTED_TEXT }}
     </p>
     <template v-else>
+      <!-- Editing waits for every reporting instance's file (useConfigWorkspace). -->
+      <template v-if="basesNotice">
+        <Message
+          v-if="ws!.failedBaseIds.value.length"
+          severity="warn"
+          data-test="bases-failed"
+        >
+          <div class="flex flex-wrap items-center gap-3">
+            <span>{{ basesNotice }}</span>
+            <SecondaryButton
+              size="small"
+              :disabled="ws!.detailsLoading.value"
+              data-test="bases-retry"
+              @click="ws!.loadDetails()"
+              >Retry</SecondaryButton
+            >
+          </div>
+        </Message>
+        <p
+          v-else
+          class="text-xs text-gray-500 dark:text-slate-400"
+          data-test="bases-loading"
+        >
+          {{ basesNotice }}
+        </p>
+      </template>
       <div class="flex flex-wrap items-center justify-between gap-2">
         <p
           v-if="appliedRevisionNote !== null"
@@ -64,7 +90,9 @@ import { computed, ref } from 'vue';
 import SelectButton from '@/volt/SelectButton.vue';
 import type { ConfigDoc, OverlayDoc, PluginReport } from '@/types/agent-config';
 import { sanitizeForDisplay } from '@/utils/agent-config/display';
-import { isPlainObject } from '@/utils/agent-config/merge-patch';
+import { getOwn, isPlainObject } from '@/utils/agent-config/merge-patch';
+import Message from '@/volt/Message.vue';
+import SecondaryButton from '@/volt/SecondaryButton.vue';
 import { pointer } from '@/utils/agent-config/json-pointer';
 import { useWorkspace } from '@/composables/agent-config/useConfigWorkspace';
 import LockedKeysPanel from './LockedKeysPanel.vue';
@@ -99,6 +127,12 @@ const effective = computed(() =>
 );
 
 const ws = useWorkspace();
+/** Why editing waits (instance files loading or failed): editors only. */
+const basesNotice = computed(() =>
+  ws && ws.ready.value && ws.canConfigure.value
+    ? ws.basesBlockedReason.value
+    : '',
+);
 
 const pluginCards = computed(() => {
   const cards: PluginCard[] = [];
@@ -115,11 +149,16 @@ const pluginCards = computed(() => {
   const overlayPlugins = props.appliedOverlay?.plugins;
   if (isPlainObject(overlayPlugins)) {
     for (const [name, v] of Object.entries(overlayPlugins)) {
-      const basePlugin = props.base?.plugins?.[name];
-      if (v === null && basePlugin && !(name in eff)) {
+      // Own properties only: a plugin may be named "constructor".
+      const basePlugin = getOwn(props.base?.plugins ?? {}, name);
+      if (
+        v === null &&
+        isPlainObject(basePlugin) &&
+        getOwn(eff, name) === undefined
+      ) {
         cards.push({
           name,
-          plugin: basePlugin,
+          plugin: basePlugin as PluginCard['plugin'],
           removed: true,
           pendingNew: false,
         });
diff --git a/src/components/agents/config/PluginTabs.vue b/src/components/agents/config/PluginTabs.vue
index 4e4b13eb..b3027d4b 100644
--- a/src/components/agents/config/PluginTabs.vue
+++ b/src/components/agents/config/PluginTabs.vue
@@ -19,6 +19,7 @@
       <AddPluginAction
         v-if="canAddPlugin && addAccess"
         :access="addAccess"
+        :blocked-reason="addBlockedReason"
         @open="addPluginOpen = true"
       />
     </div>
@@ -70,6 +71,7 @@
           v-if="canAddPlugin && addAccess"
           class="mb-1 flex-shrink-0"
           :access="addAccess"
+          :blocked-reason="addBlockedReason"
           @open="addPluginOpen = true"
         />
       </div>
@@ -128,6 +130,7 @@ import type {
   PluginReport,
 } from '@/types/agent-config';
 import { pointer } from '@/utils/agent-config/json-pointer';
+import { getOwn, isPlainObject } from '@/utils/agent-config/merge-patch';
 import { addPluginTooltip } from '@/utils/agent-config/field-access';
 import { useWorkspace } from '@/composables/agent-config/useConfigWorkspace';
 import PluginSummaryCard from './PluginSummaryCard.vue';
@@ -188,7 +191,7 @@ function hintsOf(card: PluginCard) {
   const effDraft = ws?.draft.effectiveDraft.value.plugins ?? {};
   if (card.pendingNew) {
     hints.push({ key: 'new', label: 'new', severity: 'info' });
-  } else if (pending && !card.removed && !effDraft[card.name]) {
+  } else if (pending && !card.removed && !getOwn(effDraft, card.name)) {
     hints.push({ key: 'removal', label: 'removal', severity: 'danger' });
   } else if (pending) {
     hints.push({ key: 'pending', label: 'pending', severity: 'info' });
@@ -224,11 +227,23 @@ const canAddPlugin = computed(
 const addAccess = computed(() =>
   canAddPlugin.value ? ws!.addPluginAccess() : null,
 );
+/** Adding computes the install access over every instance's file: it waits for all of them. */
+const addBlockedReason = computed(() => ws?.basesBlockedReason.value ?? '');
 const addPluginOpen = ref(false);
+/**
+ * Names the dialog refuses: adding writes the whole plugin, so it would replace one that a
+ * host's file, the saved overlay or the draft already defines (even one this instance does
+ * not run yet).
+ */
 const existingPluginNames = computed(() => {
   const names = new Set(props.cards.map((c) => c.name));
   for (const b of ws?.bases.value ?? [])
     Object.keys(b.plugins ?? {}).forEach((n) => names.add(n));
+  for (const o of [ws?.draft.original.value, ws?.draft.overlay.value]) {
+    const plugins = o?.plugins;
+    if (!isPlainObject(plugins)) continue;
+    for (const [n, v] of Object.entries(plugins)) if (v !== null) names.add(n);
+  }
   return Array.from(names);
 });
 /** Adds the plugin to the draft and selects its (new) tab. */
diff --git a/src/components/agents/config/__tests__/AgentConfigEffectiveView.spec.ts b/src/components/agents/config/__tests__/AgentConfigEffectiveView.spec.ts
index 16bf2c84..1f2ddd39 100644
--- a/src/components/agents/config/__tests__/AgentConfigEffectiveView.spec.ts
+++ b/src/components/agents/config/__tests__/AgentConfigEffectiveView.spec.ts
@@ -120,4 +120,27 @@ describe('AgentConfigEffectiveView', () => {
       'No configuration reported yet.',
     );
   });
+
+  it('matches removed plugins by own name only (a plugin may be named "constructor")', () => {
+    const removedCtor = (base: ConfigDoc) =>
+      mount(AgentConfigEffectiveView, {
+        props: {
+          effectiveDoc: mergePatch<ConfigDoc>(base, CTOR_REMOVED),
+          base,
+          appliedOverlay: CTOR_REMOVED,
+          appliedRevisionNote: null,
+          filename: 'x.yaml',
+        },
+        global: globalWith(piniaWith(READER)),
+      }).find('[data-test="plugin-card-constructor"]');
+    // The file has it and the overlay removes it: a "Removed by overlay" card.
+    const withCtor = mergePatch<ConfigDoc>(baseConfig, {
+      plugins: { constructor: { source: 'ghcr.io/x/ctor:v1' } },
+    });
+    expect(removedCtor(withCtor).text()).toContain('Removed by overlay');
+    // The file lacks it: no card (Object#constructor is not a plugin).
+    expect(removedCtor(baseConfig).exists()).toBe(false);
+  });
 });
+
+const CTOR_REMOVED: OverlayDoc = JSON.parse('{"plugins":{"constructor":null}}');
diff --git a/src/components/agents/config/__tests__/PluginLibVersion.spec.ts b/src/components/agents/config/__tests__/PluginLibVersion.spec.ts
index 956617f4..3c4fafd1 100644
--- a/src/components/agents/config/__tests__/PluginLibVersion.spec.ts
+++ b/src/components/agents/config/__tests__/PluginLibVersion.spec.ts
@@ -49,6 +49,9 @@ describe('plugin agent library badge (R76)', () => {
   });
 
   it('shows nothing for agents that do not report plugins', () => {
-    expect(view(null).find('[data-test="plugin-lib"]').exists()).toBe(false);
+    const w = view(null);
+    // The card renders: only its library badge is absent.
+    expect(w.find('[data-test="plugin-card-local-ssh"]').exists()).toBe(true);
+    expect(w.find('[data-test="plugin-lib"]').exists()).toBe(false);
   });
 });
diff --git a/src/components/agents/config/__tests__/PluginTabsWorkspace.spec.ts b/src/components/agents/config/__tests__/PluginTabsWorkspace.spec.ts
new file mode 100644
index 00000000..2c1ce18f
--- /dev/null
+++ b/src/components/agents/config/__tests__/PluginTabsWorkspace.spec.ts
@@ -0,0 +1,158 @@
+// The plugin tabs with a workspace: removal hints for any plugin name, "Add plugin" never
+// replacing a plugin the saved overlay defines, and editing that waits for every instance file.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  enableAutoUnmount,
+  flushPromises,
+  mount,
+  type VueWrapper,
+} from '@vue/test-utils';
+import type { AgentConfigApi } from '@/composables/agent-config/api-types';
+import type { ConfigWorkspace } from '@/composables/agent-config/useConfigWorkspace';
+import { resetAgentDrafts } from '@/composables/agent-config/draftRegistry';
+import type { AgentInstanceDetail, PluginDoc } from '@/types/agent-config';
+import {
+  configRev7,
+  instanceIds,
+} from '@/composables/agent-config/__tests__/fixtures';
+import { clone } from '@/utils/agent-config/merge-patch';
+import {
+  ADMIN,
+  fakeApi,
+  globalWith,
+  piniaWith,
+  workspaceHost,
+} from './helpers';
+
+vi.mock('@/components/code-editor', () => import('./codeEditorMock'));
+
+import AgentConfigEffectiveView from '../AgentConfigEffectiveView.vue';
+
+enableAutoUnmount(afterEach);
+
+async function mountView(api: AgentConfigApi) {
+  const out: { ws?: ConfigWorkspace } = {};
+  const host = workspaceHost(
+    api,
+    AgentConfigEffectiveView,
+    () => ({
+      effectiveDoc: out.ws!.state.selectedInstance.value?.effective ?? null,
+      base: out.ws!.state.selectedInstance.value?.base ?? null,
+      appliedOverlay: out.ws!.state.appliedOverlay.value,
+      appliedRevisionNote: null,
+      filename: 'x.yaml',
+    }),
+    out,
+  );
+  const wrapper = mount(host, {
+    global: globalWith(piniaWith(ADMIN), { teleport: true }),
+    attachTo: document.body,
+  });
+  await flushPromises();
+  return { wrapper, ws: out.ws! };
+}
+
+/** ip-b's detail comes from `b` (deferred or failing); the others load at once. */
+function apiWithB(b: (d: AgentInstanceDetail) => Promise<AgentInstanceDetail>) {
+  const fallback = fakeApi().getInstance;
+  return fakeApi({
+    getInstance: vi.fn(async (agentId: string, id: string) => {
+      const d = await fallback(agentId, id);
+      return id === instanceIds.b ? b(d) : d;
+    }),
+  });
+}
+
+const addButton = (w: VueWrapper) => w.find('[data-test="add-plugin"]');
+
+describe('PluginTabs with a workspace', () => {
+  beforeEach(() => resetAgentDrafts());
+
+  it('marks the pending removal of a plugin named "constructor"', async () => {
+    // Typed as a plain string, so `plugins[name]` is the index signature.
+    const name: string = 'constructor';
+    const ctor: PluginDoc = { source: 'ghcr.io/compliance-framework/ctor:v1' };
+    const fallback = fakeApi().getInstance;
+    const { wrapper, ws } = await mountView(
+      fakeApi({
+        getInstance: vi.fn(async (agentId: string, id: string) => {
+          const d = clone(await fallback(agentId, id));
+          if (d.base) d.base.plugins![name] = clone(ctor);
+          if (d.effective) d.effective.plugins![name] = clone(ctor);
+          return d;
+        }),
+      }),
+    );
+    const tab = () => wrapper.find('[data-test="plugin-tab-constructor"]');
+    expect(tab().exists()).toBe(true);
+    ws.draft.makeAbsent('/plugins/constructor');
+    await flushPromises();
+    expect(tab().find('[data-test="plugin-tab-hint-removal"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it('refuses to add a plugin the saved overlay defines, and keeps its definition', async () => {
+    // r7 also adds `extra`; the instances do not run it yet, so it has no tab.
+    const saved = clone(configRev7);
+    saved.overlay!.plugins!.extra = {
+      source: 'ghcr.io/compliance-framework/plugin-extra:v1',
+      config: { region: 'eu-west-1' },
+      policy_data: { threshold: 5 },
+    };
+    const { wrapper, ws } = await mountView(
+      fakeApi({ getConfig: vi.fn().mockResolvedValue(saved) }),
+    );
+    expect(wrapper.find('[data-test="plugin-tab-extra"]').exists()).toBe(false);
+
+    await addButton(wrapper).trigger('click');
+    await wrapper.find('[data-test="add-plugin-name"]').setValue('extra');
+    await wrapper
+      .find('[data-test="add-plugin-source"]')
+      .setValue('ghcr.io/compliance-framework/plugin-extra:v2');
+    expect(wrapper.text()).toContain('A plugin with this name exists');
+    await wrapper.find('[data-test="add-plugin-form"]').trigger('submit');
+    await flushPromises();
+
+    const extra = ws.draft.overlay.value.plugins?.extra;
+    expect(extra?.source).toBe('ghcr.io/compliance-framework/plugin-extra:v1');
+    expect(extra?.config).toEqual({ region: 'eu-west-1' });
+    expect(extra?.policy_data).toEqual({ threshold: 5 });
+  });
+
+  it('waits for every instance file before Add plugin', async () => {
+    let releaseB!: () => void;
+    const { wrapper } = await mountView(
+      apiWithB(
+        (d) => new Promise<AgentInstanceDetail>((r) => (releaseB = () => r(d))),
+      ),
+    );
+    expect(wrapper.find('[data-test="bases-loading"]').exists()).toBe(true);
+    expect(addButton(wrapper).attributes('disabled')).toBeDefined();
+
+    releaseB();
+    await flushPromises();
+    expect(wrapper.find('[data-test="bases-loading"]').exists()).toBe(false);
+    expect(addButton(wrapper).attributes('disabled')).toBeUndefined();
+  });
+
+  it('names an instance file that failed to load, and Retry loads it', async () => {
+    let fail = true;
+    const { wrapper } = await mountView(
+      apiWithB(async (d) => {
+        if (fail) throw new Error('502');
+        return d;
+      }),
+    );
+    const notice = wrapper.find('[data-test="bases-failed"]');
+    expect(notice.exists()).toBe(true);
+    expect(notice.text()).toContain('ip-b');
+    expect(addButton(wrapper).attributes('disabled')).toBeDefined();
+
+    fail = false;
+    await wrapper.find('[data-test="bases-retry"]').trigger('click');
+    await flushPromises();
+    expect(wrapper.find('[data-test="bases-failed"]').exists()).toBe(false);
+    expect(addButton(wrapper).attributes('disabled')).toBeUndefined();
+  });
+});
diff --git a/src/components/agents/config/editor/AddPluginAction.vue b/src/components/agents/config/editor/AddPluginAction.vue
index 43c4bf75..1eb81b3a 100644
--- a/src/components/agents/config/editor/AddPluginAction.vue
+++ b/src/components/agents/config/editor/AddPluginAction.vue
@@ -48,10 +48,18 @@ import {
   type FieldAccess,
 } from '@/utils/agent-config/field-access';
 
-const props = defineProps<{ access: FieldAccess }>();
+const props = defineProps<{
+  access: FieldAccess;
+  /** Why adding waits regardless of R71 (e.g. instance files still loading); '' = it does not. */
+  blockedReason?: string;
+}>();
 defineEmits<{ open: [] }>();
 
 const descId = `add-plugin-${useId()}`;
-const disabled = computed(() => props.access.state === 'readonly');
-const tooltip = computed(() => addPluginTooltip(props.access));
+const disabled = computed(
+  () => props.access.state === 'readonly' || !!props.blockedReason,
+);
+const tooltip = computed(
+  () => props.blockedReason || addPluginTooltip(props.access),
+);
 </script>