@parhelia/core 0.1.12390 → 0.1.12397

package/dist/editor/template-wizard/TemplateStructureInlineEditor.js

@@ -2,10 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Bot, Check, ChevronDown, ChevronRight, GripVertical, Plus, Search, Settings2, Trash2, X, } from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 import { AgentTerminal } from "../ai/AgentTerminal";
+import DialogButtons from "../ui/DialogButtons";
 import { useEditContext } from "../client/editContext";
 import TreeListSelector from "../ui/TreeListSelector";
-import { parseTemplateBuilderSuggestionText, TEMPLATE_BUILDER_AGENT_PROFILE_ID, TEMPLATE_BUILDER_AGENT_PROFILE_NAME, TEMPLATE_BUILDER_SUGGESTION_SCHEMA_DESCRIPTION, templateBuilderCreate, templateBuilderFieldTypes, templateBuilderGet, templateBuilderUpdate, } from "../services/templateBuilderService";
+import { parseTemplateBuilderSuggestionText, TEMPLATE_BUILDER_AGENT_PROFILE_ID, TEMPLATE_BUILDER_AGENT_PROFILE_NAME, TEMPLATE_BUILDER_SUGGESTION_SCHEMA_DESCRIPTION, templateBuilderCreate, templateBuilderFieldTypes, templateBuilderGet, templateBuilderSkills, templateBuilderUpdate, } from "../services/templateBuilderService";
 import { loadAiProfiles } from "../services/aiService";
 import { normalizeGuid } from "../utils";
 const TEMPLATE_TEMPLATE_ID = "AB86861A-6030-46C5-B394-E8F99E8B87DB";
@@ -69,6 +72,234 @@ const toWizardSection = (section) => ({
     name: section?.name || "",
     fields: (section?.fields || []).map((field) => toWizardField(field)),
 });
+const cloneWizardField = (field) => ({
+    ...field,
+});
+const cloneWizardSection = (section) => ({
+    ...section,
+    fields: section.fields.map(cloneWizardField),
+});
+const sameBaseTemplateChangeTarget = (left, right) => (!!left.templateId &&
+    !!right.templateId &&
+    normalizeGuid(left.templateId) === normalizeGuid(right.templateId)) ||
+    normalizeName(left.templateName) === normalizeName(right.templateName) ||
+    (!!left.templatePath &&
+        !!right.templatePath &&
+        normalizeName(left.templatePath) === normalizeName(right.templatePath));
+const findSectionIndex = (sectionList, targetSectionLocalId, targetSectionName) => sectionList.findIndex((sectionItem) => (!!targetSectionLocalId && sectionItem.localId === targetSectionLocalId) ||
+    (!!targetSectionName &&
+        normalizeName(sectionItem.name) === normalizeName(targetSectionName)));
+const findFieldIndex = (fieldList, targetFieldLocalId, targetFieldName) => fieldList.findIndex((fieldItem) => (!!targetFieldLocalId && fieldItem.localId === targetFieldLocalId) ||
+    (!!targetFieldName && normalizeName(fieldItem.name) === normalizeName(targetFieldName)));
+function applyPendingSuggestionsToSections(baseSections, pendingChanges) {
+    const mergedSections = baseSections.map(cloneWizardSection);
+    for (const change of pendingChanges) {
+        if (change.kind === "section") {
+            if (change.action === "add") {
+                mergedSections.push(cloneWizardSection(change.section));
+                continue;
+            }
+            const sectionIndex = findSectionIndex(mergedSections, change.targetSectionLocalId, change.targetSectionName);
+            if (sectionIndex < 0)
+                continue;
+            if (change.action === "remove") {
+                mergedSections.splice(sectionIndex, 1);
+                continue;
+            }
+            const sectionToUpdate = mergedSections[sectionIndex];
+            if (!sectionToUpdate)
+                continue;
+            mergedSections[sectionIndex] = {
+                ...sectionToUpdate,
+                name: change.section.name,
+            };
+            continue;
+        }
+        if (change.kind !== "field")
+            continue;
+        const sectionIndex = findSectionIndex(mergedSections, change.sectionLocalId, change.targetSectionName);
+        if (sectionIndex < 0)
+            continue;
+        const targetSection = mergedSections[sectionIndex];
+        if (!targetSection)
+            continue;
+        if (change.action === "add") {
+            targetSection.fields.push(cloneWizardField(change.field));
+            continue;
+        }
+        const fieldIndex = findFieldIndex(targetSection.fields, change.targetFieldLocalId, change.targetFieldName);
+        if (fieldIndex < 0)
+            continue;
+        if (change.action === "remove") {
+            targetSection.fields.splice(fieldIndex, 1);
+            continue;
+        }
+        const fieldToUpdate = targetSection.fields[fieldIndex];
+        if (!fieldToUpdate)
+            continue;
+        targetSection.fields[fieldIndex] = cloneWizardField(change.field);
+    }
+    return mergedSections;
+}
+function mergePendingSuggestionChanges(existingChanges, incomingChanges) {
+    const merged = [...existingChanges];
+    for (const change of incomingChanges) {
+        if (change.kind === "baseTemplate") {
+            const inverseIndex = merged.findIndex((entry) => entry.kind === "baseTemplate" &&
+                entry.action !== change.action &&
+                sameBaseTemplateChangeTarget(entry, change));
+            if (inverseIndex >= 0) {
+                merged.splice(inverseIndex, 1);
+                continue;
+            }
+            merged.push(change);
+            continue;
+        }
+        if (change.kind === "section" && change.action === "add") {
+            const duplicateSectionAddIndex = merged.findIndex((entry) => entry.kind === "section" &&
+                entry.action === "add" &&
+                normalizeName(entry.section.name) === normalizeName(change.section.name));
+            if (duplicateSectionAddIndex >= 0) {
+                const existingEntry = merged[duplicateSectionAddIndex];
+                if (existingEntry &&
+                    existingEntry.kind === "section" &&
+                    existingEntry.action === "add") {
+                    merged[duplicateSectionAddIndex] = {
+                        ...existingEntry,
+                        reason: change.reason ?? existingEntry.reason,
+                        section: {
+                            ...existingEntry.section,
+                            name: change.section.name,
+                            fields: change.section.fields.map(cloneWizardField),
+                        },
+                    };
+                    continue;
+                }
+            }
+            merged.push(change);
+            continue;
+        }
+        if (change.kind === "section" && change.action !== "add") {
+            const pendingSectionAddIndex = merged.findIndex((entry) => entry.kind === "section" &&
+                entry.action === "add" &&
+                entry.section.localId === change.targetSectionLocalId);
+            if (pendingSectionAddIndex >= 0) {
+                const pendingSectionEntry = merged[pendingSectionAddIndex];
+                if (pendingSectionEntry &&
+                    pendingSectionEntry.kind === "section" &&
+                    pendingSectionEntry.action === "add") {
+                    if (change.action === "remove") {
+                        const removedSectionLocalId = pendingSectionEntry.section.localId;
+                        merged.splice(pendingSectionAddIndex, 1);
+                        for (let index = merged.length - 1; index >= 0; index--) {
+                            const entry = merged[index];
+                            if (!entry)
+                                continue;
+                            if (entry.kind === "field" &&
+                                entry.sectionLocalId === removedSectionLocalId) {
+                                merged.splice(index, 1);
+                            }
+                        }
+                        continue;
+                    }
+                    const updatedPendingSection = {
+                        ...pendingSectionEntry,
+                        section: {
+                            ...pendingSectionEntry.section,
+                            name: change.section.name,
+                        },
+                    };
+                    merged[pendingSectionAddIndex] = updatedPendingSection;
+                    continue;
+                }
+            }
+            merged.push(change);
+            continue;
+        }
+        if (change.kind === "field") {
+            const pendingSectionAddIndex = merged.findIndex((entry) => entry.kind === "section" &&
+                entry.action === "add" &&
+                entry.section.localId === change.sectionLocalId);
+            if (pendingSectionAddIndex >= 0) {
+                const pendingSectionAdd = merged[pendingSectionAddIndex];
+                if (!pendingSectionAdd ||
+                    pendingSectionAdd.kind !== "section" ||
+                    pendingSectionAdd.action !== "add") {
+                    // Fall through to default handling
+                }
+                else {
+                    const pendingFieldIndex = change.action === "add"
+                        ? -1
+                        : findFieldIndex(pendingSectionAdd.section.fields, change.targetFieldLocalId, change.targetFieldName);
+                    if (change.action === "add") {
+                        const duplicateFieldIndex = findFieldIndex(pendingSectionAdd.section.fields, undefined, change.field.name);
+                        const nextFields = [...pendingSectionAdd.section.fields];
+                        if (duplicateFieldIndex >= 0) {
+                            nextFields[duplicateFieldIndex] = cloneWizardField(change.field);
+                        }
+                        else {
+                            nextFields.push(cloneWizardField(change.field));
+                        }
+                        const updated = {
+                            ...pendingSectionAdd,
+                            section: {
+                                ...pendingSectionAdd.section,
+                                fields: nextFields,
+                            },
+                        };
+                        merged[pendingSectionAddIndex] = updated;
+                        continue;
+                    }
+                    if (pendingFieldIndex >= 0) {
+                        const nextFields = [...pendingSectionAdd.section.fields];
+                        if (change.action === "remove") {
+                            nextFields.splice(pendingFieldIndex, 1);
+                        }
+                        else {
+                            nextFields[pendingFieldIndex] = cloneWizardField(change.field);
+                        }
+                        const updated = {
+                            ...pendingSectionAdd,
+                            section: {
+                                ...pendingSectionAdd.section,
+                                fields: nextFields,
+                            },
+                        };
+                        merged[pendingSectionAddIndex] = updated;
+                        continue;
+                    }
+                }
+            }
+            if (change.action !== "add") {
+                const pendingFieldAddIndex = merged.findIndex((entry) => entry.kind === "field" &&
+                    entry.action === "add" &&
+                    entry.sectionLocalId === change.sectionLocalId &&
+                    (findFieldIndex([entry.field], change.targetFieldLocalId, change.targetFieldName) >= 0 ||
+                        normalizeName(entry.field.name) === normalizeName(change.field.name)));
+                if (pendingFieldAddIndex >= 0) {
+                    const pendingFieldEntry = merged[pendingFieldAddIndex];
+                    if (pendingFieldEntry && pendingFieldEntry.kind === "field") {
+                        if (change.action === "remove") {
+                            merged.splice(pendingFieldAddIndex, 1);
+                        }
+                        else {
+                            const updated = {
+                                ...pendingFieldEntry,
+                                field: cloneWizardField(change.field),
+                            };
+                            merged[pendingFieldAddIndex] = updated;
+                        }
+                        continue;
+                    }
+                }
+            }
+            merged.push(change);
+            continue;
+        }
+        merged.push(change);
+    }
+    return merged;
+}
 function toRequestSections(sections) {
     return sections
         .filter((section) => section.name.trim())
@@ -100,7 +331,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
     const [isLoading, setIsLoading] = useState(true);
     const [isSaving, setIsSaving] = useState(false);
     const [fieldTypeGroups, setFieldTypeGroups] = useState([{ name: "General", types: defaultFieldTypeOptions }]);
-    const [templateName, setTemplateName] = useState(initialName || "New Template");
+    const [templateName, setTemplateName] = useState(() => initialName || item?.name || "New Template");
     const [baseTemplates, setBaseTemplates] = useState([]);
     const [selectedTemplateNodesInTree, setSelectedTemplateNodesInTree] = useState([]);
     const [fieldSearchQuery, setFieldSearchQuery] = useState("");
@@ -120,12 +351,16 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
     const [dragOverFieldEndSectionIdx, setDragOverFieldEndSectionIdx] = useState(null);
     const [focusFieldDraftSectionIndex, setFocusFieldDraftSectionIndex] = useState(null);
     const [aiProfiles, setAiProfiles] = useState([]);
+    const [templateBuilderConfiguredSkills, setTemplateBuilderConfiguredSkills] = useState([]);
     const [pendingSuggestions, setPendingSuggestions] = useState([]);
     const [latestSuggestionSummary, setLatestSuggestionSummary] = useState(null);
     const [suggestionParseError, setSuggestionParseError] = useState(null);
     const [suggestionStatus, setSuggestionStatus] = useState(null);
+    const [templatePickerOpen, setTemplatePickerOpen] = useState(false);
+    const [templatePickerPortalContainer, setTemplatePickerPortalContainer] = useState(null);
     const newFieldNameInputRefs = useRef({});
     const processedSuggestionMessageIdsRef = useRef(new Set());
+    const templatePickerTriggerRef = useRef(null);
     const flatFieldTypeOptions = fieldTypeGroups.flatMap((group) => group.types || []);
     const createEmptyFieldWithDefaultType = () => ({
         ...createEmptyField(),
@@ -136,6 +371,33 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         name: "",
         fields: [createEmptyFieldWithDefaultType()],
     });
+    const effectiveSections = useMemo(() => applyPendingSuggestionsToSections(sections, pendingSuggestions), [pendingSuggestions, sections]);
+    const effectiveBaseTemplates = useMemo(() => {
+        const merged = [...baseTemplates];
+        for (const change of pendingSuggestions) {
+            if (change.kind !== "baseTemplate")
+                continue;
+            const existingIndex = merged.findIndex((template) => sameBaseTemplateChangeTarget({
+                templateId: template.id,
+                templateName: template.name,
+                templatePath: template.path,
+            }, change));
+            if (change.action === "remove") {
+                if (existingIndex >= 0) {
+                    merged.splice(existingIndex, 1);
+                }
+                continue;
+            }
+            if (existingIndex < 0) {
+                merged.push({
+                    id: change.templateId || createLocalId("base-template"),
+                    name: change.templateName,
+                    path: change.templatePath,
+                });
+            }
+        }
+        return merged;
+    }, [baseTemplates, pendingSuggestions]);
     const [templateBuilderAgent] = useState(() => ({
         id: createGuid(),
         name: "Template Builder",
@@ -510,6 +772,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                     setSections([createEmptySectionWithDefaultType()]);
                     return;
                 }
+                setTemplateName(item.name?.trim() || initialName || "New Template");
                 const result = await templateBuilderGet({ template: item.descriptor });
                 if (result.type !== "success" || !result.data) {
                     editContextRef.current?.showErrorToast({
@@ -579,7 +842,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         item,
     ]);
     const save = async () => {
-        if (isCreateMode && !templateName.trim()) {
+        if (!templateName.trim()) {
             editContext?.showErrorToast({
                 summary: "Template name is required",
             });
@@ -674,6 +937,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             }
             const result = await templateBuilderUpdate({
                 template: item.descriptor,
+                name: templateName.trim(),
                 baseTemplateIds,
                 sections: toRequestSections(sections),
                 createStandardValues: hasStandardValues,
@@ -738,16 +1002,13 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
     };
     useEffect(() => {
         let cancelled = false;
-        loadAiProfiles()
-            .then((loadedProfiles) => {
+        Promise.allSettled([loadAiProfiles(), templateBuilderSkills()]).then((results) => {
             if (cancelled)
                 return;
-            setAiProfiles(loadedProfiles);
-        })
-            .catch(() => {
-            if (!cancelled) {
-                setAiProfiles([]);
-            }
+            const loadedProfiles = results[0];
+            setAiProfiles(loadedProfiles.status === "fulfilled" ? loadedProfiles.value : []);
+            const configuredSkills = results[1];
+            setTemplateBuilderConfiguredSkills(configuredSkills.status === "fulfilled" ? configuredSkills.value : []);
         });
         return () => {
             cancelled = true;
@@ -758,13 +1019,13 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         templateName: templateName.trim() || "New Template",
         template: item?.descriptor,
         parent: parentItem?.descriptor,
-        baseTemplates: baseTemplates.map((template) => ({
+        baseTemplates: effectiveBaseTemplates.map((template) => ({
             id: template.id,
             name: template.name,
             path: template.path,
             icon: template.icon,
         })),
-        sections: sections.map((sectionItem) => ({
+        sections: effectiveSections.map((sectionItem) => ({
             name: sectionItem.name,
             fields: sectionItem.fields.map((field) => ({
                 name: field.name,
@@ -778,7 +1039,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                 unversioned: field.unversioned,
             })),
         })),
-    }), [baseTemplates, isCreateMode, item, parentItem, sections, templateName]);
+    }), [effectiveBaseTemplates, effectiveSections, isCreateMode, item, parentItem, templateName]);
     const currentTemplateId = useMemo(() => (item?.id ? normalizeGuid(item.id) : ""), [item?.id]);
     const templateBuilderAgentMetadata = useMemo(() => ({
         mode: "read-only",
@@ -791,21 +1052,45 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         },
     }), [currentTemplateBuilderState]);
     const effectiveAiProfiles = useMemo(() => {
+        const mergeTemplateBuilderSkills = (profile) => {
+            if (normalizeGuid(profile.id) !== normalizeGuid(TEMPLATE_BUILDER_AGENT_PROFILE_ID)) {
+                return profile;
+            }
+            const mergedSkills = [
+                ...(profile.allowedSkills || []),
+                ...templateBuilderConfiguredSkills,
+            ].reduce((acc, skill) => {
+                if (!skill?.id || !skill?.name)
+                    return acc;
+                const exists = acc.some((entry) => normalizeGuid(entry.id) === normalizeGuid(skill.id));
+                if (!exists) {
+                    acc.push(skill);
+                }
+                return acc;
+            }, []);
+            if (mergedSkills.length === 0) {
+                return profile;
+            }
+            return {
+                ...profile,
+                allowedSkills: mergedSkills,
+            };
+        };
         if (aiProfiles.some((profile) => normalizeGuid(profile.id) === normalizeGuid(TEMPLATE_BUILDER_AGENT_PROFILE_ID))) {
-            return aiProfiles;
+            return aiProfiles.map(mergeTemplateBuilderSkills);
         }
         return [
-            {
+            mergeTemplateBuilderSkills({
                 id: TEMPLATE_BUILDER_AGENT_PROFILE_ID,
                 name: TEMPLATE_BUILDER_AGENT_PROFILE_NAME,
                 defaultModelId: "",
                 models: [],
                 prompts: [],
                 hiddenFromOverview: true,
-            },
+            }),
             ...aiProfiles,
         ];
-    }, [aiProfiles]);
+    }, [aiProfiles, templateBuilderConfiguredSkills]);
     const hydrateFieldFromPatch = useCallback((patch, fallback) => ({
         localId: createLocalId("field"),
         name: patch.name ?? fallback?.name ?? "",
@@ -824,6 +1109,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
     }), [flatFieldTypeOptions]);
     const convertSuggestionToPendingChanges = useCallback((suggestion) => {
         const nextChanges = [];
+        const workingSections = effectiveSections.map(cloneWizardSection);
         for (const baseTemplateChange of suggestion.baseTemplates || []) {
             nextChanges.push({
                 id: createLocalId("base-template-suggestion"),
@@ -837,23 +1123,26 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         }
         for (const sectionChange of suggestion.sections || []) {
             if (sectionChange.action === "add") {
+                const nextSection = {
+                    ...toWizardSection(sectionChange.section),
+                    fields: (sectionChange.section.fields || []).map((field) => hydrateFieldFromPatch(field)),
+                };
                 nextChanges.push({
                     id: createLocalId("section-suggestion"),
                     kind: "section",
                     action: "add",
-                    section: {
-                        ...toWizardSection(sectionChange.section),
-                        fields: (sectionChange.section.fields || []).map((field) => hydrateFieldFromPatch(field)),
-                    },
+                    section: nextSection,
                     reason: sectionChange.reason,
                 });
+                workingSections.push(cloneWizardSection(nextSection));
                 continue;
             }
-            const matchedSection = sections.find((sectionItem) => normalizeName(sectionItem.name) ===
+            const matchedSection = workingSections.find((sectionItem) => normalizeName(sectionItem.name) ===
                 normalizeName(sectionChange.targetSectionName));
             if (!matchedSection)
                 continue;
             if (sectionChange.action === "update") {
+                matchedSection.name = sectionChange.section.name ?? matchedSection.name;
                 nextChanges.push({
                     id: createLocalId("section-suggestion"),
                     kind: "section",
@@ -869,6 +1158,10 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                 });
                 continue;
             }
+            const matchedSectionIndex = workingSections.findIndex((sectionItem) => sectionItem.localId === matchedSection.localId);
+            if (matchedSectionIndex >= 0) {
+                workingSections.splice(matchedSectionIndex, 1);
+            }
             nextChanges.push({
                 id: createLocalId("section-suggestion"),
                 kind: "section",
@@ -880,38 +1173,66 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             });
         }
         for (const fieldChange of suggestion.fields || []) {
-            const matchedSection = sections.find((sectionItem) => normalizeName(sectionItem.name) === normalizeName(fieldChange.targetSectionName));
-            if (!matchedSection)
-                continue;
+            let matchedSection = workingSections.find((sectionItem) => normalizeName(sectionItem.name) === normalizeName(fieldChange.targetSectionName));
             if (fieldChange.action === "add") {
+                if (!matchedSection) {
+                    const syntheticSection = {
+                        localId: createLocalId("section"),
+                        name: fieldChange.targetSectionName,
+                        fields: [],
+                    };
+                    const workingSyntheticSection = cloneWizardSection(syntheticSection);
+                    nextChanges.push({
+                        id: createLocalId("section-suggestion"),
+                        kind: "section",
+                        action: "add",
+                        section: syntheticSection,
+                        reason: fieldChange.reason,
+                    });
+                    workingSections.push(workingSyntheticSection);
+                    matchedSection = workingSyntheticSection;
+                }
+                const nextField = hydrateFieldFromPatch(fieldChange.field);
+                matchedSection.fields.push(cloneWizardField(nextField));
                 nextChanges.push({
                     id: createLocalId("field-suggestion"),
                     kind: "field",
                     action: "add",
                     sectionLocalId: matchedSection.localId,
                     targetSectionName: matchedSection.name,
-                    field: hydrateFieldFromPatch(fieldChange.field),
+                    field: nextField,
                     reason: fieldChange.reason,
                 });
                 continue;
             }
+            if (!matchedSection)
+                continue;
             const matchedField = matchedSection.fields.find((fieldItem) => normalizeName(fieldItem.name) === normalizeName(fieldChange.targetFieldName));
             if (!matchedField)
                 continue;
             if (fieldChange.action === "update") {
+                const updatedField = hydrateFieldFromPatch(fieldChange.field, matchedField);
+                const matchedFieldIndex = matchedSection.fields.findIndex((fieldItem) => fieldItem.localId === matchedField.localId);
+                if (matchedFieldIndex >= 0) {
+                    matchedSection.fields[matchedFieldIndex] = cloneWizardField(updatedField);
+                }
                 nextChanges.push({
                     id: createLocalId("field-suggestion"),
                     kind: "field",
                     action: "update",
                     sectionLocalId: matchedSection.localId,
                     targetSectionName: matchedSection.name,
-                    field: hydrateFieldFromPatch(fieldChange.field, matchedField),
+                    field: updatedField,
                     targetFieldLocalId: matchedField.localId,
                     targetFieldName: matchedField.name,
                     reason: fieldChange.reason,
                 });
                 continue;
             }
+            const matchedFieldIndex = matchedSection.fields.findIndex((fieldItem) => fieldItem.localId === matchedField.localId);
+            if (matchedFieldIndex >= 0) {
+                matchedSection.fields.splice(matchedFieldIndex, 1);
+            }
             nextChanges.push({
                 id: createLocalId("field-suggestion"),
                 kind: "field",
@@ -925,7 +1246,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             });
         }
         return nextChanges;
-    }, [hydrateFieldFromPatch, sections]);
+    }, [effectiveSections, hydrateFieldFromPatch]);
     const handleAgentMessage = useCallback((message) => {
         if (!message.id ||
             !message.isCompleted ||
@@ -945,7 +1266,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             const changes = convertSuggestionToPendingChanges(suggestion);
             if (changes.length === 0)
                 return;
-            setPendingSuggestions((prev) => [...prev, ...changes]);
+            setPendingSuggestions((prev) => mergePendingSuggestionChanges(prev, changes));
             setLatestSuggestionSummary(suggestion.summary || null);
             setSuggestionStatus(`${changes.length} AI suggestion${changes.length === 1 ? "" : "s"} ready for review.`);
             setSuggestionParseError(null);
@@ -1108,14 +1429,14 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
     };
     const renderToggle = (checked, onClick) => (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition ${checked ? "bg-blue-600" : "bg-gray-300"}`, onClick: onClick, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition ${checked ? "translate-x-4" : "translate-x-0.5"}` }) }));
     const renderTypeSelect = (value, onChange) => (_jsx("select", { className: cls.select, value: value, onChange: (e) => onChange(e.target.value), children: fieldTypeGroups.map((group) => (_jsx("optgroup", { label: group.name, children: (group.types || []).map((t) => (_jsx("option", { value: t, children: t }, `${group.name}-${t}`))) }, group.name))) }));
-    const renderSuggestionActions = (change) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", className: "rounded border border-violet-200 bg-white px-2 py-0.5 text-[10px] font-semibold text-violet-700 transition hover:bg-violet-50", onClick: (event) => {
+    const renderSuggestionActions = (change) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", className: "rounded border border-violet-200 bg-white px-2 py-0.5 text-xs font-semibold text-violet-700 transition hover:bg-violet-50", onClick: (event) => {
                     event.stopPropagation();
                     void approveSuggestion(change.id);
-                }, children: "Approve" }), _jsx("button", { type: "button", className: "rounded border border-gray-200 bg-white px-2 py-0.5 text-[10px] font-semibold text-gray-600 transition hover:bg-gray-50", onClick: (event) => {
+                }, children: "Approve" }), _jsx("button", { type: "button", className: "rounded border border-gray-200 bg-white px-2 py-0.5 text-xs font-semibold text-gray-600 transition hover:bg-gray-50", onClick: (event) => {
                     event.stopPropagation();
                     clearSuggestion(change.id);
                 }, children: "Reject" })] }));
-    const renderFooter = () => (_jsxs("div", { className: "mt-auto flex items-center justify-between border-t border-gray-200 px-4 pt-4 pb-1", children: [_jsxs("label", { className: "inline-flex items-center gap-2 text-[11px] text-gray-500 font-medium", children: ["Standard Values", renderToggle(hasStandardValues, () => setHasStandardValues((v) => !v))] }), _jsxs("div", { className: "flex items-center gap-2", children: [onClose && (_jsxs("button", { className: "inline-flex items-center gap-2 rounded border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50", onClick: onClose, disabled: isSaving, children: [_jsx(X, { className: "h-4 w-4" }), "Cancel"] })), _jsxs("button", { className: "inline-flex items-center gap-2 rounded bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-blue-700 hover:shadow-lg active:scale-95 disabled:opacity-50", onClick: save, disabled: isSaving, children: [_jsx(Check, { className: "h-4 w-4" }), isSaving ? "Confirming..." : "Confirm"] })] })] }));
+    const renderFooter = () => (_jsxs(DialogButtons, { className: "mt-auto items-center justify-between border-t bg-gray-50/80 px-4 py-4 backdrop-blur-sm", children: [_jsxs("label", { className: "inline-flex items-center gap-2 text-xs font-medium text-gray-500", children: ["Standard Values", renderToggle(hasStandardValues, () => setHasStandardValues((v) => !v))] }), _jsxs("div", { className: "flex items-center gap-2", children: [onClose && (_jsx(Button, { variant: "ghost", onClick: onClose, disabled: isSaving, children: "Cancel" })), _jsx(Button, { onClick: save, disabled: isSaving, className: "min-w-[140px] shadow-sm", children: isSaving ? (isCreateMode ? "Creating..." : "Updating...") : isCreateMode ? "Create" : "Update" })] })] }));
     /* ────────────────────────────────────────────────────────────
      *  Studio Layout
      *  Three-column: left = inheritance tree, center = field list,
@@ -1141,27 +1462,63 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
     const section = selectedFieldRef?.section;
     const si = selectedFieldRef?.si;
     const fi = selectedFieldRef?.fi;
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col gap-0 overflow-hidden rounded-lg border border-gray-200 bg-white text-gray-900", children: [isCreateMode && (_jsx("div", { className: "border-b border-gray-100 bg-gray-50/40 px-4 py-3", children: _jsxs("div", { className: "max-w-md", children: [_jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-400", children: "Template name" }), _jsx("input", { className: cls.input, value: templateName, onChange: (e) => setTemplateName(e.target.value), placeholder: "New Template" })] }) })), _jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-1 gap-0 lg:grid-cols-[240px_1fr_280px_420px]", children: [_jsx("div", { className: "flex flex-col gap-0 overflow-y-auto border-r border-gray-100 bg-gray-50/30", children: _jsxs("div", { className: "flex-1 overflow-y-auto p-3", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-bold uppercase tracking-widest text-gray-400", children: "Template tree" }), _jsx("div", { className: "h-[240px] rounded border border-gray-200 bg-white shadow-inner", children: _jsx(TreeListSelector, { language: activeLanguage, rootItemIds: [TEMPLATES_ROOT_ID], selectedItemIds: selectedTemplateNodesInTree.map((x) => x.id), onSelectionChange: (nodes) => {
-                                            const selected = nodes
-                                                .filter((n) => normalizeGuid(n.templateId) === normalizeGuid(TEMPLATE_TEMPLATE_ID))
-                                                .map((n) => ({ id: n.id, name: n.name, path: n.path, icon: n.icon, idPath: n.idPath }));
-                                            setSelectedTemplateNodesInTree(selected);
-                                        }, onDoubleClick: (node) => {
-                                            if (normalizeGuid(node.templateId) === normalizeGuid(TEMPLATE_TEMPLATE_ID)) {
-                                                addBaseTemplates([{ id: node.id, name: node.name, path: node.path, icon: node.icon, idPath: node.idPath }]);
-                                            }
-                                        }, onItemSelected: async (node) => {
-                                            const sel = await editContext.itemsRepository.getItem({ id: node.id, language: activeLanguage, version: 0 });
-                                            if (sel && normalizeGuid(sel.templateId) === normalizeGuid(TEMPLATE_TEMPLATE_ID)) {
-                                                addBaseTemplates([{ id: sel.id, name: sel.name, path: sel.path, icon: sel.icon, idPath: sel.idPath }]);
-                                            }
-                                        } }) }), _jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-bold uppercase tracking-widest text-gray-400", children: "Inherited templates" }), baseTemplates.length === 0 ? (_jsx("div", { className: "text-[10px] text-gray-400 italic", children: "None" })) : (_jsxs("div", { className: "space-y-1", children: [baseTemplates.map((t) => {
-                                                    const templateSuggestions = getBaseTemplateSuggestions(t);
-                                                    const hasRemoveSuggestion = templateSuggestions.some((entry) => entry.action === "remove");
-                                                    return (_jsxs("div", { className: `space-y-1 rounded border px-2 py-1 text-[11px] ${hasRemoveSuggestion
-                                                            ? "border-violet-200 bg-violet-50/80 text-violet-900"
-                                                            : "border-gray-200 bg-white text-gray-700"}`, children: [_jsxs("div", { className: "group flex items-center gap-1", children: [t.icon && _jsx("img", { src: t.icon, className: "h-3 w-3 shrink-0" }), _jsx("span", { className: `flex-1 truncate ${hasRemoveSuggestion ? "line-through" : ""}`, children: t.name }), _jsx("button", { className: "text-gray-400 transition hover:text-red-500", onClick: () => removeBaseTemplates([t]), children: _jsx(X, { className: "h-2.5 w-2.5" }) })] }), templateSuggestions.map((entry) => (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded border border-violet-200 bg-white/80 px-2 py-1 text-[10px] text-violet-700", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: ["AI suggests ", entry.action === "remove" ? "removing" : "adding", " this base template", entry.reason ? ` · ${entry.reason}` : ""] }), renderSuggestionActions(entry)] }, entry.id)))] }, t.id));
-                                                }), pendingBaseTemplateAdditions.map((entry) => (_jsx("div", { className: "rounded border border-dashed border-violet-300 bg-violet-50 px-2 py-1 text-[11px] text-violet-800", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-semibold", children: entry.templateName }), _jsxs("div", { className: "truncate text-[10px] text-violet-600", children: ["AI suggestion", entry.reason ? ` · ${entry.reason}` : ""] })] }), renderSuggestionActions(entry)] }) }, entry.id)))] }))] })] }) }), _jsxs("div", { className: "flex flex-col overflow-y-auto bg-white", children: [_jsx("div", { className: "border-b border-gray-100 bg-gray-50/30 px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2 rounded border border-gray-200 bg-white px-2 py-1.5", children: [_jsx(Search, { className: "h-3.5 w-3.5 text-gray-400" }), _jsx("input", { className: "w-full bg-transparent text-xs text-gray-800 outline-none placeholder:text-gray-400", placeholder: "Search fields or sections...", value: fieldSearchQuery, onChange: (e) => setFieldSearchQuery(e.target.value) })] }) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [sections.map((sectionItem, si_idx) => {
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col gap-0 overflow-hidden rounded-lg border border-gray-200 bg-white text-gray-900", children: [_jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-1 gap-0 lg:grid-cols-[240px_1fr_280px_420px]", children: [_jsx("div", { className: "flex flex-col gap-0 overflow-y-auto border-r border-gray-100 bg-gray-50/30", children: _jsx("div", { className: "flex-1 overflow-y-auto p-3", children: _jsxs("div", { className: "flex min-h-full flex-col", children: [(isCreateMode || item) && (_jsxs("div", { className: "mb-3 border-b border-gray-100 pb-3", children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Template name" }), _jsx("input", { className: cls.input, value: templateName, onChange: (e) => setTemplateName(e.target.value), placeholder: "New Template" })] })), _jsx("div", { className: "mb-1.5 text-xs font-bold uppercase tracking-widest text-gray-400", children: "Base templates" }), _jsxs("div", { className: "space-y-1", children: [baseTemplates.length === 0 && pendingBaseTemplateAdditions.length === 0 && (_jsx("div", { className: "text-xs text-gray-400 italic", children: "None" })), baseTemplates.map((t) => {
+                                                const templateSuggestions = getBaseTemplateSuggestions(t);
+                                                const hasRemoveSuggestion = templateSuggestions.some((entry) => entry.action === "remove");
+                                                return (_jsxs("div", { className: `space-y-1 rounded border px-2 py-1 text-xs ${hasRemoveSuggestion
+                                                        ? "border-violet-200 bg-violet-50/80 text-violet-900"
+                                                        : "border-gray-200 bg-white text-gray-700"}`, children: [_jsxs("div", { className: "group flex items-center gap-1", children: [t.icon && _jsx("img", { src: t.icon, className: "h-3 w-3 shrink-0" }), _jsx("span", { className: `flex-1 truncate ${hasRemoveSuggestion ? "line-through" : ""}`, children: t.name }), _jsx("button", { className: "text-gray-400 transition hover:text-red-500", onClick: () => removeBaseTemplates([t]), children: _jsx(X, { className: "h-2.5 w-2.5" }) })] }), templateSuggestions.map((entry) => (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded border border-violet-200 bg-white/80 px-2 py-1 text-xs text-violet-700", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: ["AI suggests ", entry.action === "remove" ? "removing" : "adding", " this base template", entry.reason ? ` · ${entry.reason}` : ""] }), renderSuggestionActions(entry)] }, entry.id)))] }, t.id));
+                                            }), pendingBaseTemplateAdditions.map((entry) => (_jsx("div", { className: "rounded border border-dashed border-violet-300 bg-violet-50 px-2 py-1 text-xs text-violet-800", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-semibold", children: entry.templateName }), _jsxs("div", { className: "truncate text-xs text-violet-600", children: ["AI suggestion", entry.reason ? ` · ${entry.reason}` : ""] })] }), renderSuggestionActions(entry)] }) }, entry.id))), _jsx("div", { className: "flex justify-end pt-1", children: _jsxs(Popover, { open: templatePickerOpen, onOpenChange: (nextOpen) => {
+                                                        if (nextOpen && templatePickerTriggerRef.current) {
+                                                            const dialogContent = templatePickerTriggerRef.current.closest('[data-slot="dialog-content"]');
+                                                            setTemplatePickerPortalContainer(dialogContent);
+                                                        }
+                                                        setTemplatePickerOpen(nextOpen);
+                                                    }, enableIframeClickDetection: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { ref: templatePickerTriggerRef, variant: "default", size: "iconSm", className: "h-7 w-7 rounded-md shadow-sm", title: "Add inherited template", "aria-label": "Add inherited template", children: _jsx(Plus, { className: "h-4 w-4" }) }) }), _jsxs(PopoverContent, { className: "w-[420px] p-0", side: "top", align: "start", container: templatePickerPortalContainer, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "border-b border-gray-100 px-3 py-2", children: [_jsx("div", { className: "text-xs font-semibold text-gray-700", children: "Select template" }), _jsx("div", { className: "text-xs text-gray-500", children: "Choose a template to add to inherited templates." })] }), _jsx("div", { className: "h-[320px] overflow-hidden rounded-b-md bg-white", children: _jsx(TreeListSelector, { language: activeLanguage, rootItemIds: [TEMPLATES_ROOT_ID], selectedItemIds: selectedTemplateNodesInTree.map((x) => x.id), onSelectionChange: (nodes) => {
+                                                                            const selected = nodes
+                                                                                .filter((n) => normalizeGuid(n.templateId) ===
+                                                                                normalizeGuid(TEMPLATE_TEMPLATE_ID))
+                                                                                .map((n) => ({
+                                                                                id: n.id,
+                                                                                name: n.name,
+                                                                                path: n.path,
+                                                                                icon: n.icon,
+                                                                                idPath: n.idPath,
+                                                                            }));
+                                                                            setSelectedTemplateNodesInTree(selected);
+                                                                        }, onDoubleClick: (node) => {
+                                                                            if (normalizeGuid(node.templateId) === normalizeGuid(TEMPLATE_TEMPLATE_ID)) {
+                                                                                addBaseTemplates([
+                                                                                    {
+                                                                                        id: node.id,
+                                                                                        name: node.name,
+                                                                                        path: node.path,
+                                                                                        icon: node.icon,
+                                                                                        idPath: node.idPath,
+                                                                                    },
+                                                                                ]);
+                                                                                setTemplatePickerOpen(false);
+                                                                            }
+                                                                        }, onItemSelected: async (node) => {
+                                                                            const sel = await editContext.itemsRepository.getItem({
+                                                                                id: node.id,
+                                                                                language: activeLanguage,
+                                                                                version: 0,
+                                                                            });
+                                                                            if (sel &&
+                                                                                normalizeGuid(sel.templateId) === normalizeGuid(TEMPLATE_TEMPLATE_ID)) {
+                                                                                addBaseTemplates([
+                                                                                    {
+                                                                                        id: sel.id,
+                                                                                        name: sel.name,
+                                                                                        path: sel.path,
+                                                                                        icon: sel.icon,
+                                                                                        idPath: sel.idPath,
+                                                                                    },
+                                                                                ]);
+                                                                                setTemplatePickerOpen(false);
+                                                                            }
+                                                                        } }) })] })] }) })] })] }) }) }), _jsxs("div", { className: "flex flex-col overflow-y-auto bg-white", children: [_jsx("div", { className: "border-b border-gray-100 bg-gray-50/30 px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2 rounded border border-gray-200 bg-white px-2 py-1.5", children: [_jsx(Search, { className: "h-3.5 w-3.5 text-gray-400" }), _jsx("input", { className: "w-full bg-transparent text-sm text-gray-800 outline-none placeholder:text-gray-400", placeholder: "Search fields or sections...", value: fieldSearchQuery, onChange: (e) => setFieldSearchQuery(e.target.value) })] }) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [sections.map((sectionItem, si_idx) => {
                                         const isSectionDragging = draggedSectionIdx === si_idx;
                                         const isSectionDragOver = dragOverSectionIdx === si_idx;
                                         const sectionSuggestions = getSectionSuggestions(sectionItem.localId);
@@ -1227,7 +1584,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                 toggleSectionCollapsed(si_idx);
                                                             }, children: isCollapsed ? (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) }), _jsx("input", { className: `flex-1 rounded-md border bg-white px-3 py-1.5 text-sm font-semibold shadow-sm outline-none placeholder:text-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 ${sectionSuggestions.length > 0
                                                                 ? "border-violet-200 text-violet-900"
-                                                                : "border-gray-200 text-gray-900"}`, value: sectionItem.name || "", placeholder: `Section ${si_idx + 1}`, onChange: (e) => updateSectionName(si_idx, e.target.value), onClick: (e) => e.stopPropagation() }), _jsx("span", { className: "text-[10px] text-gray-400", children: sectionItem.fields.length }), _jsxs("div", { className: "relative h-5 w-12 shrink-0", children: [_jsx("div", { className: `absolute inset-0 flex items-center justify-center transition-all duration-150 ${sectionDeleteConfirmIdx === si_idx
+                                                                : "border-gray-200 text-gray-900"}`, value: sectionItem.name || "", placeholder: `Section ${si_idx + 1}`, onChange: (e) => updateSectionName(si_idx, e.target.value), onClick: (e) => e.stopPropagation() }), _jsx("span", { className: "text-xs text-gray-400", children: sectionItem.fields.length }), _jsxs("div", { className: "relative h-5 w-12 shrink-0", children: [_jsx("div", { className: `absolute inset-0 flex items-center justify-center transition-all duration-150 ${sectionDeleteConfirmIdx === si_idx
                                                                         ? "scale-90 opacity-0 pointer-events-none"
                                                                         : "scale-100 opacity-100"}`, children: _jsx("button", { className: "text-gray-300 transition hover:text-red-500", onClick: (e) => {
                                                                             e.stopPropagation();
@@ -1241,7 +1598,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                             }, title: "Confirm section delete", "aria-label": "Confirm section delete", children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("button", { className: "text-red-500 transition hover:text-red-600", onClick: (e) => {
                                                                                 e.stopPropagation();
                                                                                 setSectionDeleteConfirmIdx(null);
-                                                                            }, title: "Cancel section delete", "aria-label": "Cancel section delete", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] })] }), sectionSuggestions.length > 0 && (_jsx("div", { className: "mx-3 mb-2 rounded border border-violet-200 bg-violet-50 px-3 py-2 text-[11px] text-violet-800", children: sectionSuggestions.map((entry) => (_jsxs("div", { className: "flex items-center justify-between gap-3 py-1", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [entry.action === "remove"
+                                                                            }, title: "Cancel section delete", "aria-label": "Cancel section delete", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] })] }), sectionSuggestions.length > 0 && (_jsx("div", { className: "mx-3 mb-2 rounded border border-violet-200 bg-violet-50 px-3 py-2 text-xs text-violet-800", children: sectionSuggestions.map((entry) => (_jsxs("div", { className: "flex items-center justify-between gap-3 py-1", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [entry.action === "remove"
                                                                         ? "AI suggests removing this section"
                                                                         : `AI suggests renaming this section to "${entry.section.name}"`, entry.reason ? ` · ${entry.reason}` : ""] }), renderSuggestionActions(entry)] }, entry.id))) })), !isCollapsed && (_jsxs("div", { className: "pb-2", children: [_jsxs("div", { className: "space-y-1 px-3", children: [visibleFields.map(({ fld, fi_idx }) => {
                                                                     const isSelected = selectedFieldKey?.si === si_idx && selectedFieldKey?.fi === fi_idx;
@@ -1297,11 +1654,11 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                                             : isSelected
                                                                                                 ? "text-blue-700"
                                                                                                 : "text-gray-700"} ${hasFieldRemovalSuggestion ? "line-through" : ""}`, children: fieldUpdateSuggestion?.field.name ||
-                                                                                            fld.name || (_jsx("span", { className: "font-normal italic text-gray-400", children: "Unnamed" })) }), _jsxs("div", { className: "text-[11px] text-gray-500", children: [fld.type, fld.source ? ` · ${fld.source}` : ""] }), fieldSuggestions.map((entry) => (_jsxs("div", { className: "mt-1 flex items-center justify-between gap-2 text-[10px] text-violet-700", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.action === "remove"
+                                                                                            fld.name || (_jsx("span", { className: "font-normal italic text-gray-400", children: "Unnamed" })) }), _jsxs("div", { className: "text-xs text-gray-500", children: [fld.type, fld.source ? ` · ${fld.source}` : ""] }), fieldSuggestions.map((entry) => (_jsxs("div", { className: "mt-1 flex items-center justify-between gap-2 text-xs text-violet-700", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.action === "remove"
                                                                                                     ? "AI suggests removing this field"
-                                                                                                    : `AI suggests updating this field${entry.reason ? ` · ${entry.reason}` : ""}` }), renderSuggestionActions(entry)] }, entry.id)))] }), _jsxs("div", { className: "flex items-center gap-2", children: [fld.shared && _jsx("span", { className: "rounded border border-blue-100 bg-blue-50 px-1.5 py-0.5 text-[10px] font-bold text-blue-600", children: "S" }), fld.unversioned && _jsx("span", { className: "rounded border border-amber-100 bg-amber-50 px-1.5 py-0.5 text-[10px] font-bold text-amber-600", children: "U" })] }), _jsx("button", { className: "text-gray-300 transition hover:text-red-500", onClick: (e) => { e.stopPropagation(); removeField(si_idx, fi_idx); }, children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, fld.localId));
-                                                                }), visibleFields.length === 0 && normalizedFieldSearchQuery ? (_jsx("div", { className: "ml-8 px-3 py-2 text-[11px] text-gray-400 italic", children: "No matching fields" })) : null] }), !isSearching &&
-                                                            pendingFieldAdditions.map((entry) => (_jsx("div", { className: "mt-2 mr-3 ml-11 rounded border border-dashed border-violet-300 bg-violet-50 px-3 py-2 text-[11px] text-violet-800", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-semibold", children: entry.field.name || "Suggested field" }), _jsxs("div", { className: "truncate text-[10px] text-violet-600", children: [entry.field.type, entry.reason ? ` · ${entry.reason}` : ""] })] }), renderSuggestionActions(entry)] }) }, entry.id))), !isSearching && draggedFieldRef ? (_jsx("div", { className: `mt-2 mr-3 ml-11 rounded border border-dashed px-2 py-1.5 text-[10px] transition ${dragOverFieldEndSectionIdx === si_idx
+                                                                                                    : `AI suggests updating this field${entry.reason ? ` · ${entry.reason}` : ""}` }), renderSuggestionActions(entry)] }, entry.id)))] }), _jsxs("div", { className: "flex items-center gap-2", children: [fld.shared && _jsx("span", { className: "rounded border border-blue-100 bg-blue-50 px-1.5 py-0.5 text-xs font-bold text-blue-600", children: "S" }), fld.unversioned && _jsx("span", { className: "rounded border border-amber-100 bg-amber-50 px-1.5 py-0.5 text-xs font-bold text-amber-600", children: "U" })] }), _jsx("button", { className: "text-gray-300 transition hover:text-red-500", onClick: (e) => { e.stopPropagation(); removeField(si_idx, fi_idx); }, children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, fld.localId));
+                                                                }), visibleFields.length === 0 && normalizedFieldSearchQuery ? (_jsx("div", { className: "ml-8 px-3 py-2 text-xs text-gray-400 italic", children: "No matching fields" })) : null] }), !isSearching &&
+                                                            pendingFieldAdditions.map((entry) => (_jsx("div", { className: "mt-2 mr-3 ml-11 rounded border border-dashed border-violet-300 bg-violet-50 px-3 py-2 text-xs text-violet-800", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-semibold", children: entry.field.name || "Suggested field" }), _jsxs("div", { className: "truncate text-xs text-violet-600", children: [entry.field.type, entry.reason ? ` · ${entry.reason}` : ""] })] }), renderSuggestionActions(entry)] }) }, entry.id))), !isSearching && draggedFieldRef ? (_jsx("div", { className: `mt-2 mr-3 ml-11 rounded border border-dashed px-2 py-1.5 text-xs transition ${dragOverFieldEndSectionIdx === si_idx
                                                                 ? "border-blue-300 bg-blue-50 text-blue-600"
                                                                 : "border-gray-200 bg-white text-gray-400"}`, onDragOver: (e) => {
                                                                 e.preventDefault();
@@ -1313,10 +1670,10 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                 setDraggedFieldRef(null);
                                                                 setDragOverFieldRef(null);
                                                                 setDragOverFieldEndSectionIdx(null);
-                                                            }, children: "Drop field here to place at end" })) : !isSearching ? (_jsxs("div", { className: "mt-2 mr-3 ml-11 flex items-center gap-2", children: [_jsx("input", { ref: (el) => { newFieldNameInputRefs.current[si_idx] = el; }, className: "flex-1 rounded border border-gray-200 bg-white px-2 py-1.5 text-xs text-gray-800 outline-none placeholder:text-gray-400 focus:border-blue-400", placeholder: "Add field...", value: getFieldDraft(si_idx).name, onChange: (e) => updateFieldDraft(si_idx, { name: e.target.value }), onKeyDown: (e) => { if (e.key === "Enter")
-                                                                        appendFieldToSection(si_idx); } }), _jsx("button", { className: "rounded bg-blue-600 p-1.5 text-white transition hover:bg-blue-700 shadow-sm", onClick: () => appendFieldToSection(si_idx), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })) : null] }))] }, sectionItem.localId));
+                                                            }, children: "Drop field here to place at end" })) : !isSearching ? (_jsxs("div", { className: "mt-2 mr-3 ml-11 flex items-center gap-2", children: [_jsx("input", { ref: (el) => { newFieldNameInputRefs.current[si_idx] = el; }, className: "flex-1 rounded border border-gray-200 bg-white px-2 py-1.5 text-sm text-gray-800 outline-none placeholder:text-gray-400 focus:border-blue-400", placeholder: "Add field...", value: getFieldDraft(si_idx).name, onChange: (e) => updateFieldDraft(si_idx, { name: e.target.value }), onKeyDown: (e) => { if (e.key === "Enter")
+                                                                        appendFieldToSection(si_idx); } }), _jsx("button", { className: "rounded bg-theme-secondary p-1.5 text-white transition hover:bg-theme-secondary/90 shadow-sm", onClick: () => appendFieldToSection(si_idx), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })) : null] }))] }, sectionItem.localId));
                                     }), !isSearching &&
-                                        pendingSectionAdditions.map((entry) => (_jsx("div", { className: "mx-3 mt-2 rounded border border-dashed border-violet-300 bg-violet-50 px-3 py-3 text-violet-900", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold", children: entry.section.name || "Suggested section" }), _jsxs("div", { className: "text-[11px] text-violet-700", children: ["AI section suggestion", entry.reason ? ` · ${entry.reason}` : ""] }), entry.section.fields.length > 0 && (_jsx("div", { className: "mt-2 space-y-1", children: entry.section.fields.map((field) => (_jsxs("div", { className: "rounded border border-violet-200 bg-white/70 px-2 py-1 text-[10px] text-violet-700", children: [field.name || "Suggested field", " \u00B7 ", field.type] }, field.localId))) }))] }), renderSuggestionActions(entry)] }) }, entry.id))), !isSearching && draggedSectionIdx !== null ? (_jsx("div", { className: `mx-3 mt-2 mb-3 rounded border border-dashed px-2 py-1.5 text-[10px] transition ${isDragOverSectionEnd
+                                        pendingSectionAdditions.map((entry) => (_jsx("div", { className: "mx-3 mt-2 rounded border border-dashed border-violet-300 bg-violet-50 px-3 py-3 text-violet-900", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold", children: entry.section.name || "Suggested section" }), _jsxs("div", { className: "text-xs text-violet-700", children: ["AI section suggestion", entry.reason ? ` · ${entry.reason}` : ""] }), entry.section.fields.length > 0 && (_jsx("div", { className: "mt-2 space-y-1", children: entry.section.fields.map((field) => (_jsxs("div", { className: "rounded border border-violet-200 bg-white/70 px-2 py-1 text-xs text-violet-700", children: [field.name || "Suggested field", " \u00B7 ", field.type] }, field.localId))) }))] }), renderSuggestionActions(entry)] }) }, entry.id))), !isSearching && draggedSectionIdx !== null ? (_jsx("div", { className: `mx-3 mt-2 mb-3 rounded border border-dashed px-2 py-1.5 text-xs transition ${isDragOverSectionEnd
                                             ? "border-blue-300 bg-blue-50 text-blue-600"
                                             : "border-gray-200 bg-white text-gray-400"}`, onDragOver: (e) => {
                                             e.preventDefault();
@@ -1330,7 +1687,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                             setDraggedSectionIdx(null);
                                             setDragOverSectionIdx(null);
                                             setIsDragOverSectionEnd(false);
-                                        }, children: "Drop section here to place at end" })) : !isSearching ? (_jsxs("div", { className: "mx-3 mt-2 mb-3 flex items-center gap-2", children: [_jsx("input", { className: "flex-1 rounded border border-gray-200 bg-white px-2 py-1 text-xs text-gray-800 outline-none placeholder:text-gray-400 focus:border-blue-400", placeholder: "New section...", value: newSectionName, onChange: (e) => setNewSectionName(e.target.value), onKeyDown: (e) => { if (e.key === "Enter")
-                                                    appendSection(); } }), _jsx("button", { className: "rounded bg-blue-600 p-1 text-white transition hover:bg-blue-700 shadow-sm", onClick: appendSection, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })) : null] })] }), _jsxs("div", { className: "flex flex-col overflow-y-auto border-l border-gray-100 bg-gray-50/20", children: [_jsx("div", { className: "border-b border-gray-100 px-4 py-2 bg-gray-50/30", children: _jsxs("div", { className: "flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-wider", children: [_jsx(Settings2, { className: "h-3.5 w-3.5" }), " Properties"] }) }), field && section && si !== undefined && fi !== undefined ? (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-400", children: "Name" }), _jsx("input", { className: cls.input, value: field.name, onChange: (e) => updateField(si, fi, { name: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-400", children: "Type" }), renderTypeSelect(field.type, (v) => updateField(si, fi, { type: v }))] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-400", children: "Source" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.source, onChange: (e) => updateField(si, fi, { source: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-400", children: "Short description" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.shortDescription, onChange: (e) => updateField(si, fi, { shortDescription: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-400", children: "Default value" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.defaultValue, onChange: (e) => updateField(si, fi, { defaultValue: e.target.value }) })] }), _jsxs("div", { className: "space-y-3 border-t border-gray-100 pt-3", children: [_jsxs("label", { className: "flex items-center justify-between text-xs text-gray-600 font-medium", children: [_jsx("span", { children: "Shared" }), renderToggle(field.shared, () => updateField(si, fi, { shared: !field.shared }))] }), _jsxs("label", { className: "flex items-center justify-between text-xs text-gray-600 font-medium", children: [_jsx("span", { children: "Unversioned" }), renderToggle(field.unversioned, () => updateField(si, fi, { unversioned: !field.unversioned }))] })] }), _jsxs("button", { className: "mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-red-200 bg-red-50 py-2 text-xs font-semibold text-red-600 transition hover:bg-red-100", onClick: () => { removeField(si, fi); setSelectedFieldKey(null); }, children: [_jsx(Trash2, { className: "h-3.5 w-3.5" }), " Remove field"] })] })) : (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 p-6 text-gray-300", children: [_jsx(Settings2, { className: "h-8 w-8" }), _jsx("p", { className: "text-xs font-medium", children: "Select a field to inspect" })] }))] }), _jsxs("div", { className: "flex min-h-0 flex-col border-l border-gray-100 bg-white", children: [_jsx("div", { className: "border-b border-gray-100 bg-gray-50/30 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-gray-500", children: [_jsx(Bot, { className: "h-3.5 w-3.5" }), " Template Builder AI"] }) }), _jsxs("div", { className: "border-b border-gray-100 px-4 py-3", children: [latestSuggestionSummary && (_jsxs("div", { className: "rounded border border-violet-200 bg-violet-50 px-3 py-2 text-[11px] text-violet-800", children: [_jsx("span", { className: "font-semibold", children: "Latest suggestion:" }), " ", latestSuggestionSummary] })), suggestionStatus && (_jsx("div", { className: "mt-2 text-[11px] text-gray-500", children: suggestionStatus })), suggestionParseError && (_jsxs("div", { className: "mt-2 rounded border border-red-200 bg-red-50 px-3 py-2 text-[11px] text-red-700", children: ["Failed to parse AI response: ", suggestionParseError] })), pendingSuggestions.length > 0 && (_jsxs("div", { className: "mt-2 text-[11px] text-gray-600", children: [pendingSuggestions.length, " pending suggestion", pendingSuggestions.length === 1 ? "" : "s", " highlighted in purple."] }))] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(AgentTerminal, { agentStub: templateBuilderAgent, profiles: effectiveAiProfiles, compact: true, simpleMode: true, hideContext: true, defaultCollapseJson: true, initialMetadata: templateBuilderAgentMetadata, onMessage: handleAgentMessage, className: "h-full" }) })] })] }), renderFooter()] }));
+                                        }, children: "Drop section here to place at end" })) : !isSearching ? (_jsxs("div", { className: "mx-3 mt-2 mb-3 flex items-center gap-2", children: [_jsx("input", { className: "flex-1 rounded border border-gray-200 bg-white px-2 py-1 text-sm text-gray-800 outline-none placeholder:text-gray-400 focus:border-blue-400", placeholder: "New section...", value: newSectionName, onChange: (e) => setNewSectionName(e.target.value), onKeyDown: (e) => { if (e.key === "Enter")
+                                                    appendSection(); } }), _jsx("button", { className: "rounded bg-theme-secondary p-1 text-white transition hover:bg-theme-secondary/90 shadow-sm", onClick: appendSection, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })) : null] })] }), _jsxs("div", { className: "flex flex-col overflow-y-auto border-l border-gray-100 bg-gray-50/20", children: [_jsx("div", { className: "border-b border-gray-100 px-4 py-2 bg-gray-50/30", children: _jsxs("div", { className: "flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-wider", children: [_jsx(Settings2, { className: "h-3.5 w-3.5" }), " Properties"] }) }), field && section && si !== undefined && fi !== undefined ? (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Name" }), _jsx("input", { className: cls.input, value: field.name, onChange: (e) => updateField(si, fi, { name: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Type" }), renderTypeSelect(field.type, (v) => updateField(si, fi, { type: v }))] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Source" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.source, onChange: (e) => updateField(si, fi, { source: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Short description" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.shortDescription, onChange: (e) => updateField(si, fi, { shortDescription: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Default value" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.defaultValue, onChange: (e) => updateField(si, fi, { defaultValue: e.target.value }) })] }), _jsxs("div", { className: "space-y-3 border-t border-gray-100 pt-3", children: [_jsxs("label", { className: "flex items-center justify-between text-xs text-gray-600 font-medium", children: [_jsx("span", { children: "Shared" }), renderToggle(field.shared, () => updateField(si, fi, { shared: !field.shared }))] }), _jsxs("label", { className: "flex items-center justify-between text-xs text-gray-600 font-medium", children: [_jsx("span", { children: "Unversioned" }), renderToggle(field.unversioned, () => updateField(si, fi, { unversioned: !field.unversioned }))] })] }), _jsxs("button", { className: "mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-red-200 bg-red-50 py-2 text-xs font-semibold text-red-600 transition hover:bg-red-100", onClick: () => { removeField(si, fi); setSelectedFieldKey(null); }, children: [_jsx(Trash2, { className: "h-3.5 w-3.5" }), " Remove field"] })] })) : (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 p-6 text-gray-300", children: [_jsx(Settings2, { className: "h-8 w-8" }), _jsx("p", { className: "text-xs font-medium", children: "Select a field to inspect" })] }))] }), _jsxs("div", { className: "flex min-h-0 flex-col border-l border-gray-100 bg-white", children: [_jsx("div", { className: "border-b border-gray-100 bg-gray-50/30 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-gray-500", children: [_jsx(Bot, { className: "h-3.5 w-3.5" }), " Template Builder AI"] }) }), _jsxs("div", { className: "border-b border-gray-100 px-4 py-3", children: [latestSuggestionSummary && (_jsxs("div", { className: "rounded border border-violet-200 bg-violet-50 px-3 py-2 text-xs text-violet-800", children: [_jsx("span", { className: "font-semibold", children: "Latest suggestion:" }), " ", latestSuggestionSummary] })), suggestionStatus && (_jsx("div", { className: "mt-2 text-xs text-gray-500", children: suggestionStatus })), suggestionParseError && (_jsxs("div", { className: "mt-2 rounded border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700", children: ["Failed to parse AI response: ", suggestionParseError] })), pendingSuggestions.length > 0 && (_jsxs("div", { className: "mt-2 text-xs text-gray-600", children: [pendingSuggestions.length, " pending suggestion", pendingSuggestions.length === 1 ? "" : "s", " highlighted in purple."] }))] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(AgentTerminal, { agentStub: templateBuilderAgent, profiles: effectiveAiProfiles, compact: true, simpleMode: true, hideContext: true, defaultCollapseJson: true, initialMetadata: templateBuilderAgentMetadata, onMessage: handleAgentMessage, className: "h-full" }) })] })] }), renderFooter()] }));
 }
 //# sourceMappingURL=TemplateStructureInlineEditor.js.map