From 452eb54dd1b9d47c0c76f6c736b0d08eabbdc6fd Mon Sep 17 00:00:00 2001
From: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
Date: Mon, 5 Oct 2026 07:40:53 -0300
Subject: [PATCH 1/4] feat(agent-config): structured policy_data tree editor

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

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../config/effective/PolicyDataAddForm.vue    | 139 ++++++
 .../config/effective/PolicyDataNode.vue       | 414 ++++++++++++++++++
 .../config/effective/PolicyDataSection.vue    | 211 +++++++++
 .../config/effective/PolicyDataTree.vue       |  54 +++
 .../config/effective/policyDataContext.ts     |  25 ++
 5 files changed, 843 insertions(+)
 create mode 100644 src/components/agents/config/effective/PolicyDataAddForm.vue
 create mode 100644 src/components/agents/config/effective/PolicyDataNode.vue
 create mode 100644 src/components/agents/config/effective/PolicyDataSection.vue
 create mode 100644 src/components/agents/config/effective/PolicyDataTree.vue
 create mode 100644 src/components/agents/config/effective/policyDataContext.ts

diff --git a/src/components/agents/config/effective/PolicyDataAddForm.vue b/src/components/agents/config/effective/PolicyDataAddForm.vue
new file mode 100644
index 00000000..155db8c0
--- /dev/null
+++ b/src/components/agents/config/effective/PolicyDataAddForm.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="py-0.5">
+    <button
+      v-if="!open"
+      type="button"
+      class="text-xs text-sky-700 hover:underline dark:text-sky-300"
+      :data-test="`pd-add-${testKey}`"
+      @click="open = true"
+    >
+      <i class="pi pi-plus mr-1 text-[0.65rem]" />{{
+        inArray ? 'Add item' : 'Add key'
+      }}
+    </button>
+    <form
+      v-else
+      class="flex flex-wrap items-start gap-2"
+      :data-test="`pd-add-form-${testKey}`"
+      @submit.prevent="submit"
+      @keydown.esc.prevent="close"
+    >
+      <InputText
+        v-if="!inArray"
+        v-model="key"
+        size="small"
+        class="w-40 font-mono"
+        placeholder="key"
+        :aria-label="`New key in ${where}`"
+        data-test="pd-new-key"
+      />
+      <label
+        v-if="itemType === 'boolean'"
+        class="inline-flex items-center gap-1.5 text-xs"
+      >
+        <input
+          v-model="checked"
+          type="checkbox"
+          aria-label="New value"
+          data-test="pd-new-value"
+        />
+        {{ checked ? 'true' : 'false' }}
+      </label>
+      <InputText
+        v-else
+        v-model="text"
+        size="small"
+        class="min-w-32 flex-1 font-mono"
+        :placeholder="itemType ? `${itemType} value` : 'value'"
+        :inputmode="itemType === 'number' ? 'decimal' : undefined"
+        aria-label="New value"
+        data-test="pd-new-value"
+      />
+      <SecondaryButton
+        size="small"
+        type="submit"
+        :disabled="!!error"
+        data-test="pd-add-submit"
+        >Add</SecondaryButton
+      >
+      <TertiaryButton size="small" type="button" @click="close"
+        >Cancel</TertiaryButton
+      >
+      <p
+        v-if="!itemType"
+        class="w-full text-xs text-gray-500 dark:text-slate-400"
+      >
+        A JSON value (5, true, [], {}, "text") keeps its type; anything else is
+        text.
+      </p>
+      <p
+        v-if="error && (key || text)"
+        class="w-full text-xs text-red-600 dark:text-red-400"
+        data-test="pd-add-error"
+      >
+        {{ error }}
+      </p>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+// "Add key" / "Add item" of one object / array in the structured policy_data editor. There is
+// no type selector: a list whose items share a scalar type takes new items of that type;
+// otherwise the value is read as a JSON literal when it parses, else as text.
+import { computed, ref } from 'vue';
+import InputText from '@/volt/InputText.vue';
+import SecondaryButton from '@/volt/SecondaryButton.vue';
+import TertiaryButton from '@/volt/TertiaryButton.vue';
+import { parseNewValue, type JsonType } from '@/utils/agent-config/policy-data';
+import { NULL_KEY_ERROR } from './nullKeys';
+
+const props = defineProps<{
+  /** Adding to an array (no key) rather than an object. */
+  inArray: boolean;
+  /** The scalar type the new value must have (an array's items), or null. */
+  itemType: JsonType | null;
+  /** Keys already in the object (duplicates are refused). */
+  existing: readonly string[];
+  /** Human name of the container, for labels. */
+  where: string;
+  testKey: string;
+}>();
+const emit = defineEmits<{ add: [key: string | null, value: unknown] }>();
+
+const open = ref(false);
+const key = ref('');
+const text = ref('');
+const checked = ref(false);
+
+const parsed = computed(() =>
+  props.itemType === 'boolean'
+    ? { value: checked.value, error: '' }
+    : parseNewValue(text.value, props.itemType),
+);
+const error = computed(() => {
+  if (!props.inArray) {
+    if (!key.value) return 'Enter a key';
+    if (props.existing.includes(key.value)) return 'This key exists';
+  }
+  if (parsed.value.error) return parsed.value.error;
+  // RFC 7396: null at a key means "delete" in the overlay. Arrays are written whole, so their
+  // items may be null.
+  if (!props.inArray && parsed.value.value === null)
+    return `${NULL_KEY_ERROR}; use Remove`;
+  return '';
+});
+
+function close() {
+  open.value = false;
+  key.value = '';
+  text.value = '';
+  checked.value = false;
+}
+
+function submit() {
+  if (error.value) return;
+  emit('add', props.inArray ? null : key.value, parsed.value.value);
+  close();
+}
+</script>
diff --git a/src/components/agents/config/effective/PolicyDataNode.vue b/src/components/agents/config/effective/PolicyDataNode.vue
new file mode 100644
index 00000000..93367c3f
--- /dev/null
+++ b/src/components/agents/config/effective/PolicyDataNode.vue
@@ -0,0 +1,414 @@
+<template>
+  <li
+    :data-test="`pd-node-${ptr}`"
+    :data-pending="isChanged ? 'true' : undefined"
+  >
+    <div class="flex flex-wrap items-center gap-1.5 py-0.5">
+      <button
+        v-if="container"
+        type="button"
+        class="w-4 text-gray-500 hover:text-sky-700 dark:text-slate-400 dark:hover:text-sky-300"
+        :aria-expanded="expanded"
+        :aria-label="`${expanded ? 'Collapse' : 'Expand'} ${label}`"
+        :data-test="`pd-toggle-${ptr}`"
+        @click="expanded = !expanded"
+      >
+        <i
+          class="pi text-[0.65rem]"
+          :class="expanded ? 'pi-chevron-down' : 'pi-chevron-right'"
+        />
+      </button>
+      <span v-else class="w-4" />
+      <span
+        class="min-w-0 font-mono text-xs break-all"
+        :class="
+          inArray
+            ? 'text-gray-400 dark:text-slate-500'
+            : 'text-gray-700 dark:text-slate-300'
+        "
+        >{{ label }}</span
+      >
+      <span
+        v-if="editable && !editing && !maskLocked"
+        class="inline-flex shrink-0 gap-0.5"
+        data-test="pd-actions"
+      >
+        <button
+          v-if="!container && type !== 'null'"
+          type="button"
+          class="rounded p-0.5 text-gray-500 hover:bg-slate-200 hover:text-sky-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-sky-300"
+          :aria-label="`Edit ${label}`"
+          :data-test="`pd-edit-${ptr}`"
+          @click="startEdit"
+        >
+          <i class="pi pi-pencil text-[0.65rem]" />
+        </button>
+        <button
+          type="button"
+          class="rounded p-0.5 text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10"
+          :aria-label="`Remove ${label}`"
+          :data-test="`pd-remove-${ptr}`"
+          @click="$emit('remove', ptr)"
+        >
+          <i class="pi pi-trash text-[0.65rem]" />
+        </button>
+      </span>
+      <template v-if="!editing">
+        <span
+          v-if="container"
+          class="text-xs text-gray-500 dark:text-slate-400"
+          >{{ summary }}</span
+        >
+        <template v-else-if="masked">
+          <span class="font-mono text-xs text-gray-500 dark:text-slate-400">{{
+            value
+          }}</span>
+          <ConfigPill
+            v-tooltip.top="MASKED_TOOLTIP"
+            severity="secondary"
+            tabindex="0"
+            :aria-label="MASKED_TOOLTIP"
+            data-test="pd-masked"
+            >masked</ConfigPill
+          >
+        </template>
+        <span
+          v-else-if="typeof value === 'string'"
+          class="font-mono text-xs break-all text-gray-900 dark:text-slate-200"
+          :data-test="`pd-value-${ptr}`"
+          >"<template v-for="(seg, i) in segments" :key="i"
+            ><mark
+              v-if="seg.env"
+              class="rounded bg-violet-100 px-0.5 text-violet-800 dark:bg-violet-500/20 dark:text-violet-200"
+              data-test="pd-env"
+              >{{ seg.text }}</mark
+            ><template v-else>{{ seg.text }}</template></template
+          >"</span
+        >
+        <span
+          v-else
+          class="font-mono text-xs"
+          :class="SCALAR_CLASSES[type]"
+          :data-test="`pd-value-${ptr}`"
+          >{{ scalarText(value) }}</span
+        >
+        <ConfigPill
+          v-if="hasEnv"
+          v-tooltip.top="ENV_TOOLTIP"
+          severity="warn"
+          tabindex="0"
+          :aria-label="ENV_TOOLTIP"
+          data-test="pd-env-pill"
+          >env</ConfigPill
+        >
+      </template>
+      <i
+        v-if="listHasMask && !maskLocked"
+        v-tooltip.top="MASKED_LIST_TOOLTIP"
+        role="img"
+        tabindex="0"
+        class="pi pi-lock text-xs text-gray-400 dark:text-slate-500"
+        :aria-label="MASKED_LIST_TOOLTIP"
+        :data-test="`pd-masked-list-${ptr}`"
+      />
+      <AccessIcon
+        v-if="note"
+        :state="note.state"
+        :text="note.text"
+        :test-id="`pd-access-${ptr}`"
+      />
+      <PendingPill
+        v-if="isChanged"
+        compact
+        :undo-label="`Undo the pending change to ${label}`"
+        :test-id="`pd-pending-${ptr}`"
+        :undo-test-id="`pd-undo-${ptr}`"
+        @undo="tree!.revert(ptr)"
+      />
+    </div>
+
+    <form
+      v-if="editing"
+      class="ml-6 flex flex-wrap items-start gap-2 py-1"
+      :data-test="`pd-edit-form-${ptr}`"
+      @submit.prevent="apply"
+      @keydown.esc.prevent="editing = false"
+    >
+      <label
+        v-if="editType === 'boolean'"
+        class="inline-flex items-center gap-1.5 text-xs"
+      >
+        <input
+          v-model="checked"
+          type="checkbox"
+          :aria-label="`Value of ${label}`"
+          data-test="pd-edit-value"
+        />
+        {{ checked ? 'true' : 'false' }}
+      </label>
+      <InputText
+        v-else
+        v-model="text"
+        size="small"
+        class="min-w-40 flex-1 font-mono"
+        :inputmode="editType === 'number' ? 'decimal' : undefined"
+        :placeholder="masked ? 'masked; type a new value' : ''"
+        :aria-label="`Value of ${label}`"
+        data-test="pd-edit-value"
+      />
+      <PrimaryButton
+        size="small"
+        type="submit"
+        :disabled="!!editError"
+        data-test="pd-edit-apply"
+        >Apply</PrimaryButton
+      >
+      <TertiaryButton size="small" type="button" @click="editing = false"
+        >Cancel</TertiaryButton
+      >
+      <p
+        v-if="editError"
+        class="w-full text-xs text-red-600 dark:text-red-400"
+        data-test="pd-edit-error"
+      >
+        {{ editError }}
+      </p>
+    </form>
+
+    <template v-if="container && expanded">
+      <ul
+        class="ml-2 border-l border-ccf-300 pl-3 dark:border-slate-700"
+        :aria-label="label"
+      >
+        <PolicyDataNode
+          v-for="child in shownChildren"
+          :key="child.ptr"
+          :label="Array.isArray(value) ? `[${child.key}]` : String(child.key)"
+          :value="child.value"
+          :ptr="child.ptr"
+          :depth="depth + 1"
+          :in-array="Array.isArray(value)"
+          :mask-locked="maskLocked || listHasMask"
+          @set="onChildSet"
+          @remove="onChildRemove"
+        />
+        <li v-if="hiddenCount" class="py-0.5">
+          <button
+            type="button"
+            class="text-xs text-sky-700 hover:underline dark:text-sky-300"
+            :data-test="`pd-show-all-${ptr}`"
+            @click="showAll = true"
+          >
+            Show {{ hiddenCount }} more
+          </button>
+        </li>
+        <li
+          v-if="!children.length"
+          class="py-0.5 text-xs text-gray-500 dark:text-slate-400"
+        >
+          {{ Array.isArray(value) ? 'No items.' : 'No keys.' }}
+        </li>
+      </ul>
+      <div v-if="editable && !maskLocked && !listHasMask" class="ml-5">
+        <PolicyDataAddForm
+          :in-array="Array.isArray(value)"
+          :item-type="Array.isArray(value) ? itemType(value) : null"
+          :existing="children.map((c) => String(c.key))"
+          :where="label"
+          :test-key="ptr"
+          @add="addChild"
+        />
+      </div>
+    </template>
+  </li>
+</template>
+
+<script setup lang="ts">
+// One key / array item of the structured policy_data view (recursive), with its own pencil,
+// remove and (for objects / arrays) add actions. A value keeps its JSON type when edited
+// (text for strings, a number check for numbers, a checkbox for booleans); changing a type is
+// done in the raw JSON view. Object keys are written at their own pointer; an array item edit
+// is emitted as the whole new array at the array's pointer (RFC 7396), and the draft shows it
+// as an element change. Objects / arrays collapse beyond COLLAPSE_DEPTH or COLLAPSE_SIZE.
+import { computed, inject, ref, watch } from 'vue';
+import InputText from '@/volt/InputText.vue';
+import { TOOLTIPS } from '@/config/tooltips';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import TertiaryButton from '@/volt/TertiaryButton.vue';
+import { escapeToken, parsePointer } from '@/utils/agent-config/json-pointer';
+import { clone, isPlainObject } from '@/utils/agent-config/merge-patch';
+import {
+  CHILD_PAGE,
+  containsMask,
+  envRefs,
+  envSegments,
+  isContainer,
+  isMasked,
+  itemType,
+  jsonType,
+  parseScalar,
+  removeIn,
+  scalarText,
+  setIn,
+  sizeOf,
+  startsCollapsed,
+  type JsonType,
+} from '@/utils/agent-config/policy-data';
+import ConfigPill from '../ConfigPill.vue';
+import AccessIcon from './AccessIcon.vue';
+import PendingPill from './PendingPill.vue';
+import PolicyDataAddForm from './PolicyDataAddForm.vue';
+import { POLICY_DATA_TREE_KEY } from './policyDataContext';
+
+const props = defineProps<{
+  label: string;
+  value: unknown;
+  ptr: string;
+  depth: number;
+  /** An array item (its label is the index). */
+  inArray: boolean;
+  /**
+   * Inside a list that holds a masked value: the list can only be written whole (RFC 7396),
+   * which would copy the mask, so its items are not edited here (the raw view can, by
+   * retyping the masked values).
+   */
+  maskLocked?: boolean;
+}>();
+const emit = defineEmits<{
+  set: [ptr: string, value: unknown];
+  remove: [ptr: string];
+}>();
+
+const tree = inject(POLICY_DATA_TREE_KEY, null);
+
+const MASKED_TOOLTIP = TOOLTIPS['agents.config.policyData.masked'];
+const ENV_TOOLTIP = TOOLTIPS['agents.config.policyData.env'];
+const MASKED_LIST_TOOLTIP = TOOLTIPS['agents.config.policyData.maskedList'];
+const SCALAR_CLASSES: Partial<Record<JsonType, string>> = {
+  number: 'text-sky-800 dark:text-sky-200',
+  boolean: 'text-amber-800 dark:text-amber-200',
+  null: 'text-gray-500 italic dark:text-slate-400',
+};
+
+const type = computed(() => jsonType(props.value));
+const container = computed(() => isContainer(props.value));
+const masked = computed(() => isMasked(props.value));
+const segments = computed(() =>
+  typeof props.value === 'string' ? envSegments(props.value) : [],
+);
+const hasEnv = computed(
+  () => typeof props.value === 'string' && envRefs(props.value).length > 0,
+);
+const summary = computed(() => {
+  const n = sizeOf(props.value);
+  return Array.isArray(props.value)
+    ? `${n} item${n === 1 ? '' : 's'}`
+    : `${n} key${n === 1 ? '' : 's'}`;
+});
+
+const editable = computed(() => !!tree && tree.canEdit(props.ptr));
+const note = computed(() => tree?.accessNote(props.ptr) ?? null);
+/** A list holding a masked value (at any depth): its items are locked (see maskLocked). */
+const listHasMask = computed(
+  () => Array.isArray(props.value) && containsMask(props.value),
+);
+const isChanged = computed(() => !!tree && tree.changed(props.ptr));
+
+const expanded = ref(!startsCollapsed(props.depth, props.value));
+const showAll = ref(false);
+const children = computed(() => {
+  const v = props.value;
+  const at = (k: string | number) => `${props.ptr}/${escapeToken(String(k))}`;
+  if (Array.isArray(v)) {
+    return v.map((value, key) => ({ key, value, ptr: at(key) }));
+  }
+  if (isPlainObject(v)) {
+    return Object.entries(v).map(([key, value]) => ({
+      key,
+      value,
+      ptr: at(key),
+    }));
+  }
+  return [];
+});
+const shownChildren = computed(() =>
+  showAll.value ? children.value : children.value.slice(0, CHILD_PAGE),
+);
+const hiddenCount = computed(
+  () => children.value.length - shownChildren.value.length,
+);
+
+// ---- Editing one value, keeping its type ----
+const editing = ref(false);
+/** The type the editor keeps: a masked value is replaced by a string. */
+const editType = computed<JsonType>(() =>
+  masked.value ? 'string' : type.value,
+);
+const text = ref('');
+const checked = ref(false);
+
+// Array items are keyed by index: after a sibling is removed (or an undo splices the list)
+// this node shows another item, so an open editor would write the old text over it. Close it,
+// and re-derive the collapsed state when the value's kind changes.
+watch(
+  () => props.value,
+  (next, prev) => {
+    editing.value = false;
+    if (jsonType(next) !== jsonType(prev)) {
+      expanded.value = !startsCollapsed(props.depth, next);
+    }
+  },
+);
+
+function startEdit() {
+  text.value = masked.value ? '' : scalarText(props.value);
+  checked.value = props.value === true;
+  editing.value = true;
+}
+
+const editError = computed(() => {
+  if (editType.value === 'boolean') return '';
+  if (masked.value && !text.value) {
+    return 'Type a new value, or Cancel to keep the host value';
+  }
+  return parseScalar(text.value, editType.value).error;
+});
+
+function apply() {
+  if (editError.value) return;
+  const next =
+    editType.value === 'boolean'
+      ? checked.value
+      : parseScalar(text.value, editType.value).value;
+  editing.value = false;
+  emit('set', props.ptr, next);
+}
+
+// ---- Children: a change anywhere inside an array becomes the whole new array (RFC 7396) ----
+/** `childPtr` relative to this node, or null when this node is not an array. */
+function inside(childPtr: string): string[] | null {
+  if (!Array.isArray(props.value)) return null;
+  return parsePointer(childPtr).slice(parsePointer(props.ptr).length);
+}
+
+function onChildSet(childPtr: string, v: unknown) {
+  const rel = inside(childPtr);
+  if (!rel) emit('set', childPtr, v);
+  else emit('set', props.ptr, setIn(props.value as unknown[], rel, v));
+}
+
+function onChildRemove(childPtr: string) {
+  const rel = inside(childPtr);
+  if (!rel) emit('remove', childPtr);
+  else emit('set', props.ptr, removeIn(props.value as unknown[], rel));
+}
+
+function addChild(key: string | null, v: unknown) {
+  expanded.value = true;
+  if (Array.isArray(props.value)) {
+    emit('set', props.ptr, [...clone(props.value), v]);
+  } else {
+    emit('set', `${props.ptr}/${escapeToken(key ?? '')}`, v);
+  }
+}
+</script>
diff --git a/src/components/agents/config/effective/PolicyDataSection.vue b/src/components/agents/config/effective/PolicyDataSection.vue
new file mode 100644
index 00000000..5fa00843
--- /dev/null
+++ b/src/components/agents/config/effective/PolicyDataSection.vue
@@ -0,0 +1,211 @@
+<template>
+  <div
+    class="min-w-0"
+    :data-test="`field-${ptr}`"
+    :data-state="access.state"
+    :data-pending="pending ? 'true' : undefined"
+  >
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="text-gray-500 dark:text-slate-400">Policy data</span>
+      <span>{{ keyCount }} key{{ keyCount === 1 ? '' : 's' }}</span>
+      <ProvenanceBadge v-if="provenance !== 'file'" :provenance="provenance" />
+      <AccessIcon v-if="showAccess" :state="access.state" :text="accessText" />
+      <PendingPill
+        v-if="pending"
+        undo-label="Undo the pending changes to policy data"
+        :test-id="`pending-${ptr}`"
+        :undo-test-id="`undo-${ptr}`"
+        @undo="ws!.draft.revertPointer(ptr)"
+      />
+      <SelectButton
+        v-if="editable"
+        class="ml-auto"
+        :model-value="mode"
+        :options="modeOptions"
+        option-label="label"
+        option-value="value"
+        option-disabled="disabled"
+        :allow-empty="false"
+        :aria-label="`Policy data view for ${plugin}`"
+        data-test="policy-data-mode"
+        @update:model-value="setMode"
+      />
+    </div>
+    <PolicyDataTree
+      v-if="mode === 'structured' && (keyCount || editable)"
+      class="mt-1 pl-3"
+      :value="shown"
+      :ptr="ptr"
+      :label="`Policy data of ${plugin}`"
+      :test-id="`policy-data-view-${plugin}`"
+    />
+    <div v-else-if="mode === 'raw'" class="mt-2 space-y-1">
+      <CodeEditor
+        :model-value="text"
+        language="json"
+        min-height="140px"
+        max-height="320px"
+        :label="`Policy data for ${plugin}`"
+        @update:model-value="onInput"
+      />
+      <p
+        v-if="error"
+        class="text-xs text-red-600 dark:text-red-400"
+        data-test="policy-data-error"
+      >
+        {{ error }} Fix the JSON to switch back to the structured view.
+      </p>
+      <div>
+        <button
+          v-if="inOverlay"
+          type="button"
+          class="text-xs text-sky-700 hover:underline dark:text-sky-300"
+          data-test="policy-data-reset"
+          @click="reset"
+        >
+          Use the file value
+        </button>
+      </div>
+    </div>
+    <FieldIssues v-if="editable" :ptr="ptr" />
+  </div>
+</template>
+
+<script setup lang="ts">
+// A plugin's policy_data on the Effective view (R69, R71): a structured tree in which each key
+// and list item is edited, removed or added on its own (PolicyDataNode), and a raw JSON view
+// for type changes and bulk edits. Both record only the real changes as a minimal merge patch
+// (policy-data-patch.ts, through the draft's setValue / removeValue / applyOps); an untouched
+// masked report value never reaches the overlay (R25). Each pointer carries its R71 access
+// (the tree notes a pointer only where it differs from this section's state). Without a
+// workspace or agent:configure it is a read-only view of the reported value.
+import { computed, provide, ref, watch } from 'vue';
+import SelectButton from '@/volt/SelectButton.vue';
+import { CodeEditor } from '@/components/code-editor';
+import { useWorkspace } from '@/composables/agent-config/useConfigWorkspace';
+import { getAt, hasAt, pointer } from '@/utils/agent-config/json-pointer';
+import {
+  deepEqual,
+  isPlainObject,
+  type PlainObject,
+} from '@/utils/agent-config/merge-patch';
+import { diffOps } from '@/utils/agent-config/policy-data-patch';
+import { accessTooltip, fieldAccess } from '@/utils/agent-config/field-access';
+import type { Provenance } from '@/utils/agent-config/provenance';
+import ProvenanceBadge from '../ProvenanceBadge.vue';
+import FieldIssues from '../editor/FieldIssues.vue';
+import AccessIcon from './AccessIcon.vue';
+import PendingPill from './PendingPill.vue';
+import { NULL_KEY_ERROR, opsSetNullKey } from './nullKeys';
+import PolicyDataTree from './PolicyDataTree.vue';
+import { POLICY_DATA_TREE_KEY } from './policyDataContext';
+
+const props = defineProps<{
+  plugin: string;
+  /** The reported (effective) policy_data of the shown instance. */
+  reported: unknown;
+  provenance: Provenance;
+}>();
+
+const ws = useWorkspace();
+const ptr = computed(() => pointer('plugins', props.plugin, 'policy_data'));
+
+const access = computed(() =>
+  ws ? ws.accessAt(ptr.value) : fieldAccess(ptr.value, []),
+);
+const accessText = computed(() => accessTooltip(access.value));
+const showAccess = computed(
+  () => !!ws && ws.ready.value && ws.canConfigure.value,
+);
+const editable = computed(
+  () => !!ws && ws.ready.value && ws.canEditPointer(ptr.value),
+);
+const pending = computed(() => !!ws && ws.draft.pendingAt(ptr.value));
+const inOverlay = computed(
+  () => !!ws && hasAt(ws.draft.overlay.value, ptr.value),
+);
+
+/** Editors see the draft's effective value (their edits included); readers the report. */
+const shown = computed<PlainObject>(() => {
+  const v = editable.value
+    ? getAt(ws!.draft.effectiveDraft.value, ptr.value)
+    : props.reported;
+  return isPlainObject(v) ? v : {};
+});
+const keyCount = computed(() => Object.keys(shown.value).length);
+
+provide(POLICY_DATA_TREE_KEY, {
+  canEdit: (p) => editable.value && ws!.canEditPointer(p),
+  accessNote: (p) => {
+    if (!showAccess.value) return null;
+    const a = ws!.accessAt(p);
+    if (a.state === access.value.state) return null;
+    if (a.state !== 'restricted' && a.state !== 'readonly') return null;
+    return { state: a.state, text: accessTooltip(a) };
+  },
+  changed: (p) => !!ws && ws.draft.changedPaths.value.includes(p),
+  revert: (p) => ws?.draft.revertPointer(p),
+  set: (p, v) => ws?.draft.setValue(p, v, ptr.value),
+  remove: (p) => ws?.draft.removeValue(p),
+});
+
+// ---- Structured / raw JSON ----
+const error = ref('');
+const mode = ref<'structured' | 'raw'>('structured');
+const modeOptions = computed(() => [
+  { label: 'Structured', value: 'structured', disabled: !!error.value },
+  { label: 'Raw JSON', value: 'raw', disabled: false },
+]);
+function currentText(): string {
+  return JSON.stringify(shown.value, null, 2);
+}
+const text = ref(currentText());
+
+function setMode(next: 'structured' | 'raw') {
+  if (next === 'structured' && error.value) return;
+  if (next === 'raw') text.value = currentText();
+  mode.value = next;
+}
+
+// Follow external changes (structured edits, undo, raw YAML) without clobbering in-progress
+// invalid text.
+watch(shown, (v) => {
+  if (error.value) return;
+  try {
+    if (deepEqual(JSON.parse(text.value), v)) return;
+  } catch {
+    return;
+  }
+  text.value = currentText();
+});
+
+function onInput(value: string) {
+  text.value = value;
+  let parsed: unknown;
+  try {
+    parsed = value.trim() ? JSON.parse(value) : {};
+  } catch (e) {
+    error.value = `Invalid JSON: ${(e as Error).message}.`;
+    return;
+  }
+  if (!isPlainObject(parsed)) {
+    error.value = 'Policy data must be a JSON object.';
+    return;
+  }
+  // Only what really changed, at the pointers that changed.
+  const ops = diffOps(ptr.value, shown.value, parsed);
+  // A new null at a key would record a deletion (RFC 7396); nulls inside arrays are kept.
+  if (opsSetNullKey(ops)) {
+    error.value = `${NULL_KEY_ERROR}: delete the key instead.`;
+    return;
+  }
+  error.value = '';
+  ws?.draft.applyOps(ops, ptr.value);
+}
+
+function reset() {
+  ws?.draft.unset(ptr.value);
+  error.value = '';
+  text.value = currentText();
+}
+</script>
diff --git a/src/components/agents/config/effective/PolicyDataTree.vue b/src/components/agents/config/effective/PolicyDataTree.vue
new file mode 100644
index 00000000..19c803a9
--- /dev/null
+++ b/src/components/agents/config/effective/PolicyDataTree.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="text-sm" :data-test="testId">
+    <ul v-if="entries.length" :aria-label="label">
+      <PolicyDataNode
+        v-for="[key, value] in entries"
+        :key="key"
+        :label="key"
+        :value="value"
+        :ptr="`${ptr}/${escapeToken(key)}`"
+        :depth="0"
+        :in-array="false"
+        @set="(p, v) => tree?.set(p, v)"
+        @remove="(p) => tree?.remove(p)"
+      />
+    </ul>
+    <p v-else class="text-xs text-gray-500 dark:text-slate-400">No keys.</p>
+    <PolicyDataAddForm
+      v-if="tree?.canEdit(ptr)"
+      class="ml-5"
+      :in-array="false"
+      :item-type="null"
+      :existing="entries.map(([k]) => k)"
+      :where="label"
+      test-key="root"
+      @add="(k, v) => tree?.set(`${ptr}/${escapeToken(k ?? '')}`, v)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+// Structured view of a plugin's policy_data: nested objects as collapsible key/value groups,
+// arrays as lists. With a PolicyDataTreeContext provided (PolicyDataSection) every key and
+// item is editable on its own; without one it only displays. Keys are used verbatim.
+import { computed, inject } from 'vue';
+import type { PlainObject } from '@/utils/agent-config/merge-patch';
+import { escapeToken } from '@/utils/agent-config/json-pointer';
+import PolicyDataNode from './PolicyDataNode.vue';
+import PolicyDataAddForm from './PolicyDataAddForm.vue';
+import { POLICY_DATA_TREE_KEY } from './policyDataContext';
+
+const props = withDefaults(
+  defineProps<{
+    value: PlainObject;
+    /** The policy_data pointer the keys live under. */
+    ptr: string;
+    label?: string;
+    testId?: string;
+  }>(),
+  { label: 'Policy data', testId: 'policy-data-tree' },
+);
+
+const tree = inject(POLICY_DATA_TREE_KEY, null);
+const entries = computed(() => Object.entries(props.value));
+</script>
diff --git a/src/components/agents/config/effective/policyDataContext.ts b/src/components/agents/config/effective/policyDataContext.ts
new file mode 100644
index 00000000..3346a214
--- /dev/null
+++ b/src/components/agents/config/effective/policyDataContext.ts
@@ -0,0 +1,25 @@
+// What the structured policy_data tree needs from its owner (PolicyDataSection): per-pointer
+// edit rights and access notes, pending markers, and the edits themselves. Without a provider
+// (read-only contexts) the tree only displays.
+
+import type { InjectionKey } from 'vue';
+
+export interface PolicyDataTreeContext {
+  /** Whether the value at `ptr` may be edited (agent:configure and R71 access). */
+  canEdit(ptr: string): boolean;
+  /** R71 note for `ptr` when it differs from the section's own state ('' otherwise). */
+  accessNote(
+    ptr: string,
+  ): { state: 'restricted' | 'readonly'; text: string } | null;
+  /** The draft changes exactly this pointer (an element of a list included). */
+  changed(ptr: string): boolean;
+  /** Undo the pending change at `ptr`. */
+  revert(ptr: string): void;
+  /** Set the effective value at `ptr` (arrays are passed whole). */
+  set(ptr: string, value: unknown): void;
+  /** Remove the key at `ptr`. */
+  remove(ptr: string): void;
+}
+
+export const POLICY_DATA_TREE_KEY: InjectionKey<PolicyDataTreeContext> =
+  Symbol('policy-data-tree');

From b839112eb64241a38e4e7978a42d38660bce0479 Mon Sep 17 00:00:00 2001
From: "ccf-lisa[bot]" <286799724+ccf-lisa[bot]@users.noreply.github.com>
Date: Tue, 6 Oct 2026 06:30:14 -0300
Subject: [PATCH 2/4] fix(agent-config): raw policy_data JSON rejects numbers
 it cannot save as typed

JSON.parse reads 1e999 as Infinity, which would be saved as null (an RFC
7396 delete of the key), and rounds integers past 2^53; the raw view now
shows an error instead of applying them, like the structured add form.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../agents/config/effective/PolicyDataSection.vue          | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/agents/config/effective/PolicyDataSection.vue b/src/components/agents/config/effective/PolicyDataSection.vue
index 5fa00843..13df1b7f 100644
--- a/src/components/agents/config/effective/PolicyDataSection.vue
+++ b/src/components/agents/config/effective/PolicyDataSection.vue
@@ -90,6 +90,7 @@ import {
   type PlainObject,
 } from '@/utils/agent-config/merge-patch';
 import { diffOps } from '@/utils/agent-config/policy-data-patch';
+import { hasUnstorableNumber } from '@/utils/agent-config/policy-data';
 import { accessTooltip, fieldAccess } from '@/utils/agent-config/field-access';
 import type { Provenance } from '@/utils/agent-config/provenance';
 import ProvenanceBadge from '../ProvenanceBadge.vue';
@@ -192,6 +193,12 @@ function onInput(value: string) {
     error.value = 'Policy data must be a JSON object.';
     return;
   }
+  // 1e999 parses as Infinity (saved as null, an RFC 7396 delete) and big integers lose digits.
+  if (hasUnstorableNumber(parsed)) {
+    error.value =
+      'A number cannot be saved as typed (not finite, or more digits than 2^53); quote it to keep it as text.';
+    return;
+  }
   // Only what really changed, at the pointers that changed.
   const ops = diffOps(ptr.value, shown.value, parsed);
   // A new null at a key would record a deletion (RFC 7396); nulls inside arrays are kept.

From 3fd15f650bed2d876a9e3567a3198108a964b539 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:19:14 -0300
Subject: [PATCH 3/4] fix(agent-config): policy_data lists warn when the files
 differ

A policy_data list is written whole (RFC 7396), so an edit gives every
instance the same list. Like the other editors (FieldHints), an
editable list whose value differs between the instances' files now says
"differs across instances" (useEditor().differsAcrossInstances, through
the tree context).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../__tests__/PolicyDataDiffers.spec.ts       | 89 +++++++++++++++++++
 .../config/effective/PolicyDataNode.vue       | 16 ++++
 .../config/effective/PolicyDataSection.vue    |  4 +
 .../config/effective/policyDataContext.ts     |  2 +
 4 files changed, 111 insertions(+)
 create mode 100644 src/components/agents/config/__tests__/PolicyDataDiffers.spec.ts

diff --git a/src/components/agents/config/__tests__/PolicyDataDiffers.spec.ts b/src/components/agents/config/__tests__/PolicyDataDiffers.spec.ts
new file mode 100644
index 00000000..d7a57ab1
--- /dev/null
+++ b/src/components/agents/config/__tests__/PolicyDataDiffers.spec.ts
@@ -0,0 +1,89 @@
+// policy_data lists whose value differs between the instances' files carry the same
+// "differs across instances" warning as the other editors (FieldHints): a list edit writes one
+// list for every instance.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  enableAutoUnmount,
+  flushPromises,
+  mount,
+  type VueWrapper,
+} from '@vue/test-utils';
+import { resetAgentDrafts } from '@/composables/agent-config/draftRegistry';
+import type { AgentInstanceDetail, ConfigDoc } from '@/types/agent-config';
+import {
+  baseConfig,
+  configRev7,
+  instanceDetailA,
+  instanceIds,
+} from '@/composables/agent-config/__tests__/fixtures';
+import { clone } from '@/utils/agent-config/merge-patch';
+import {
+  ADMIN,
+  READER,
+  fakeApi,
+  globalWith,
+  piniaWith,
+  workspaceHost,
+} from './helpers';
+
+vi.mock('@/components/code-editor', () => import('./codeEditorMock'));
+
+import PolicyDataSection from '../effective/PolicyDataSection.vue';
+
+enableAutoUnmount(afterEach);
+
+const PD = '/plugins/local-ssh/policy_data';
+const POLICY_DATA = {
+  max_auth_tries: 4,
+  users: ['root', 'admin'],
+  ports: [22],
+};
+
+function detailWith(policyData: Record<string, unknown>): AgentInstanceDetail {
+  const base = clone(baseConfig) as ConfigDoc;
+  base.plugins!['local-ssh']!.policy_data = clone(policyData);
+  return { ...instanceDetailA, base, effective: base };
+}
+
+async function mountSection(perms: Record<string, string[]>) {
+  // ip-b's file has another user list and another max_auth_tries; the ports agree.
+  const api = fakeApi({
+    getConfig: vi.fn().mockResolvedValue({ ...configRev7, overlay: {} }),
+    getInstance: vi.fn(async (_a: string, id: string) =>
+      id === instanceIds.b
+        ? detailWith({ ...POLICY_DATA, max_auth_tries: 6, users: ['root'] })
+        : detailWith(POLICY_DATA),
+    ),
+  });
+  const host = workspaceHost(api, PolicyDataSection, () => ({
+    plugin: 'local-ssh',
+    reported: POLICY_DATA,
+    provenance: 'file',
+  }));
+  const wrapper = mount(host, { global: globalWith(piniaWith(perms)) });
+  await flushPromises();
+  return wrapper;
+}
+
+const differs = (w: VueWrapper, rel: string) =>
+  w.find(`[data-test="pd-differs-${PD}/${rel}"]`);
+
+describe('policy_data: lists that differ across instances', () => {
+  beforeEach(() => resetAgentDrafts());
+
+  it('warns on a list whose value differs between the files', async () => {
+    const w = await mountSection(ADMIN);
+    expect(w.find(`[data-test="pd-node-${PD}/users"]`).exists()).toBe(true);
+    expect(differs(w, 'users').text()).toBe('differs across instances');
+    // A list the files agree on, and a scalar (written at its own pointer), carry no warning.
+    expect(w.find(`[data-test="pd-node-${PD}/ports"]`).exists()).toBe(true);
+    expect(differs(w, 'ports').exists()).toBe(false);
+    expect(differs(w, 'max_auth_tries').exists()).toBe(false);
+  });
+
+  it('is an editing hint: readers do not see it', async () => {
+    const w = await mountSection(READER);
+    expect(w.find(`[data-test="pd-node-${PD}/users"]`).exists()).toBe(true);
+    expect(differs(w, 'users').exists()).toBe(false);
+  });
+});
diff --git a/src/components/agents/config/effective/PolicyDataNode.vue b/src/components/agents/config/effective/PolicyDataNode.vue
index 93367c3f..cb4ef95c 100644
--- a/src/components/agents/config/effective/PolicyDataNode.vue
+++ b/src/components/agents/config/effective/PolicyDataNode.vue
@@ -59,6 +59,12 @@
           class="text-xs text-gray-500 dark:text-slate-400"
           >{{ summary }}</span
         >
+        <span
+          v-if="differs"
+          class="text-[0.7rem] text-gray-500 dark:text-slate-400"
+          :data-test="`pd-differs-${ptr}`"
+          >differs across instances</span
+        >
         <template v-else-if="masked">
           <span class="font-mono text-xs text-gray-500 dark:text-slate-400">{{
             value
@@ -313,6 +319,16 @@ const listHasMask = computed(
   () => Array.isArray(props.value) && containsMask(props.value),
 );
 const isChanged = computed(() => !!tree && tree.changed(props.ptr));
+/**
+ * An editable list whose value differs between the instances' files: any edit writes one list
+ * for every instance (RFC 7396), as PolicySourcesEditor warns for policies.
+ */
+const differs = computed(
+  () =>
+    Array.isArray(props.value) &&
+    editable.value &&
+    !!tree?.differs?.(props.ptr),
+);
 
 const expanded = ref(!startsCollapsed(props.depth, props.value));
 const showAll = ref(false);
diff --git a/src/components/agents/config/effective/PolicyDataSection.vue b/src/components/agents/config/effective/PolicyDataSection.vue
index 13df1b7f..e3226948 100644
--- a/src/components/agents/config/effective/PolicyDataSection.vue
+++ b/src/components/agents/config/effective/PolicyDataSection.vue
@@ -95,6 +95,7 @@ import { accessTooltip, fieldAccess } from '@/utils/agent-config/field-access';
 import type { Provenance } from '@/utils/agent-config/provenance';
 import ProvenanceBadge from '../ProvenanceBadge.vue';
 import FieldIssues from '../editor/FieldIssues.vue';
+import { useEditor } from '../editor/useEditor';
 import AccessIcon from './AccessIcon.vue';
 import PendingPill from './PendingPill.vue';
 import { NULL_KEY_ERROR, opsSetNullKey } from './nullKeys';
@@ -109,6 +110,8 @@ const props = defineProps<{
 }>();
 
 const ws = useWorkspace();
+// The shared editor helpers need the workspace's draft and context (absent when read-only).
+const editor = ws ? useEditor() : null;
 const ptr = computed(() => pointer('plugins', props.plugin, 'policy_data'));
 
 const access = computed(() =>
@@ -148,6 +151,7 @@ provide(POLICY_DATA_TREE_KEY, {
   revert: (p) => ws?.draft.revertPointer(p),
   set: (p, v) => ws?.draft.setValue(p, v, ptr.value),
   remove: (p) => ws?.draft.removeValue(p),
+  differs: (p) => !!editor && editor.differsAcrossInstances(p),
 });
 
 // ---- Structured / raw JSON ----
diff --git a/src/components/agents/config/effective/policyDataContext.ts b/src/components/agents/config/effective/policyDataContext.ts
index 3346a214..30e2f442 100644
--- a/src/components/agents/config/effective/policyDataContext.ts
+++ b/src/components/agents/config/effective/policyDataContext.ts
@@ -19,6 +19,8 @@ export interface PolicyDataTreeContext {
   set(ptr: string, value: unknown): void;
   /** Remove the key at `ptr`. */
   remove(ptr: string): void;
+  /** The instances' files differ at `ptr` (an array edit writes one list for all of them). */
+  differs?(ptr: string): boolean;
 }
 
 export const POLICY_DATA_TREE_KEY: InjectionKey<PolicyDataTreeContext> =

From 4cc87d36b5f4721f5f67b79147301efccf5516d7 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:49:15 -0300
Subject: [PATCH 4/4] fix(agent-config): keep the policy_data node's value
 chain intact

The "differs across instances" span sat between the container branch
and its v-else-if chain, starting a new chain: every container node
that did not differ also rendered the empty scalar value span. The
container branch is now one template holding the summary and the hint.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../__tests__/PolicyDataDiffers.spec.ts       | 30 +++++++++++++++++++
 .../config/effective/PolicyDataNode.vue       | 22 +++++++-------
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/components/agents/config/__tests__/PolicyDataDiffers.spec.ts b/src/components/agents/config/__tests__/PolicyDataDiffers.spec.ts
index d7a57ab1..38da7c20 100644
--- a/src/components/agents/config/__tests__/PolicyDataDiffers.spec.ts
+++ b/src/components/agents/config/__tests__/PolicyDataDiffers.spec.ts
@@ -29,6 +29,7 @@ import {
 vi.mock('@/components/code-editor', () => import('./codeEditorMock'));
 
 import PolicyDataSection from '../effective/PolicyDataSection.vue';
+import PolicyDataTree from '../effective/PolicyDataTree.vue';
 
 enableAutoUnmount(afterEach);
 
@@ -81,6 +82,35 @@ describe('policy_data: lists that differ across instances', () => {
     expect(differs(w, 'max_auth_tries').exists()).toBe(false);
   });
 
+  it('a differing list shows the hint and no scalar value span', async () => {
+    const w = await mountSection(ADMIN);
+    expect(differs(w, 'users').exists()).toBe(true);
+    expect(w.find(`[data-test="pd-value-${PD}/users"]`).exists()).toBe(false);
+    // A scalar still renders its value.
+    expect(w.find(`[data-test="pd-value-${PD}/max_auth_tries"]`).exists()).toBe(
+      true,
+    );
+  });
+
+  it('a container node renders no scalar value span', () => {
+    const w = mount(PolicyDataTree, {
+      props: {
+        value: { rules: { a: 1 }, list: [1, 2] },
+        ptr: '/plugins/p/policy_data',
+      },
+      global: globalWith(piniaWith(READER)),
+    });
+    expect(
+      w.find('[data-test="pd-node-/plugins/p/policy_data/rules"]').exists(),
+    ).toBe(true);
+    expect(
+      w.find('[data-test="pd-value-/plugins/p/policy_data/rules"]').exists(),
+    ).toBe(false);
+    expect(
+      w.find('[data-test="pd-value-/plugins/p/policy_data/list"]').exists(),
+    ).toBe(false);
+  });
+
   it('is an editing hint: readers do not see it', async () => {
     const w = await mountSection(READER);
     expect(w.find(`[data-test="pd-node-${PD}/users"]`).exists()).toBe(true);
diff --git a/src/components/agents/config/effective/PolicyDataNode.vue b/src/components/agents/config/effective/PolicyDataNode.vue
index cb4ef95c..5a1cce3e 100644
--- a/src/components/agents/config/effective/PolicyDataNode.vue
+++ b/src/components/agents/config/effective/PolicyDataNode.vue
@@ -54,17 +54,17 @@
         </button>
       </span>
       <template v-if="!editing">
-        <span
-          v-if="container"
-          class="text-xs text-gray-500 dark:text-slate-400"
-          >{{ summary }}</span
-        >
-        <span
-          v-if="differs"
-          class="text-[0.7rem] text-gray-500 dark:text-slate-400"
-          :data-test="`pd-differs-${ptr}`"
-          >differs across instances</span
-        >
+        <template v-if="container">
+          <span class="text-xs text-gray-500 dark:text-slate-400">{{
+            summary
+          }}</span>
+          <span
+            v-if="differs"
+            class="text-[0.7rem] text-gray-500 dark:text-slate-400"
+            :data-test="`pd-differs-${ptr}`"
+            >differs across instances</span
+          >
+        </template>
         <template v-else-if="masked">
           <span class="font-mono text-xs text-gray-500 dark:text-slate-400">{{
             value