feat: per-entry tracking for array field saves

When editing a single custom endpoint, changes are now tracked at the
individual entry level (endpoints.custom.2) instead of replacing the
entire array. This makes the save dialog show only the changed entry's
before/after diff instead of all 20+ endpoints.

On the server side, mergeIndexedArrayEntries() detects indexed paths,
fetches the current base config, merges updated entries into the
existing array, and sends the complete array to the API.

The confirm dialog resolves indexed paths to entry names
(e.g., "endpoints.custom[2] (Moonshot)") for clarity.

Structural changes (add/remove entries) still use full-array replacement
via the existing onChange path.

Author: danny-avila

src/components/configuration/ConfigPage.tsx

@@ -20,6 +20,7 @@ import {
   flattenObject,
   unflattenObject,
   serializeKVPairs,
+  deepSerializeKVPairs,
   cn,
   normalizeImportConfig,
   hasConfigCapability,
@@ -269,7 +270,32 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
     return unflattenObject(scopeResolvedValues) as Record<string, t.ConfigValue>;
   }, [isEditingScope, scopeResolvedValues]);
 
-  const activeConfigValues = isEditingScope ? scopeConfigValues : configValues;
+  const baseActiveConfigValues = isEditingScope ? scopeConfigValues : configValues;
+
+  const activeConfigValues = useMemo(() => {
+    if (!baseActiveConfigValues) return baseActiveConfigValues;
+    const indexedEdits = Object.entries(editedValues).filter(([k]) => /\.\d+$/.test(k));
+    if (indexedEdits.length === 0) return baseActiveConfigValues;
+    const merged = { ...baseActiveConfigValues };
+    for (const [path, value] of indexedEdits) {
+      const segments = path.split('.');
+      const index = Number(segments.pop()!);
+      const arrayPath = segments;
+      let parent: Record<string, t.ConfigValue> = merged;
+      for (let i = 0; i < arrayPath.length - 1; i++) {
+        const seg = arrayPath[i];
+        if (parent[seg] && typeof parent[seg] === 'object' && !Array.isArray(parent[seg])) {
+          parent[seg] = { ...(parent[seg] as Record<string, t.ConfigValue>) };
+          parent = parent[seg] as Record<string, t.ConfigValue>;
+        } else break;
+      }
+      const lastSeg = arrayPath[arrayPath.length - 1];
+      const arr = Array.isArray(parent[lastSeg]) ? [...(parent[lastSeg] as t.ConfigValue[])] : [];
+      arr[index] = value;
+      parent[lastSeg] = arr;
+    }
+    return merged;
+  }, [baseActiveConfigValues, editedValues]);
 
   const scopeConfiguredPaths = useMemo(() => {
     if (!scopeChangedPaths) return new Set<string>();
@@ -356,7 +382,16 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
             delete next[path];
             return next;
           }
-          return { ...prev, [path]: value };
+          const next = { ...prev, [path]: value };
+          if (Array.isArray(value)) {
+            const prefix = `${path}.`;
+            for (const k of Object.keys(next)) {
+              if (k.startsWith(prefix) && /\.\d+$/.test(k)) delete next[k];
+            }
+          }
+          const indexMatch = /^(.+)\.\d+$/.exec(path);
+          if (indexMatch) delete next[indexMatch[1]];
+          return next;
         });
       });
     },
@@ -437,7 +472,10 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
 
     const saves = touched
       .filter((p) => editedValues[p] !== undefined)
-      .map((p) => ({ fieldPath: p, value: serializeKVPairs(editedValues[p]) }));
+      .map((p) => ({
+        fieldPath: p,
+        value: /\.\d+$/.test(p) ? deepSerializeKVPairs(editedValues[p]) : serializeKVPairs(editedValues[p]),
+      }));
     const resets = touched.filter((p) => editedValues[p] === undefined);
 
     setSaving(true);
@@ -506,11 +544,29 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
   const serializedEditedValues = useMemo(() => {
     const result: t.FlatConfigMap = {};
     for (const [k, v] of Object.entries(editedValues)) {
-      result[k] = serializeKVPairs(v);
+      result[k] = /\.\d+$/.test(k) ? deepSerializeKVPairs(v) : serializeKVPairs(v);
     }
     return result;
   }, [editedValues]);
 
+  const originalValuesForDialog = useMemo(() => {
+    const baseline = isEditingScope ? scopeBaseline : flatBaseline;
+    const result: t.FlatConfigMap = { ...baseline };
+    for (const path of Object.keys(editedValues)) {
+      if (path in result) continue;
+      const segments = path.split('.');
+      let current: t.ConfigValue = configValues;
+      for (const seg of segments) {
+        if (current == null || typeof current !== 'object') { current = undefined; break; }
+        current = Array.isArray(current)
+          ? (current as t.ConfigValue[])[Number(seg)]
+          : (current as Record<string, t.ConfigValue>)[seg];
+      }
+      if (current !== undefined) result[path] = current;
+    }
+    return result;
+  }, [editedValues, flatBaseline, isEditingScope, scopeBaseline, configValues]);
+
   const [importSuccessMessage, setImportSuccessMessage] = useState<string | null>(null);
 
   const showImportSuccess = useCallback((message?: string) => {
@@ -846,7 +902,7 @@ export function ConfigPage({ initialTab, highlightField, initialScope }: t.Confi
       <ConfirmSaveDialog
         open={confirmSaveOpen}
         editedValues={serializedEditedValues}
-        originalValues={isEditingScope ? scopeBaseline : flatBaseline}
+        originalValues={originalValuesForDialog}
         saving={saving}
         error={saveError}
         onConfirm={handleConfirmSave}

src/components/configuration/ConfirmSaveDialog.tsx

@@ -66,6 +66,16 @@ export function ConfirmSaveDialog({
   );
 }
 
+function resolvePathLabel(path: string, newValue: t.ConfigValue, oldValue: t.ConfigValue): string {
+  const match = /^(.+)\.(\d+)$/.exec(path);
+  if (!match) return path;
+  const val = (newValue ?? oldValue) as Record<string, t.ConfigValue> | undefined;
+  const name = val && typeof val === 'object' && !Array.isArray(val)
+    ? (val as Record<string, string>).name
+    : undefined;
+  return name ? `${match[1]}[${match[2]}] (${name})` : `${match[1]}[${match[2]}]`;
+}
+
 function ChangeCard({
   path,
   oldValue,
@@ -79,12 +89,13 @@ function ChangeCard({
   const notSet = localize('com_config_field_not_set');
   const isRemoval = newValue === undefined || newValue === null;
   const isAddition = oldValue === undefined || oldValue === null;
+  const displayPath = resolvePathLabel(path, newValue, oldValue);
 
   return (
     <div className="rounded-lg border border-(--cui-color-stroke-default) bg-(--cui-color-background-muted)">
       <div className="flex items-center gap-2 border-b border-(--cui-color-stroke-default) px-3 py-2">
         <span className="font-mono text-xs font-medium text-(--cui-color-text-default)">
-          {path}
+          {displayPath}
         </span>
         {isAddition && (
           <Badge text={localize('com_config_field_added')} state="success" size="sm" />

src/components/configuration/FieldRenderer.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@clickhouse/click-ui';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import type { ReactNode } from 'react';
 import type * as t from '@/types';
 import {
@@ -66,12 +66,18 @@ function ArrayObjectNestedGroup({
   const addTriggerRef = useRef<(() => void) | null>(null);
   const handleAdd = disabled ? undefined : () => addTriggerRef.current?.();
 
+  const handleEntryChange = useCallback(
+    (index: number, value: t.ConfigValue) => onChange(`${path}.${index}`, value),
+    [onChange, path],
+  );
+
   const arrayField = (
     <ArrayObjectField
       id={fieldId}
       value={currentValue}
       fields={field.children ?? []}
       onChange={(v) => onChange(path, v)}
+      onEntryChange={handleEntryChange}
       disabled={disabled}
       hideAddButton
       addTriggerRef={addTriggerRef}

src/components/configuration/fields/ArrayObjectField.tsx

@@ -19,6 +19,7 @@ export function ArrayObjectField({
   value,
   fields,
   onChange,
+  onEntryChange,
   disabled,
   hideAddButton,
   addTriggerRef,
@@ -83,11 +84,15 @@ export function ArrayObjectField({
 
   const handleEntryChange = useCallback(
     (index: number, newValue: t.ConfigValue) => {
+      if (onEntryChange) {
+        onEntryChange(index, newValue);
+        return;
+      }
       const next = [...items];
       next[index] = newValue;
       onChange(next);
     },
-    [items, onChange],
+    [items, onChange, onEntryChange],
   );
 
   return (

src/components/configuration/sections/EndpointsRenderer.tsx

@@ -632,6 +632,7 @@ export function CustomEndpointsRenderer(props: t.FieldRendererProps) {
         value={value}
         fields={customField.children ?? []}
         onChange={(v) => onChange(path, v)}
+        onEntryChange={(index, v) => onChange(`${path}.${index}`, v)}
         disabled={disabled}
         hideAddButton
         renderFields={renderGroupedEndpointFields}

src/server/config.ts

@@ -801,6 +801,50 @@ export const baseConfigOptions = queryOptions({
   staleTime: 30_000,
 });
 
+const INDEXED_ARRAY_RE = /^(.+)\.(\d+)$/;
+
+async function mergeIndexedArrayEntries(
+  entries: Array<{ fieldPath: string; value: unknown }>,
+): Promise<Array<{ fieldPath: string; value: unknown }>> {
+  const indexed = new Map<string, Map<number, unknown>>();
+  const rest: Array<{ fieldPath: string; value: unknown }> = [];
+
+  for (const entry of entries) {
+    const match = INDEXED_ARRAY_RE.exec(entry.fieldPath);
+    if (match) {
+      const [, arrayPath, indexStr] = match;
+      if (!indexed.has(arrayPath)) indexed.set(arrayPath, new Map());
+      indexed.get(arrayPath)!.set(Number(indexStr), entry.value);
+    } else {
+      rest.push(entry);
+    }
+  }
+
+  if (indexed.size === 0) return entries;
+
+  const baseResponse = await apiFetch('/api/admin/config/base');
+  if (!baseResponse.ok) throw new Error(`Failed to fetch base config: ${baseResponse.status}`);
+  const { config: baseConfig } = (await baseResponse.json()) as {
+    config: Record<string, unknown>;
+  };
+
+  for (const [arrayPath, updates] of indexed) {
+    const segments = arrayPath.split('.');
+    let current: unknown = baseConfig;
+    for (const seg of segments) {
+      if (current == null || typeof current !== 'object') { current = undefined; break; }
+      current = (current as Record<string, unknown>)[seg];
+    }
+    const arr = Array.isArray(current) ? [...current] : [];
+    for (const [idx, value] of updates) {
+      arr[idx] = value;
+    }
+    rest.push({ fieldPath: arrayPath, value: arr });
+  }
+
+  return rest;
+}
+
 export const saveBaseConfigFn = createServerFn({ method: 'POST' })
   .inputValidator(
     z.object({
@@ -811,8 +855,13 @@ export const saveBaseConfigFn = createServerFn({ method: 'POST' })
     }),
   )
   .handler(async ({ data }) => {
-    const filtered = data.entries.filter((e) => !isInterfacePermissionPath(e.fieldPath));
+    let filtered = data.entries.filter((e) => !isInterfacePermissionPath(e.fieldPath));
     if (filtered.length === 0) return { success: true };
+
+    // Merge indexed array entries (e.g. endpoints.custom.2) back into
+    // full arrays so the API receives complete field values.
+    filtered = await mergeIndexedArrayEntries(filtered);
+
     const sections = [...new Set(filtered.map((e) => e.fieldPath.split('.')[0]))];
     await requireAllSectionCapabilities(sections);
 

src/types/fields.ts

@@ -100,6 +100,9 @@ export interface ArrayObjectFieldProps {
   value: ConfigValue;
   fields: SchemaField[];
   onChange: (value: ConfigValue) => void;
+  /** Per-entry change callback. When provided, individual entry edits use
+   *  this instead of replacing the entire array via `onChange`. */
+  onEntryChange?: (index: number, value: ConfigValue) => void;
   disabled?: boolean;
   /** Hide the bottom "Add entry" button (e.g. when add is in the section header). */
   hideAddButton?: boolean;

src/utils/format.ts

@@ -19,6 +19,22 @@ export function serializeKVPairs(value: t.ConfigValue): t.ConfigValue {
   return record;
 }
 
+/** Recursively serialize KV pairs within an object tree. */
+export function deepSerializeKVPairs(value: t.ConfigValue): t.ConfigValue {
+  if (value == null || typeof value !== 'object') return value;
+  if (Array.isArray(value)) {
+    const serialized = serializeKVPairs(value);
+    if (serialized !== value) return serialized;
+    return value.map(deepSerializeKVPairs);
+  }
+  const obj = value as Record<string, t.ConfigValue>;
+  const result: Record<string, t.ConfigValue> = {};
+  for (const [k, v] of Object.entries(obj)) {
+    result[k] = deepSerializeKVPairs(v);
+  }
+  return result;
+}
+
 function coerceKVValue(raw: string, type: t.KVValueType): t.ConfigValue {
   if (type === 'boolean') return raw === 'true';
   if (type === 'number') {