@elizaos/app-core 2.0.0-alpha.335 → 2.0.0-alpha.337

package/packages/app-core/src/components/character/CharacterEditorPanels.js

@@ -7,9 +7,9 @@ const PlusIconSvg = ({ className }) => (_jsx("svg", { width: "10", height: "10",
 const TrashIconSvg = ({ className }) => (_jsx("svg", { width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: _jsx("path", { d: "M1.75 2.75h7.5M4 2.75V1.75h3v1M2.75 2.75l.4 6.75h4.7l.4-6.75" }) }));
 /* ── Small grip icon shown as drag affordance ───────────────────── */
 const GripIconSvg = ({ className }) => (_jsxs("svg", { width: "10", height: "14", viewBox: "0 0 10 14", fill: "currentColor", "aria-hidden": "true", className: className, children: [_jsx("circle", { cx: "3", cy: "3", r: "1" }), _jsx("circle", { cx: "3", cy: "7", r: "1" }), _jsx("circle", { cx: "3", cy: "11", r: "1" }), _jsx("circle", { cx: "7", cy: "3", r: "1" }), _jsx("circle", { cx: "7", cy: "7", r: "1" }), _jsx("circle", { cx: "7", cy: "11", r: "1" })] }));
-/* ── Shared styles for inline plus/trash buttons ─────────────────── */
-const inlineAddBtn = "inline-flex h-7 w-7 items-center justify-center rounded-sm text-accent/80 transition-colors hover:bg-accent/10 hover:text-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent";
-const inlineIconBtn = "inline-flex h-7 w-7 items-center justify-center rounded-sm text-muted transition-colors hover:bg-bg-muted/70 hover:text-txt focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60";
+const ArrowUpIconSvg = ({ className }) => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: _jsx("path", { d: "M6 10V2M2.75 5.25 6 2l3.25 3.25" }) }));
+const ArrowDownIconSvg = ({ className }) => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: _jsx("path", { d: "M6 2v8M2.75 6.75 6 10l3.25-3.25" }) }));
+const compactIconBtn = "inline-flex h-7 w-7 items-center justify-center rounded-sm border border-border/35 text-muted transition-colors hover:border-border/70 hover:bg-bg-muted/70 hover:text-txt focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent";
 /* ── Style section constants ─────────────────────────────────────── */
 const STYLE_SECTION_KEYS = ["all"];
 const STYLE_SECTION_PLACEHOLDERS = {
@@ -24,6 +24,49 @@ const STYLE_SECTION_EMPTY_STATES = {
         defaultValue: "No style rules yet.",
     },
 };
+const STYLE_INTENT_GROUPS = [
+    {
+        id: "voice",
+        label: "Voice",
+        hint: "Tone, phrasing, vocabulary, and point of view.",
+        match: /\b(tone|voice|speak|writes?|sounds?|word|phrase|slang|grammar|sentence|style|humor|funny|serious|casual|formal|emoji)\b/i,
+    },
+    {
+        id: "behavior",
+        label: "Behavior",
+        hint: "How the character acts, answers, and makes choices.",
+        match: /\b(should|always|never|avoid|prefer|respond|answer|ask|explain|focus|do not|don't|must|will|acts?|behavior)\b/i,
+    },
+    {
+        id: "boundaries",
+        label: "Boundaries",
+        hint: "Safety, limits, privacy, and things to refuse or avoid.",
+        match: /\b(refuse|limit|boundary|private|privacy|secret|safe|unsafe|harm|illegal|policy|disclose|medical|legal|financial)\b/i,
+    },
+    {
+        id: "general",
+        label: "General",
+        hint: "Rules that do not fit a specific intent yet.",
+        match: null,
+    },
+];
+function normalizeComparable(value) {
+    return value.trim().toLowerCase().replace(/\s+/g, " ");
+}
+function getDuplicateIndices(items) {
+    const buckets = new Map();
+    items.forEach((item, index) => {
+        const normalized = normalizeComparable(item);
+        if (!normalized)
+            return;
+        buckets.set(normalized, [...(buckets.get(normalized) ?? []), index]);
+    });
+    return new Set([...buckets.values()].filter((indices) => indices.length > 1).flat());
+}
+function getStyleIntentGroupId(item) {
+    return (STYLE_INTENT_GROUPS.find((group) => group.match?.test(item)) ??
+        STYLE_INTENT_GROUPS[STYLE_INTENT_GROUPS.length - 1]).id;
+}
 /* ── CharacterIdentityPanel ──────────────────────────────────────── */
 export function CharacterIdentityPanel({ bioText, handleFieldEdit, t, }) {
     return (_jsx("div", { className: "flex flex-col gap-5", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.AboutMe", { defaultValue: "About Me" }) }), _jsx(Textarea, { value: bioText, rows: 8, placeholder: t("charactereditor.AboutMePlaceholder", {
@@ -40,39 +83,57 @@ export function CharacterStylePanel({ d, pendingStyleEntries, styleEntryDrafts,
         next.splice(to, 0, moved);
         return next;
     };
-    return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.StyleRulesHeader", {
-                    defaultValue: "Style Rules",
-                }) }), _jsx("div", { className: "flex flex-col gap-3 min-h-0", children: STYLE_SECTION_KEYS.map((key) => {
+    return (_jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex flex-wrap items-end justify-between gap-2", children: _jsxs("div", { children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.StyleRulesHeader", {
+                                defaultValue: "Style Rules",
+                            }) }), _jsx("p", { className: "mt-1 text-xs text-muted", children: t("charactereditor.StyleRulesHelp", {
+                                defaultValue: "Effective rules from style.all, grouped by intent for easier review.",
+                            }) })] }) }), _jsx("div", { className: "flex flex-col gap-5 min-h-0", children: STYLE_SECTION_KEYS.map((key) => {
                     const items = style?.[key] ?? [];
-                    return (_jsxs("div", { className: "flex flex-col gap-1.5", "data-testid": `style-section-${key}`, children: [_jsx("div", { className: "flex flex-col gap-1", children: items.length > 0 ? (items.map((item, index) => {
-                                    const isDragging = dragStyleIndex?.key === key &&
-                                        dragStyleIndex.index === index;
-                                    return (_jsxs("fieldset", { draggable: true, onDragStart: (e) => {
-                                            setDragStyleIndex({ key, index });
-                                            e.dataTransfer.effectAllowed = "move";
-                                        }, onDragOver: (e) => {
-                                            if (dragStyleIndex === null ||
-                                                dragStyleIndex.key !== key ||
-                                                dragStyleIndex.index === index)
-                                                return;
-                                            e.preventDefault();
-                                            e.dataTransfer.dropEffect = "move";
-                                        }, onDrop: (e) => {
-                                            e.preventDefault();
-                                            if (dragStyleIndex === null ||
-                                                dragStyleIndex.key !== key ||
-                                                dragStyleIndex.index === index)
-                                                return;
-                                            handleReorderStyleEntries(key, reorderStyle(items, dragStyleIndex.index, index));
-                                            setDragStyleIndex(null);
-                                        }, onDragEnd: () => setDragStyleIndex(null), className: `group flex min-w-0 items-start gap-2 border-0 p-0 transition-opacity ${isDragging ? "opacity-40" : ""}`, children: [_jsx("span", { className: "mt-1 shrink-0 text-muted opacity-30 transition-opacity group-hover:opacity-80 cursor-grab active:cursor-grabbing select-none", "aria-hidden": "true", title: t("charactereditor.DragToReorder", {
-                                                    defaultValue: "Drag to reorder",
-                                                }), children: _jsx(GripIconSvg, {}) }), _jsx("span", { className: "mt-0.5 shrink-0 text-2xs font-bold text-accent", children: index + 1 }), _jsx(Textarea, { value: styleEntryDrafts[key]?.[index] ?? item, rows: 1, onChange: (e) => handleStyleEntryDraftChange(key, index, e.target.value), onBlur: () => handleCommitStyleEntry(key, index), "aria-label": `${t(`charactereditor.StyleRules.${key}`, {
-                                                    defaultValue: "Style rule",
-                                                })} ${index + 1}`, className: "min-w-0 flex-1 resize-none border-none bg-transparent p-0 font-mono text-xs leading-normal text-txt [field-sizing:content] min-h-[1.5em] focus-visible:outline-none focus-visible:shadow-none" }), _jsx(Button, { variant: "ghost", size: "icon", className: "mt-0.5 h-auto w-auto shrink-0 p-0 text-muted opacity-0 transition-[opacity,color] duration-150 hover:text-danger group-hover:opacity-100 focus-visible:opacity-100", onClick: () => handleRemoveStyleEntry(key, index), title: t("common.remove"), "aria-label": `${t("common.remove")} ${t(`charactereditor.StyleRules.${key}`, {
-                                                    defaultValue: "style rule",
-                                                })} ${index + 1}`, children: _jsx(TrashIconSvg, {}) })] }, `${key}:${item}`));
-                                })) : (_jsx("div", { className: "py-3 text-xs-tight text-muted", children: t(STYLE_SECTION_EMPTY_STATES[key].key, {
+                    const duplicateIndices = getDuplicateIndices(items);
+                    const groupedItems = STYLE_INTENT_GROUPS.map((group) => ({
+                        ...group,
+                        entries: items
+                            .map((item, index) => ({ item, index }))
+                            .filter(({ item }) => getStyleIntentGroupId(item) === group.id),
+                    })).filter((group) => group.entries.length > 0);
+                    return (_jsxs("div", { className: "flex flex-col gap-3", "data-testid": `style-section-${key}`, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted", children: [_jsxs("span", { className: "rounded-sm border border-border/40 px-2 py-1", children: [items.length, " ", t("charactereditor.StyleRuleCount", {
+                                                defaultValue: "rules",
+                                            })] }), duplicateIndices.size > 0 ? (_jsxs("span", { className: "rounded-sm border border-warning/50 bg-warning/10 px-2 py-1 text-warning", children: [duplicateIndices.size, " ", t("charactereditor.PossibleDuplicates", {
+                                                defaultValue: "possible duplicates",
+                                            })] })) : null] }), _jsx("div", { className: "flex flex-col gap-3", children: items.length > 0 ? (groupedItems.map((group) => (_jsxs("section", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1", children: [_jsx("h4", { className: "text-xs font-semibold text-txt", children: group.label }), _jsx("span", { className: "text-[0.68rem] text-muted", children: group.hint })] }), _jsx("div", { className: "flex flex-col gap-2", children: group.entries.map(({ item, index }) => {
+                                                const isDragging = dragStyleIndex?.key === key &&
+                                                    dragStyleIndex.index === index;
+                                                const isDuplicate = duplicateIndices.has(index);
+                                                return (_jsxs("fieldset", { draggable: true, onDragStart: (e) => {
+                                                        setDragStyleIndex({ key, index });
+                                                        e.dataTransfer.effectAllowed = "move";
+                                                    }, onDragOver: (e) => {
+                                                        if (dragStyleIndex === null ||
+                                                            dragStyleIndex.key !== key ||
+                                                            dragStyleIndex.index === index)
+                                                            return;
+                                                        e.preventDefault();
+                                                        e.dataTransfer.dropEffect = "move";
+                                                    }, onDrop: (e) => {
+                                                        e.preventDefault();
+                                                        if (dragStyleIndex === null ||
+                                                            dragStyleIndex.key !== key ||
+                                                            dragStyleIndex.index === index)
+                                                            return;
+                                                        handleReorderStyleEntries(key, reorderStyle(items, dragStyleIndex.index, index));
+                                                        setDragStyleIndex(null);
+                                                    }, onDragEnd: () => setDragStyleIndex(null), className: `group flex min-w-0 items-center gap-2 rounded-md border p-2.5 transition-opacity ${isDuplicate
+                                                        ? "border-warning/50 bg-warning/5"
+                                                        : "border-border/35 bg-bg-muted/20"} ${isDragging ? "opacity-40" : ""}`, children: [_jsx("span", { className: "shrink-0 text-muted opacity-60 cursor-grab active:cursor-grabbing select-none", "aria-hidden": "true", title: t("charactereditor.DragToReorder", {
+                                                                defaultValue: "Drag to reorder",
+                                                            }), children: _jsx(GripIconSvg, {}) }), _jsx(Input, { value: styleEntryDrafts[key]?.[index] ?? item, onChange: (e) => handleStyleEntryDraftChange(key, index, e.target.value), onBlur: () => handleCommitStyleEntry(key, index), "aria-label": `${t(`charactereditor.StyleRules.${key}`, {
+                                                                defaultValue: "Style rule",
+                                                            })} ${index + 1}`, className: "h-9 min-w-0 flex-1 rounded-sm border border-border/25 bg-bg/60 px-2 text-sm text-txt focus-visible:border-accent/60 focus-visible:ring-0" }), isDuplicate ? (_jsx("span", { className: "shrink-0 rounded-sm bg-warning/15 px-1.5 py-0.5 text-[0.68rem] font-medium text-warning", children: t("charactereditor.DuplicateRule", {
+                                                                defaultValue: "duplicate",
+                                                            }) })) : null, _jsx("div", { className: "flex shrink-0 items-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm border border-border/35 p-0 text-muted transition-colors hover:border-danger/45 hover:bg-danger/10 hover:text-danger", onClick: () => handleRemoveStyleEntry(key, index), title: t("common.remove"), "aria-label": `${t("common.remove")} ${t(`charactereditor.StyleRules.${key}`, {
+                                                                    defaultValue: "style rule",
+                                                                })} ${index + 1}`, children: _jsx(TrashIconSvg, {}) }) })] }, `${key}:${index}`));
+                                            }) })] }, group.id)))) : (_jsx("div", { className: "rounded-md border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t(STYLE_SECTION_EMPTY_STATES[key].key, {
                                         defaultValue: STYLE_SECTION_EMPTY_STATES[key].defaultValue,
                                     }) })) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "text", value: pendingStyleEntries[key], placeholder: t(STYLE_SECTION_PLACEHOLDERS[key].key, {
                                             defaultValue: STYLE_SECTION_PLACEHOLDERS[key].defaultValue,
@@ -81,25 +142,50 @@ export function CharacterStylePanel({ d, pendingStyleEntries, styleEntryDrafts,
                                                 e.preventDefault();
                                                 handleAddStyleEntry(key);
                                             }
-                                        }, className: "h-7 min-w-0 flex-1 rounded-none border-0 border-b border-border/40 bg-transparent px-0 font-mono text-xs-tight text-txt outline-none focus:border-accent" }), _jsx("button", { type: "button", className: inlineAddBtn, onClick: () => handleAddStyleEntry(key), disabled: !pendingStyleEntries[key].trim(), title: t("charactereditor.AddStyleRule", {
+                                        }, className: "h-9 min-w-0 flex-1 rounded-md border border-border/40 bg-bg/70 px-3 text-sm text-txt outline-none focus:border-accent" }), _jsxs("button", { type: "button", className: "inline-flex h-9 shrink-0 items-center gap-2 rounded-md border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent", onClick: () => handleAddStyleEntry(key), disabled: !pendingStyleEntries[key].trim(), title: t("charactereditor.AddStyleRule", {
                                             defaultValue: "Add style rule",
                                         }), "aria-label": t("charactereditor.AddStyleRule", {
                                             defaultValue: "Add style rule",
-                                        }), children: _jsx(PlusIconSvg, {}) })] })] }, key));
+                                        }), children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddStyleRuleShort", {
+                                                defaultValue: "Add rule",
+                                            })] })] })] }, key));
                 }) })] }));
 }
 /* ── CharacterExamplesPanel ──────────────────────────────────────── */
 export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFieldEdit, t, }) {
     const [dragPostIndex, setDragPostIndex] = useState(null);
+    const postExamples = d.postExamples ?? [];
+    const duplicatePostIndices = getDuplicateIndices(postExamples);
     const reorder = (list, from, to) => {
         const next = [...list];
         const [moved] = next.splice(from, 1);
         next.splice(to, 0, moved);
         return next;
     };
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.ChatExamples", {
-                            defaultValue: "Chat Examples",
-                        }) }), _jsxs("div", { className: "flex flex-col divide-y divide-border/30", children: [normalizedMessageExamples.map((convo, ci) => (_jsxs("div", { className: "flex flex-col gap-1.5 py-2.5 first:pt-0 last:pb-0", children: [convo.examples.map((msg, mi) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(GripIconSvg, {}), _jsx("span", { className: `w-12 shrink-0 pr-1 text-right text-[0.5rem] font-semibold uppercase tracking-[0.06em] ${msg.name === "{{user1}}" ? "text-muted" : "text-accent"}`, children: msg.name === "{{user1}}" ? "user" : "agent" }), _jsx(Input, { value: msg.content?.text ?? "", "aria-label": `${msg.name === "{{user1}}" ? "User" : "Agent"} message, conversation ${ci + 1}, turn ${mi + 1}`, onChange: (e) => {
+    const movePostExample = (from, to) => {
+        if (to < 0 || to >= postExamples.length)
+            return;
+        handleFieldEdit("postExamples", reorder(postExamples, from, to));
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.ChatExamples", {
+                                            defaultValue: "Chat Examples",
+                                        }) }), _jsx("p", { className: "mt-1 text-xs text-muted", children: t("charactereditor.ChatExamplesHelp", {
+                                            defaultValue: "Example conversations grouped by channel and speaker.",
+                                        }) })] }), _jsxs("span", { className: "rounded-sm border border-border/40 px-2 py-1 text-xs text-muted", children: [normalizedMessageExamples.length, " ", t("charactereditor.ConversationCount", {
+                                        defaultValue: "conversations",
+                                    })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [normalizedMessageExamples.map((convo, ci) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-border/35 bg-bg-muted/15 p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("h4", { className: "text-xs font-semibold text-txt", children: [t("charactereditor.ChatConversation", {
+                                                                defaultValue: "Conversation",
+                                                            }), " ", ci + 1] }), _jsxs("span", { className: "text-[0.68rem] text-muted", children: [convo.examples.length, " ", t("charactereditor.TurnCount", {
+                                                                defaultValue: "turns",
+                                                            })] })] }), _jsx("button", { type: "button", className: compactIconBtn, onClick: () => {
+                                                    const updated = [...normalizedMessageExamples];
+                                                    updated.splice(ci, 1);
+                                                    handleFieldEdit("messageExamples", updated);
+                                                }, title: t("charactereditor.RemoveExample", {
+                                                    defaultValue: "Remove conversation",
+                                                }), "aria-label": `${t("common.remove")} conversation ${ci + 1}`, children: _jsx(TrashIconSvg, {}) })] }), convo.examples.map((msg, mi) => (_jsxs("div", { className: "grid min-w-0 grid-cols-[4.5rem_1fr] items-start gap-2", children: [_jsx("span", { className: `mt-2 rounded-sm border px-2 py-1 text-center text-[0.68rem] font-semibold uppercase tracking-[0.06em] ${msg.name === "{{user1}}"
+                                                    ? "border-border/40 text-muted"
+                                                    : "border-accent/35 bg-accent/10 text-accent"}`, children: msg.name === "{{user1}}" ? "user" : "agent" }), _jsx(Textarea, { value: msg.content?.text ?? "", rows: 2, "aria-label": `${msg.name === "{{user1}}" ? "User" : "Agent"} message, conversation ${ci + 1}, turn ${mi + 1}`, onChange: (e) => {
                                                     const updated = [...normalizedMessageExamples];
                                                     const convoClone = {
                                                         examples: [...updated[ci].examples],
@@ -110,33 +196,29 @@ export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFie
                                                     };
                                                     updated[ci] = convoClone;
                                                     handleFieldEdit("messageExamples", updated);
-                                                }, className: "h-7 flex-1 rounded-none border-0 border-b border-border/40 bg-transparent px-0 text-xs-tight leading-tight text-txt outline-none focus:border-accent" })] }, `msg-${ci}-${mi}`))), _jsxs("div", { className: "mt-0.5 ml-[4.25rem] flex items-center justify-between", children: [_jsx("button", { type: "button", className: inlineAddBtn, onClick: () => {
-                                                    const agentName = typeof d.name === "string" && d.name.trim()
-                                                        ? d.name.trim()
-                                                        : "Agent";
-                                                    const updated = [...normalizedMessageExamples];
-                                                    const convoClone = {
-                                                        examples: [
-                                                            ...updated[ci].examples,
-                                                            { name: "{{user1}}", content: { text: "" } },
-                                                            { name: agentName, content: { text: "" } },
-                                                        ],
-                                                    };
-                                                    updated[ci] = convoClone;
-                                                    handleFieldEdit("messageExamples", updated);
-                                                }, title: t("charactereditor.AddTurn", {
+                                                }, className: "min-h-[3rem] w-full resize-y rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0" })] }, `msg-${ci}-${mi}`))), _jsx("div", { className: "mt-1 flex items-center justify-between gap-2", children: _jsxs("button", { type: "button", className: "inline-flex h-8 items-center gap-2 rounded-md border border-border/40 px-2.5 text-xs font-medium text-txt transition-colors hover:bg-bg-muted/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: () => {
+                                                const agentName = typeof d.name === "string" && d.name.trim()
+                                                    ? d.name.trim()
+                                                    : "Agent";
+                                                const updated = [...normalizedMessageExamples];
+                                                const convoClone = {
+                                                    examples: [
+                                                        ...updated[ci].examples,
+                                                        { name: "{{user1}}", content: { text: "" } },
+                                                        { name: agentName, content: { text: "" } },
+                                                    ],
+                                                };
+                                                updated[ci] = convoClone;
+                                                handleFieldEdit("messageExamples", updated);
+                                            }, title: t("charactereditor.AddTurn", {
+                                                defaultValue: "Add turn",
+                                            }), "aria-label": t("charactereditor.AddTurn", {
+                                                defaultValue: "Add turn",
+                                            }), children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddTurn", {
                                                     defaultValue: "Add turn",
-                                                }), "aria-label": t("charactereditor.AddTurn", {
-                                                    defaultValue: "Add turn",
-                                                }), children: _jsx(PlusIconSvg, {}) }), _jsx("button", { type: "button", className: inlineIconBtn, onClick: () => {
-                                                    const updated = [...normalizedMessageExamples];
-                                                    updated.splice(ci, 1);
-                                                    handleFieldEdit("messageExamples", updated);
-                                                }, title: t("charactereditor.RemoveExample", {
-                                                    defaultValue: "Remove conversation",
-                                                }), "aria-label": `${t("common.remove")} conversation ${ci + 1}`, children: _jsx(TrashIconSvg, {}) })] })] }, `convo-${ci}`))), normalizedMessageExamples.length === 0 && (_jsx("div", { className: "py-3 text-xs-tight text-muted", children: t("charactereditor.NoChatExamples", {
+                                                })] }) })] }, `convo-${ci}`))), normalizedMessageExamples.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t("charactereditor.NoChatExamples", {
                                     defaultValue: "No chat examples yet.",
-                                }) }))] }), _jsx("button", { type: "button", className: `${inlineAddBtn} self-start mt-1`, onClick: () => {
+                                }) }))] }), _jsxs("button", { type: "button", className: "inline-flex h-9 self-start items-center gap-2 rounded-md border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: () => {
                             const agentName = typeof d.name === "string" && d.name.trim()
                                 ? d.name.trim()
                                 : "Agent";
@@ -154,10 +236,19 @@ export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFie
                             defaultValue: "Add conversation",
                         }), "aria-label": t("charactereditor.AddConversation", {
                             defaultValue: "Add conversation",
-                        }), children: _jsx(PlusIconSvg, {}) })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.PostExamples", {
-                            defaultValue: "Post Examples",
-                        }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [(d.postExamples ?? []).map((post, pi) => {
+                        }), children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddConversation", {
+                                defaultValue: "Add conversation",
+                            })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.PostExamples", {
+                                            defaultValue: "Post Examples",
+                                        }) }), _jsx("p", { className: "mt-1 text-xs text-muted", children: t("charactereditor.PostExamplesHelp", {
+                                            defaultValue: "Standalone post examples for social channels.",
+                                        }) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted", children: [_jsxs("span", { className: "rounded-sm border border-border/40 px-2 py-1", children: [postExamples.length, " ", t("charactereditor.PostCount", {
+                                                defaultValue: "posts",
+                                            })] }), duplicatePostIndices.size > 0 ? (_jsxs("span", { className: "rounded-sm border border-warning/50 bg-warning/10 px-2 py-1 text-warning", children: [duplicatePostIndices.size, " ", t("charactereditor.PossibleDuplicates", {
+                                                defaultValue: "possible duplicates",
+                                            })] })) : null] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [postExamples.map((post, pi) => {
                                 const isDragging = dragPostIndex === pi;
+                                const isDuplicate = duplicatePostIndices.has(pi);
                                 return (_jsxs("fieldset", { draggable: true, onDragStart: (e) => {
                                         setDragPostIndex(pi);
                                         e.dataTransfer.effectAllowed = "move";
@@ -170,29 +261,45 @@ export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFie
                                         e.preventDefault();
                                         if (dragPostIndex === null || dragPostIndex === pi)
                                             return;
-                                        handleFieldEdit("postExamples", reorder(d.postExamples ?? [], dragPostIndex, pi));
+                                        handleFieldEdit("postExamples", reorder(postExamples, dragPostIndex, pi));
                                         setDragPostIndex(null);
-                                    }, onDragEnd: () => setDragPostIndex(null), className: `group flex min-w-0 items-center gap-1.5 border-0 p-0 transition-opacity ${isDragging ? "opacity-40" : ""}`, children: [_jsx("span", { className: "text-muted opacity-30 transition-opacity group-hover:opacity-80 cursor-grab active:cursor-grabbing select-none", "aria-hidden": "true", title: t("charactereditor.DragToReorder", {
+                                    }, onDragEnd: () => setDragPostIndex(null), className: `group flex min-w-0 items-start gap-2 rounded-md border p-2.5 transition-opacity ${isDuplicate
+                                        ? "border-warning/50 bg-warning/5"
+                                        : "border-border/35 bg-bg-muted/15"} ${isDragging ? "opacity-40" : ""}`, children: [_jsx("span", { className: "mt-2 text-muted opacity-60 cursor-grab active:cursor-grabbing select-none", "aria-hidden": "true", title: t("charactereditor.DragToReorder", {
                                                 defaultValue: "Drag to reorder",
-                                            }), children: _jsx(GripIconSvg, {}) }), _jsx(Input, { value: post, "aria-label": `Post example ${pi + 1}`, onChange: (e) => {
-                                                const updated = [...(d.postExamples ?? [])];
-                                                updated[pi] = e.target.value;
-                                                handleFieldEdit("postExamples", updated);
-                                            }, className: "h-7 flex-1 rounded-none border-0 border-b border-border/40 bg-transparent px-0 text-xs-tight leading-tight text-txt outline-none focus:border-accent" }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-auto w-auto shrink-0 p-0 text-muted opacity-0 transition-[opacity,color] duration-150 hover:text-danger group-hover:opacity-100 focus-visible:opacity-100", onClick: () => {
-                                                const updated = [...(d.postExamples ?? [])];
-                                                updated.splice(pi, 1);
-                                                handleFieldEdit("postExamples", updated);
-                                            }, "aria-label": `${t("common.remove")} post ${pi + 1}`, title: t("charactereditor.RemovePost", {
-                                                defaultValue: "Remove post",
-                                            }), children: _jsx(TrashIconSvg, {}) })] }, `post-${pi}`));
-                            }), (d.postExamples ?? []).length === 0 && (_jsx("div", { className: "py-3 text-xs-tight text-muted", children: t("charactereditor.NoPostExamples", {
+                                            }), children: _jsx(GripIconSvg, {}) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-1.5 flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: "text-[0.68rem] font-semibold uppercase tracking-[0.06em] text-accent", children: [t("charactereditor.PostExample", {
+                                                                    defaultValue: "Post",
+                                                                }), " ", "#", pi + 1] }), isDuplicate ? (_jsx("span", { className: "rounded-sm bg-warning/15 px-1.5 py-0.5 text-[0.68rem] font-medium text-warning", children: t("charactereditor.DuplicatePost", {
+                                                                defaultValue: "duplicate",
+                                                            }) })) : null] }), _jsx(Textarea, { value: post, rows: 3, "aria-label": `Post example ${pi + 1}`, onChange: (e) => {
+                                                        const updated = [...postExamples];
+                                                        updated[pi] = e.target.value;
+                                                        handleFieldEdit("postExamples", updated);
+                                                    }, className: "min-h-[4.25rem] w-full resize-y rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0" })] }), _jsxs("div", { className: "flex shrink-0 flex-col gap-1", children: [_jsx("button", { type: "button", className: compactIconBtn, onClick: () => movePostExample(pi, pi - 1), disabled: pi === 0, title: t("charactereditor.MovePostUp", {
+                                                        defaultValue: "Move post up",
+                                                    }), "aria-label": `${t("charactereditor.MovePostUp", {
+                                                        defaultValue: "Move post up",
+                                                    })} ${pi + 1}`, children: _jsx(ArrowUpIconSvg, {}) }), _jsx("button", { type: "button", className: compactIconBtn, onClick: () => movePostExample(pi, pi + 1), disabled: pi === postExamples.length - 1, title: t("charactereditor.MovePostDown", {
+                                                        defaultValue: "Move post down",
+                                                    }), "aria-label": `${t("charactereditor.MovePostDown", {
+                                                        defaultValue: "Move post down",
+                                                    })} ${pi + 1}`, children: _jsx(ArrowDownIconSvg, {}) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm border border-border/35 p-0 text-muted transition-colors hover:border-danger/45 hover:bg-danger/10 hover:text-danger", onClick: () => {
+                                                        const updated = [...postExamples];
+                                                        updated.splice(pi, 1);
+                                                        handleFieldEdit("postExamples", updated);
+                                                    }, "aria-label": `${t("common.remove")} post ${pi + 1}`, title: t("charactereditor.RemovePost", {
+                                                        defaultValue: "Remove post",
+                                                    }), children: _jsx(TrashIconSvg, {}) })] })] }, `post-${pi}`));
+                            }), postExamples.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t("charactereditor.NoPostExamples", {
                                     defaultValue: "No post examples yet.",
-                                }) })), _jsx("button", { type: "button", className: `${inlineAddBtn} self-start mt-1`, onClick: () => {
-                                    const updated = [...(d.postExamples ?? []), ""];
+                                }) })), _jsxs("button", { type: "button", className: "mt-1 inline-flex h-9 self-start items-center gap-2 rounded-md border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: () => {
+                                    const updated = [...postExamples, ""];
                                     handleFieldEdit("postExamples", updated);
                                 }, title: t("charactereditor.AddPost", {
                                     defaultValue: "Add Post",
                                 }), "aria-label": t("charactereditor.AddPost", {
                                     defaultValue: "Add Post",
-                                }), children: _jsx(PlusIconSvg, {}) })] })] })] }));
+                                }), children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddPost", {
+                                        defaultValue: "Add Post",
+                                    })] })] })] })] }));
 }

package/packages/app-core/src/components/character/CharacterExperienceWorkspace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CharacterExperienceWorkspace.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterExperienceWorkspace.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,uBAAuB,CAAC;AAoC/B,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,GACrB,EAAE;IACD,WAAW,EAAE,yBAAyB,EAAE,CAAC;IACzC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,CAAC,EAAE,CACjB,UAAU,EAAE,yBAAyB,EACrC,KAAK,EAAE,wBAAwB,KAC5B,IAAI,CAAC;IACV,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrE,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC,2CA+QA"}
+{"version":3,"file":"CharacterExperienceWorkspace.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterExperienceWorkspace.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,uBAAuB,CAAC;AAqK/B,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,GACrB,EAAE;IACD,WAAW,EAAE,yBAAyB,EAAE,CAAC;IACzC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,CAAC,EAAE,CACjB,UAAU,EAAE,yBAAyB,EACrC,KAAK,EAAE,wBAAwB,KAC5B,IAAI,CAAC;IACV,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrE,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC,2CAiqBA"}