@elizaos/agent 2.0.0-alpha.358 → 2.0.0-alpha.376

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

@@ -0,0 +1,35 @@
+import type { MessageExampleGroup } from "@elizaos/core";
+import type { CharacterData } from "../../api/client-types-config";
+export interface CharacterIdentityPanelProps {
+    bioText: string;
+    handleFieldEdit: (field: string, value: unknown) => void;
+    t: (key: string, opts?: {
+        defaultValue?: string;
+    }) => string;
+}
+export interface CharacterStylePanelProps {
+    d: CharacterData;
+    pendingStyleEntries: Record<string, string>;
+    styleEntryDrafts: Record<string, string[]>;
+    handlePendingStyleEntryChange: (key: string, value: string) => void;
+    handleAddStyleEntry: (key: string) => void;
+    handleRemoveStyleEntry: (key: string, index: number) => void;
+    handleStyleEntryDraftChange: (key: string, index: number, value: string) => void;
+    handleCommitStyleEntry: (key: string, index: number) => void;
+    handleReorderStyleEntries: (key: string, items: string[]) => void;
+    t: (key: string, opts?: {
+        defaultValue?: string;
+    }) => string;
+}
+export interface CharacterExamplesPanelProps {
+    d: CharacterData;
+    normalizedMessageExamples: MessageExampleGroup[];
+    handleFieldEdit: (field: string, value: unknown) => void;
+    t: (key: string, opts?: {
+        defaultValue?: string;
+    }) => string;
+}
+export declare function CharacterIdentityPanel({ bioText, handleFieldEdit, t, }: CharacterIdentityPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CharacterStylePanel({ d, pendingStyleEntries, styleEntryDrafts, handlePendingStyleEntryChange, handleAddStyleEntry, handleRemoveStyleEntry, handleStyleEntryDraftChange, handleCommitStyleEntry, handleReorderStyleEntries, t, }: CharacterStylePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFieldEdit, t, }: CharacterExamplesPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CharacterEditorPanels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterEditorPanels.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/character/CharacterEditorPanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAQzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAkGnE,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CAC9D;AAED,MAAM,WAAW,wBAAwB;IACvC,CAAC,EAAE,aAAa,CAAC;IACjB,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC3C,6BAA6B,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,mBAAmB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,2BAA2B,EAAE,CAC3B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,yBAAyB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CAC9D;AAED,MAAM,WAAW,2BAA2B;IAC1C,CAAC,EAAE,aAAa,CAAC;IACjB,yBAAyB,EAAE,mBAAmB,EAAE,CAAC;IACjD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CAC9D;AAID,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,eAAe,EACf,CAAC,GACF,EAAE,2BAA2B,2CAqB7B;AAID,wBAAgB,mBAAmB,CAAC,EAClC,CAAC,EACD,mBAAmB,EACnB,gBAAgB,EAChB,6BAA6B,EAC7B,mBAAmB,EACnB,sBAAsB,EACtB,2BAA2B,EAC3B,sBAAsB,EACtB,yBAAyB,EACzB,CAAC,GACF,EAAE,wBAAwB,2CAgN1B;AAID,wBAAgB,sBAAsB,CAAC,EACrC,CAAC,EACD,yBAAyB,EACzB,eAAe,EACf,CAAC,GACF,EAAE,2BAA2B,2CAmU7B"}

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

@@ -0,0 +1,250 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Textarea } from "@elizaos/ui";
+import { useState, } from "react";
+/* ── Small plus icon used for inline "add" actions ───────────────── */
+const PlusIconSvg = ({ className }) => (_jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", className: className, children: _jsx("path", { d: "M5 1.25v7.5M1.25 5h7.5" }) }));
+/* ── Small trash icon used for inline "remove" actions ───────────── */
+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" })] }));
+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 = {
+    all: {
+        key: "charactereditor.StylePlaceholderAll",
+        defaultValue: "Add a style rule",
+    },
+};
+const STYLE_SECTION_EMPTY_STATES = {
+    all: {
+        key: "charactereditor.StyleEmptyStateAll",
+        defaultValue: "No style rules yet.",
+    },
+};
+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());
+}
+/* ── 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", {
+                        defaultValue: "Describe who your agent is...",
+                    }), onChange: (e) => handleFieldEdit("bio", e.target.value), className: "w-full resize-none min-h-[8rem] overflow-x-hidden rounded-none border-0 border-b border-border/40 bg-transparent px-0 py-2 font-mono text-xs leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0" })] }) }));
+}
+/* ── CharacterStylePanel ─────────────────────────────────────────── */
+export function CharacterStylePanel({ d, pendingStyleEntries, styleEntryDrafts, handlePendingStyleEntryChange, handleAddStyleEntry, handleRemoveStyleEntry, handleStyleEntryDraftChange, handleCommitStyleEntry, handleReorderStyleEntries, t, }) {
+    const style = d.style;
+    const [dragStyleIndex, setDragStyleIndex] = useState(null);
+    const reorderStyle = (list, from, to) => {
+        const next = [...list];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        return next;
+    };
+    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] ?? [];
+                    const duplicateIndices = getDuplicateIndices(items);
+                    const itemOccurrences = new Map();
+                    return (_jsxs("div", { className: "flex flex-col gap-2", "data-testid": `style-section-${key}`, children: [duplicateIndices.size > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted", children: _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-1", children: items.length > 0 ? (items.map((item, index) => {
+                                    const comparableKey = normalizeComparable(item) || item;
+                                    const occurrence = (itemOccurrences.get(comparableKey) ?? 0) + 1;
+                                    itemOccurrences.set(comparableKey, occurrence);
+                                    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 px-0 py-1 transition-opacity ${isDuplicate ? "" : ""} ${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-8 min-w-0 flex-1 rounded-none border-0 border-b bg-transparent px-0 text-sm text-txt focus-visible:ring-0 ${isDuplicate
+                                                    ? "border-warning/60 focus-visible:border-warning"
+                                                    : "border-border/30 focus-visible:border-accent/60"}` }), 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(Button, { type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm p-0 text-muted opacity-0 transition-colors 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}:${comparableKey}:${occurrence}`));
+                                })) : (_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,
+                                        }), onChange: (e) => handlePendingStyleEntryChange(key, e.target.value), onKeyDown: (e) => {
+                                            if (e.key === "Enter") {
+                                                e.preventDefault();
+                                                handleAddStyleEntry(key);
+                                            }
+                                        }, 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, {}), 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: [_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: "group/convo flex flex-col gap-2 rounded-md border border-border/35 bg-bg-muted/15 p-3", children: [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 px-2 py-1 text-center text-[0.68rem] font-semibold uppercase tracking-[0.06em] ${msg.name === "{{user1}}" ? "text-muted" : "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],
+                                                    };
+                                                    convoClone.examples[mi] = {
+                                                        ...convoClone.examples[mi],
+                                                        content: { text: e.target.value },
+                                                    };
+                                                    updated[ci] = convoClone;
+                                                    handleFieldEdit("messageExamples", updated);
+                                                }, className: "min-h-[3rem] w-full resize-none 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}`))), _jsxs("div", { className: "mt-1 flex items-center justify-end 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",
+                                                    })] }), _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-${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.",
+                                }) }))] }), _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";
+                            const updated = [
+                                ...normalizedMessageExamples,
+                                {
+                                    examples: [
+                                        { name: "{{user1}}", content: { text: "" } },
+                                        { name: agentName, content: { text: "" } },
+                                    ],
+                                },
+                            ];
+                            handleFieldEdit("messageExamples", updated);
+                        }, title: t("charactereditor.AddConversation", {
+                            defaultValue: "Add conversation",
+                        }), "aria-label": t("charactereditor.AddConversation", {
+                            defaultValue: "Add conversation",
+                        }), 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";
+                                    }, onDragOver: (e) => {
+                                        if (dragPostIndex === null || dragPostIndex === pi)
+                                            return;
+                                        e.preventDefault();
+                                        e.dataTransfer.dropEffect = "move";
+                                    }, onDrop: (e) => {
+                                        e.preventDefault();
+                                        if (dragPostIndex === null || dragPostIndex === pi)
+                                            return;
+                                        handleFieldEdit("postExamples", reorder(postExamples, dragPostIndex, pi));
+                                        setDragPostIndex(null);
+                                    }, 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, {}) }), _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-none 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" })] }), _jsx("div", { className: "flex shrink-0 flex-col gap-1", 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: () => {
+                                                    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.",
+                                }) })), _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, {}), t("charactereditor.AddPost", {
+                                        defaultValue: "Add Post",
+                                    })] })] })] })] }));
+}

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

@@ -0,0 +1,11 @@
+import type { CharacterExperienceDraft, CharacterExperienceRecord } from "./character-hub-types";
+export declare function CharacterExperienceWorkspace({ experiences, selectedExperienceId, onSelectExperience, onSaveExperience, onDeleteExperience, savingExperienceId, deletingExperienceId, }: {
+    experiences: CharacterExperienceRecord[];
+    selectedExperienceId: string | null;
+    onSelectExperience: (experienceId: string) => void;
+    onSaveExperience?: (experience: CharacterExperienceRecord, draft: CharacterExperienceDraft) => void;
+    onDeleteExperience?: (experience: CharacterExperienceRecord) => void;
+    savingExperienceId?: string | null;
+    deletingExperienceId?: string | null;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CharacterExperienceWorkspace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterExperienceWorkspace.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/character/CharacterExperienceWorkspace.tsx"],"names":[],"mappings":"AAGA,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,2CAmqBA"}

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

@@ -0,0 +1,224 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Textarea } from "@elizaos/ui";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "../../state/TranslationContext";
+function formatTimestamp(value) {
+    if (value === null || value === undefined)
+        return "Unknown";
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return String(value);
+    return new Intl.DateTimeFormat(undefined, {
+        dateStyle: "medium",
+        timeStyle: "short",
+    }).format(date);
+}
+function normalizeDraft(experience) {
+    return {
+        learning: experience?.learning ?? "",
+        importance: experience?.importance ?? 0.5,
+        confidence: experience?.confidence ?? 0.5,
+        tags: experience?.tags.join(", ") ?? "",
+    };
+}
+function outcomeAccent(outcome) {
+    switch (outcome) {
+        case "positive":
+            return "text-status-success border-status-success/30 bg-status-success-bg";
+        case "negative":
+            return "text-status-danger border-status-danger/30 bg-status-danger-bg";
+        case "mixed":
+            return "text-status-warning border-status-warning/30 bg-status-warning-bg";
+        default:
+            return "text-status-info border-status-info/30 bg-status-info-bg";
+    }
+}
+function clampScore(value) {
+    if (typeof value !== "number" || Number.isNaN(value))
+        return 0;
+    return Math.max(0, Math.min(1, value));
+}
+function formatPercent(value) {
+    return `${Math.round(clampScore(value) * 100)}%`;
+}
+function getTimestampMs(value) {
+    if (value === null || value === undefined)
+        return 0;
+    const timestamp = new Date(value).getTime();
+    return Number.isNaN(timestamp) ? 0 : timestamp;
+}
+function getPriorityScore(experience) {
+    const importance = clampScore(experience.importance);
+    const confidence = clampScore(experience.confidence);
+    const correctionBoost = experience.previousBelief || experience.correctedBelief ? 0.18 : 0;
+    const supersessionBoost = experience.supersedes ? 0.08 : 0;
+    return (importance * 0.64 +
+        (1 - confidence) * 0.28 +
+        correctionBoost +
+        supersessionBoost);
+}
+function needsReview(experience) {
+    return (clampScore(experience.confidence) < 0.65 ||
+        clampScore(experience.importance) >= 0.75 ||
+        Boolean(experience.previousBelief || experience.correctedBelief));
+}
+function compactText(...values) {
+    return values.filter(Boolean).join(" ").toLowerCase();
+}
+function uniqueSorted(values) {
+    return Array.from(new Set(values.map((value) => value?.trim()).filter(Boolean))).sort((left, right) => left.localeCompare(right));
+}
+function selectedOrFirst(experiences, selectedExperienceId) {
+    return (experiences.find((experience) => experience.id === selectedExperienceId) ??
+        experiences[0] ??
+        null);
+}
+function StatTile({ label, value, detail, }) {
+    return (_jsxs("div", { className: "min-w-0 rounded-xl border border-border/30 bg-bg-muted/15 px-3 py-2", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: label }), _jsx("div", { className: "mt-1 text-lg font-semibold leading-tight text-txt", children: value }), _jsx("div", { className: "mt-0.5 truncate text-xs text-muted", children: detail })] }));
+}
+function ScoreBar({ label, value, explanation, }) {
+    const percent = formatPercent(value);
+    return (_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("span", { className: "font-semibold text-muted-strong", children: label }), _jsx("span", { className: "font-mono text-muted", children: percent })] }), _jsx("div", { className: "mt-1 h-2 overflow-hidden rounded-full bg-bg-muted", children: _jsx("div", { className: "h-full rounded-full bg-accent", style: { width: percent } }) }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted", children: explanation })] }));
+}
+function EvidencePanel({ title, body, }) {
+    return (_jsxs("div", { className: "min-w-0 rounded-xl border border-border/30 bg-bg-muted/15 p-3", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: title }), _jsx("p", { className: "mt-2 whitespace-pre-wrap text-sm leading-relaxed text-muted-strong", children: body || "Not recorded." })] }));
+}
+export function CharacterExperienceWorkspace({ experiences, selectedExperienceId, onSelectExperience, onSaveExperience, onDeleteExperience, savingExperienceId, deletingExperienceId, }) {
+    const { t } = useTranslation();
+    const [searchQuery, setSearchQuery] = useState("");
+    const [outcomeFilter, setOutcomeFilter] = useState("all");
+    const [domainFilter, setDomainFilter] = useState("all");
+    const [tagFilter, setTagFilter] = useState("all");
+    const [reviewFilter, setReviewFilter] = useState("all");
+    const [sortMode, setSortMode] = useState("priority");
+    const selectedExperience = useMemo(() => selectedOrFirst(experiences, selectedExperienceId), [experiences, selectedExperienceId]);
+    const [draft, setDraft] = useState(normalizeDraft(selectedExperience));
+    const filters = useMemo(() => {
+        const outcomes = uniqueSorted(experiences.map((experience) => experience.outcome));
+        const domains = uniqueSorted(experiences.map((experience) => experience.domain));
+        const tags = uniqueSorted(experiences.flatMap((experience) => experience.tags));
+        return { outcomes, domains, tags };
+    }, [experiences]);
+    const stats = useMemo(() => {
+        const total = experiences.length;
+        const reviewCount = experiences.filter(needsReview).length;
+        const averageImportance = total === 0
+            ? 0
+            : experiences.reduce((sum, experience) => sum + clampScore(experience.importance), 0) / total;
+        const averageConfidence = total === 0
+            ? 0
+            : experiences.reduce((sum, experience) => sum + clampScore(experience.confidence), 0) / total;
+        const corrections = experiences.filter((experience) => experience.previousBelief || experience.correctedBelief).length;
+        return {
+            averageConfidence,
+            averageImportance,
+            corrections,
+            reviewCount,
+            total,
+        };
+    }, [experiences]);
+    const filteredExperiences = useMemo(() => {
+        const query = searchQuery.trim().toLowerCase();
+        const filtered = experiences.filter((experience) => {
+            if (outcomeFilter !== "all" && experience.outcome !== outcomeFilter) {
+                return false;
+            }
+            if (domainFilter !== "all" && experience.domain !== domainFilter) {
+                return false;
+            }
+            if (tagFilter !== "all" && !experience.tags.includes(tagFilter)) {
+                return false;
+            }
+            if (reviewFilter === "needs-review" && !needsReview(experience)) {
+                return false;
+            }
+            if (reviewFilter === "corrected" &&
+                !experience.previousBelief &&
+                !experience.correctedBelief) {
+                return false;
+            }
+            if (reviewFilter === "superseded" && !experience.supersedes) {
+                return false;
+            }
+            if (!query)
+                return true;
+            const haystack = compactText(experience.type, experience.outcome, experience.domain, experience.context, experience.action, experience.result, experience.learning, experience.previousBelief, experience.correctedBelief, experience.supersedes, ...(experience.relatedExperienceIds ?? []), ...experience.tags);
+            return haystack.includes(query);
+        });
+        return [...filtered].sort((left, right) => {
+            switch (sortMode) {
+                case "confidence":
+                    return clampScore(left.confidence) - clampScore(right.confidence);
+                case "importance":
+                    return clampScore(right.importance) - clampScore(left.importance);
+                case "newest":
+                    return (getTimestampMs(right.createdAt) - getTimestampMs(left.createdAt));
+            }
+            return getPriorityScore(right) - getPriorityScore(left);
+        });
+    }, [
+        domainFilter,
+        experiences,
+        outcomeFilter,
+        reviewFilter,
+        searchQuery,
+        sortMode,
+        tagFilter,
+    ]);
+    const visibleSelectedExperience = useMemo(() => selectedOrFirst(filteredExperiences, selectedExperience?.id ?? null), [filteredExperiences, selectedExperience?.id]);
+    useEffect(() => {
+        setDraft(normalizeDraft(visibleSelectedExperience));
+    }, [visibleSelectedExperience]);
+    const selectedRelatedExperiences = useMemo(() => {
+        const ids = new Set(visibleSelectedExperience?.relatedExperienceIds ?? []);
+        return experiences.filter((experience) => ids.has(experience.id));
+    }, [experiences, visibleSelectedExperience?.relatedExperienceIds]);
+    const supersededExperience = useMemo(() => visibleSelectedExperience?.supersedes
+        ? experiences.find((experience) => experience.id === visibleSelectedExperience.supersedes)
+        : null, [experiences, visibleSelectedExperience]);
+    if (experiences.length === 0) {
+        return (_jsxs("section", { className: "rounded-2xl border border-dashed border-border/40 bg-bg-muted/20 px-5 py-8 text-sm text-muted", children: [_jsx("div", { className: "text-base font-semibold text-txt", children: "I haven\u2019t learned anything yet." }), _jsx("p", { className: "mt-1 max-w-xl", children: "As we work together I\u2019ll keep notes here \u2014 what worked, what didn\u2019t, things I want to remember next time. Each lesson lands with the context that produced it so you can review or correct me." })] }));
+    }
+    return (_jsxs("section", { className: "flex min-w-0 flex-col gap-4", children: [_jsxs("div", { className: "rounded-2xl border border-border/40 bg-bg/70 p-4", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "text-base font-semibold text-txt", children: "Experience" }), _jsx("p", { className: "text-sm text-muted", children: "Triage learned outcomes by priority, confidence, evidence, and correction history." })] }), _jsxs("div", { className: "rounded-full border border-border/40 px-3 py-1 text-xs font-semibold text-muted", children: [filteredExperiences.length, " of ", experiences.length, " shown"] })] }), _jsxs("div", { className: "mt-4 grid gap-3 md:grid-cols-4", children: [_jsx(StatTile, { label: "Captured", value: String(stats.total), detail: `${stats.reviewCount} need review` }), _jsx(StatTile, { label: "Avg importance", value: formatPercent(stats.averageImportance), detail: "Ranking weight" }), _jsx(StatTile, { label: "Avg confidence", value: formatPercent(stats.averageConfidence), detail: "Evidence strength" }), _jsx(StatTile, { label: "Corrections", value: String(stats.corrections), detail: "Beliefs revised" })] }), _jsxs("div", { className: "mt-4 grid gap-3 lg:grid-cols-[minmax(14rem,1.4fr)_repeat(5,minmax(8rem,1fr))]", children: [_jsxs("label", { htmlFor: "experience-search", className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Search experiences" }), _jsx(Input, { id: "experience-search", type: "search", value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: t("character.searchLearningEvidenceTags"), className: "h-9 rounded-xl border-border/40 bg-bg-muted/15" })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Outcome filter" }), _jsxs("select", { "aria-label": t("character.outcomeFilter"), value: outcomeFilter, onChange: (event) => setOutcomeFilter(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "all", children: "All outcomes" }), filters.outcomes.map((outcome) => (_jsx("option", { value: outcome, children: outcome }, outcome)))] })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Domain filter" }), _jsxs("select", { "aria-label": t("character.domainFilter"), value: domainFilter, onChange: (event) => setDomainFilter(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "all", children: "All domains" }), filters.domains.map((domain) => (_jsx("option", { value: domain, children: domain }, domain)))] })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Tag filter" }), _jsxs("select", { "aria-label": t("character.tagFilter"), value: tagFilter, onChange: (event) => setTagFilter(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "all", children: "All tags" }), filters.tags.map((tag) => (_jsx("option", { value: tag, children: tag }, tag)))] })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Review filter" }), _jsxs("select", { "aria-label": t("character.reviewFilter"), value: reviewFilter, onChange: (event) => setReviewFilter(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "all", children: "All review states" }), _jsx("option", { value: "needs-review", children: "Needs review" }), _jsx("option", { value: "corrected", children: "Corrected belief" }), _jsx("option", { value: "superseded", children: "Supersedes prior" })] })] }), _jsxs("label", { className: "min-w-0", children: [_jsx("span", { className: "sr-only", children: "Sort experiences" }), _jsxs("select", { "aria-label": t("character.sortExperiences"), value: sortMode, onChange: (event) => setSortMode(event.target.value), className: "h-9 w-full rounded-xl border border-border/40 bg-bg-muted/15 px-3 text-sm text-txt", children: [_jsx("option", { value: "priority", children: "Priority" }), _jsx("option", { value: "newest", children: "Newest" }), _jsx("option", { value: "importance", children: "Importance" }), _jsx("option", { value: "confidence", children: "Lowest confidence" })] })] })] })] }), _jsxs("div", { className: "grid min-w-0 gap-4 xl:grid-cols-[minmax(19rem,25rem)_minmax(0,1fr)]", children: [_jsxs("div", { className: "flex min-h-[28rem] min-w-0 flex-col overflow-hidden rounded-2xl border border-border/40 bg-bg/70", children: [_jsxs("div", { className: "border-b border-border/30 px-4 py-3", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Review queue" }), _jsx("p", { className: "mt-1 text-sm text-muted", children: "Priority favors high importance, low confidence, and corrected beliefs." })] }), _jsx("div", { className: "custom-scrollbar flex min-w-0 flex-1 flex-col overflow-y-auto", children: filteredExperiences.length === 0 ? (_jsx("div", { className: "px-4 py-8 text-sm text-muted", children: "No experiences match the current filters." })) : (filteredExperiences.map((experience) => {
+                                    const isSelected = experience.id === visibleSelectedExperience?.id;
+                                    const reviewReasons = [
+                                        clampScore(experience.importance) >= 0.75
+                                            ? "high importance"
+                                            : null,
+                                        clampScore(experience.confidence) < 0.65
+                                            ? "low confidence"
+                                            : null,
+                                        experience.previousBelief || experience.correctedBelief
+                                            ? "belief changed"
+                                            : null,
+                                    ].filter(Boolean);
+                                    return (_jsxs("button", { type: "button", "data-testid": `experience-row-${experience.id}`, className: `flex min-w-0 flex-col items-start gap-2 border-b border-border/20 px-4 py-4 text-left transition-colors hover:bg-bg-muted/20 ${isSelected ? "bg-bg-muted/25" : ""}`, onClick: () => onSelectExperience(experience.id), children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "rounded-full border border-border/40 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: experience.type }), _jsx("span", { className: `rounded-full border px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] ${outcomeAccent(experience.outcome)}`, children: experience.outcome }), needsReview(experience) ? (_jsx("span", { className: "rounded-full border border-status-warning/30 bg-status-warning-bg px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-status-warning", children: "Review" })) : null] }), _jsx("h4", { className: "line-clamp-2 text-sm font-semibold text-txt", children: experience.learning ||
+                                                    experience.result ||
+                                                    experience.context }), _jsxs("div", { className: "grid w-full grid-cols-2 gap-2 text-xs text-muted", children: [_jsxs("span", { children: ["Importance ", formatPercent(experience.importance)] }), _jsxs("span", { children: ["Confidence ", formatPercent(experience.confidence)] })] }), _jsx("p", { className: "line-clamp-2 text-sm text-muted-strong", children: experience.context }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 text-xs text-muted", children: [_jsx("span", { children: formatTimestamp(experience.createdAt) }), experience.domain ? (_jsx("span", { children: experience.domain })) : null, reviewReasons.length > 0 ? (_jsx("span", { children: reviewReasons.join(", ") })) : null] })] }, experience.id));
+                                })) })] }), visibleSelectedExperience ? (_jsxs("div", { className: "flex min-w-0 flex-col gap-4 rounded-2xl border border-border/40 bg-bg/70 px-4 py-4", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "rounded-full border border-border/40 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: visibleSelectedExperience.type }), _jsx("span", { className: `rounded-full border px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] ${outcomeAccent(visibleSelectedExperience.outcome)}`, children: visibleSelectedExperience.outcome }), visibleSelectedExperience.domain ? (_jsx("span", { className: "rounded-full border border-border/40 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: visibleSelectedExperience.domain })) : null, needsReview(visibleSelectedExperience) ? (_jsx("span", { className: "rounded-full border border-status-warning/30 bg-status-warning-bg px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-status-warning", children: "Needs review" })) : null] }), _jsx("h4", { className: "mt-2 text-lg font-semibold leading-snug text-txt", children: visibleSelectedExperience.learning ||
+                                                    visibleSelectedExperience.result ||
+                                                    visibleSelectedExperience.context }), _jsxs("p", { className: "mt-1 text-xs text-muted", children: ["Created ", formatTimestamp(visibleSelectedExperience.createdAt), visibleSelectedExperience.updatedAt
+                                                        ? ` · Updated ${formatTimestamp(visibleSelectedExperience.updatedAt)}`
+                                                        : ""] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [onDeleteExperience ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-lg", disabled: deletingExperienceId === visibleSelectedExperience.id, onClick: () => onDeleteExperience(visibleSelectedExperience), children: deletingExperienceId === visibleSelectedExperience.id
+                                                    ? "Deleting..."
+                                                    : "Delete" })) : null, onSaveExperience ? (_jsx(Button, { type: "button", size: "sm", className: "rounded-lg", disabled: savingExperienceId === visibleSelectedExperience.id, onClick: () => onSaveExperience(visibleSelectedExperience, draft), children: savingExperienceId === visibleSelectedExperience.id
+                                                    ? "Saving..."
+                                                    : "Save review" })) : null] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(16rem,0.8fr)]", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "rounded-xl border border-border/30 bg-bg-muted/15 p-3", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Learned takeaway" }), _jsx("p", { className: "mt-2 whitespace-pre-wrap text-sm leading-relaxed text-muted-strong", children: visibleSelectedExperience.learning || "Not recorded." })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsx(EvidencePanel, { title: "Context", body: visibleSelectedExperience.context }), _jsx(EvidencePanel, { title: "Action", body: visibleSelectedExperience.action }), _jsx(EvidencePanel, { title: "Result", body: visibleSelectedExperience.result })] })] }), _jsxs("div", { className: "space-y-4 rounded-xl border border-border/30 bg-bg-muted/10 p-3", children: [_jsx(ScoreBar, { label: "Importance", value: visibleSelectedExperience.importance, explanation: "Higher values rank this learning as more likely to affect future behavior." }), _jsx(ScoreBar, { label: "Confidence", value: visibleSelectedExperience.confidence, explanation: "Lower confidence keeps this item in the review queue until evidence improves." }), _jsxs("div", { children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Tags" }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: visibleSelectedExperience.tags.length > 0 ? (visibleSelectedExperience.tags.map((tag) => (_jsx("span", { className: "rounded-full border border-border/40 px-2 py-0.5 text-xs text-muted-strong", children: tag }, tag)))) : (_jsx("span", { className: "text-sm text-muted", children: "No tags recorded." })) })] })] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsx(EvidencePanel, { title: "Previous belief", body: visibleSelectedExperience.previousBelief }), _jsx(EvidencePanel, { title: "Corrected belief", body: visibleSelectedExperience.correctedBelief })] }), visibleSelectedExperience.supersedes ||
+                                selectedRelatedExperiences.length > 0 ? (_jsxs("div", { className: "rounded-xl border border-border/30 bg-bg-muted/15 p-3", children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Related experience trail" }), _jsxs("div", { className: "mt-2 space-y-2 text-sm text-muted-strong", children: [visibleSelectedExperience.supersedes ? (_jsxs("p", { children: ["Supersedes", " ", _jsx("span", { className: "font-mono text-txt", children: visibleSelectedExperience.supersedes }), supersededExperience
+                                                        ? `: ${supersededExperience.learning || supersededExperience.result}`
+                                                        : ""] })) : null, selectedRelatedExperiences.map((experience) => (_jsxs("button", { type: "button", className: "block w-full rounded-lg border border-border/30 px-3 py-2 text-left hover:bg-bg-muted/20", onClick: () => onSelectExperience(experience.id), children: [_jsx("span", { className: "font-mono text-xs text-muted", children: experience.id }), _jsx("span", { className: "ml-2", children: experience.learning ||
+                                                            experience.result ||
+                                                            experience.context })] }, experience.id)))] })] })) : null, _jsxs("div", { className: "rounded-xl border border-border/30 bg-bg-muted/10 p-3", children: [_jsx("div", { className: "mb-3 flex items-center justify-between gap-3", children: _jsxs("div", { children: [_jsx("div", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Review edit" }), _jsx("p", { className: "text-xs text-muted", children: "Update the takeaway, ranking, and tags after checking evidence." })] }) }), _jsxs("label", { htmlFor: `experience-learning-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Learning" }), _jsx(Textarea, { id: `experience-learning-${visibleSelectedExperience.id}`, value: draft.learning, rows: 6, onChange: (event) => setDraft((current) => ({
+                                                    ...current,
+                                                    learning: event.target.value,
+                                                })), className: "min-h-[8rem] resize-y rounded-xl border-border/40 bg-bg-muted/15 font-mono text-sm leading-relaxed" })] }), _jsxs("div", { className: "mt-4 grid gap-4 md:grid-cols-3", children: [_jsxs("label", { htmlFor: `experience-importance-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Importance" }), _jsx(Input, { id: `experience-importance-${visibleSelectedExperience.id}`, type: "number", min: "0", max: "1", step: "0.05", value: String(draft.importance), onChange: (event) => setDraft((current) => ({
+                                                            ...current,
+                                                            importance: Number(event.target.value || 0),
+                                                        })), className: "rounded-xl border-border/40 bg-bg-muted/15" })] }), _jsxs("label", { htmlFor: `experience-confidence-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Confidence" }), _jsx(Input, { id: `experience-confidence-${visibleSelectedExperience.id}`, type: "number", min: "0", max: "1", step: "0.05", value: String(draft.confidence), onChange: (event) => setDraft((current) => ({
+                                                            ...current,
+                                                            confidence: Number(event.target.value || 0),
+                                                        })), className: "rounded-xl border-border/40 bg-bg-muted/15" })] }), _jsxs("label", { htmlFor: `experience-tags-${visibleSelectedExperience.id}`, className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted", children: "Tags" }), _jsx(Input, { id: `experience-tags-${visibleSelectedExperience.id}`, type: "text", value: draft.tags, onChange: (event) => setDraft((current) => ({
+                                                            ...current,
+                                                            tags: event.target.value,
+                                                        })), className: "rounded-xl border-border/40 bg-bg-muted/15" })] })] })] })] })) : null] })] }));
+}

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

@@ -0,0 +1,22 @@
+import type { MessageExampleGroup } from "@elizaos/core";
+import type { CharacterData } from "../../api/client-types";
+type CharacterStyleSection = "all" | "chat" | "post";
+export declare function CharacterHubView({ d, bioText, normalizedMessageExamples, pendingStyleEntries, styleEntryDrafts, handleFieldEdit, applyFieldEdit, handlePendingStyleEntryChange, applyStyleEdit, handleStyleEntryDraftChange, characterSaving, characterSaveSuccess, characterSaveError, hasPendingChanges, onSave, }: {
+    d: CharacterData;
+    bioText: string;
+    normalizedMessageExamples: MessageExampleGroup[];
+    pendingStyleEntries: Record<string, string>;
+    styleEntryDrafts: Record<string, string[]>;
+    handleFieldEdit: (field: string, value: unknown) => void;
+    applyFieldEdit: (field: string, value: unknown) => void;
+    handlePendingStyleEntryChange: (key: string, value: string) => void;
+    applyStyleEdit: (key: CharacterStyleSection, value: string) => void;
+    handleStyleEntryDraftChange: (key: string, index: number, value: string) => void;
+    characterSaving: boolean;
+    characterSaveSuccess: string | null;
+    characterSaveError: string | null;
+    hasPendingChanges: boolean;
+    onSave: () => Promise<unknown>;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CharacterHubView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CharacterHubView.d.ts","sourceRoot":"","sources":["../../../../../../../app-core/src/components/character/CharacterHubView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AA2BzD,OAAO,KAAK,EACV,aAAa,EAKd,MAAM,wBAAwB,CAAC;AA0BhC,KAAK,qBAAqB,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAgKrD,wBAAgB,gBAAgB,CAAC,EAC/B,CAAC,EACD,OAAO,EACP,yBAAyB,EACzB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,6BAA6B,EAC7B,cAAc,EACd,2BAA2B,EAC3B,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,GACP,EAAE;IACD,CAAC,EAAE,aAAa,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB,EAAE,mBAAmB,EAAE,CAAC;IACjD,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC3C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,6BAA6B,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,cAAc,EAAE,CAAC,GAAG,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,2BAA2B,EAAE,CAC3B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CAChC,2CA++BA"}