@elizaos/agent 2.0.0-alpha.520 → 2.0.0-alpha.521

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

@@ -1,688 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Button, PageLayout, SidebarContent, SidebarPanel, SidebarScrollRegion, } from "@elizaos/ui";
-import { BookOpen, Brain, LayoutDashboard, MessageCircle, Network, PencilLine, Sparkles, } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { client } from "../../api/client";
-import { useApp } from "../../state/useApp";
-// Direct sub-path import to avoid the widgets/index.ts ↔ WidgetHost.tsx
-// chunk-level circular dependency.
-import { WidgetHost } from "../../widgets/WidgetHost";
-import { getBrandIcon } from "../conversations/brand-icons";
-import { KnowledgeView } from "../pages/KnowledgeView";
-import { RelationshipsWorkspaceView } from "../pages/relationships/RelationshipsWorkspaceView";
-import { AppPageSidebar } from "../shared/AppPageSidebar";
-import { CharacterExamplesPanel, CharacterIdentityPanel, CharacterStylePanel, } from "./CharacterEditorPanels";
-import { CharacterExperienceWorkspace } from "./CharacterExperienceWorkspace";
-import { CharacterLearnedSkillsSection } from "./CharacterLearnedSkillsSection";
-import { CharacterOverviewSection, } from "./CharacterOverviewSection";
-import { CharacterRelationshipsSection } from "./CharacterRelationshipsSection";
-import { CHARACTER_HUB_SECTIONS, getCharacterHubSectionLabel, mapExperienceRecordToHubRecord, } from "./character-hub-helpers";
-const CHARACTER_SECTION_PATHS = {
-    overview: "/character",
-    personality: "/character/personality",
-    knowledge: "/character/knowledge",
-    skills: "/character/skills",
-    experience: "/character/experience",
-    relationships: "/character/relationships",
-};
-const CHARACTER_SECTION_META = {
-    overview: {
-        icon: LayoutDashboard,
-    },
-    personality: {
-        icon: PencilLine,
-    },
-    knowledge: {
-        icon: BookOpen,
-    },
-    skills: {
-        icon: Sparkles,
-    },
-    experience: {
-        icon: Brain,
-    },
-    relationships: {
-        icon: Network,
-    },
-};
-function getSectionFromLocation(tab) {
-    if (typeof window === "undefined")
-        return "overview";
-    const pathname = window.location.pathname.toLowerCase();
-    if (pathname.endsWith("/personality"))
-        return "personality";
-    if (pathname.endsWith("/knowledge"))
-        return "knowledge";
-    if (pathname.endsWith("/skills"))
-        return "skills";
-    if (pathname.endsWith("/experience"))
-        return "experience";
-    if (pathname.endsWith("/relationships"))
-        return "relationships";
-    if (tab === "knowledge")
-        return "knowledge";
-    return "overview";
-}
-function updateCharacterSectionPath(section, mode = "push") {
-    if (typeof window === "undefined")
-        return;
-    const path = CHARACTER_SECTION_PATHS[section];
-    if (!path || window.location.pathname === path)
-        return;
-    window.history[mode === "replace" ? "replaceState" : "pushState"](null, "", path);
-}
-const DEFAULT_KNOWLEDGE_FILENAMES = new Set([
-    "eliza-overview.txt",
-    "eliza-history.txt",
-    "eliza-cloud-basics.txt",
-]);
-function isDefaultKnowledgeDocument(document) {
-    const normalizedFilename = document.filename.trim().toLowerCase();
-    return (document.source === "bundled" ||
-        document.source === "character" ||
-        document.provenance.kind === "bundled" ||
-        document.provenance.kind === "character" ||
-        DEFAULT_KNOWLEDGE_FILENAMES.has(normalizedFilename));
-}
-function mergeCharacterPatch(base, patch) {
-    return {
-        ...base,
-        ...patch,
-        style: patch.style ? { ...(base.style ?? {}), ...patch.style } : base.style,
-    };
-}
-function latestTimestamp(value) {
-    if (value === null || value === undefined)
-        return 0;
-    const date = new Date(value);
-    return Number.isNaN(date.getTime()) ? 0 : date.getTime();
-}
-const HUB_CACHE_PREFIX = "character-hub-cache";
-function hubCacheKey(suffix) {
-    return `${HUB_CACHE_PREFIX}:${suffix}`;
-}
-function readHubCache(suffix, fallback) {
-    if (typeof window === "undefined")
-        return fallback;
-    try {
-        const raw = window.localStorage.getItem(hubCacheKey(suffix));
-        if (!raw)
-            return fallback;
-        const parsed = JSON.parse(raw);
-        return parsed ?? fallback;
-    }
-    catch {
-        return fallback;
-    }
-}
-function writeHubCache(suffix, value) {
-    if (typeof window === "undefined")
-        return;
-    try {
-        window.localStorage.setItem(hubCacheKey(suffix), JSON.stringify(value));
-    }
-    catch {
-        /* ignore quota / serialization errors */
-    }
-}
-function formatRelativeTime(value) {
-    if (value === null || value === undefined)
-        return "";
-    const time = typeof value === "number" ? value : new Date(value).getTime();
-    if (Number.isNaN(time) || time <= 0)
-        return "";
-    const diff = Date.now() - time;
-    if (diff < 0)
-        return "just now";
-    const minute = 60_000;
-    const hour = 60 * minute;
-    const day = 24 * hour;
-    if (diff < minute)
-        return "just now";
-    if (diff < hour) {
-        const value = Math.round(diff / minute);
-        return `${value}m ago`;
-    }
-    if (diff < day) {
-        const value = Math.round(diff / hour);
-        return `${value}h ago`;
-    }
-    if (diff < 7 * day) {
-        const value = Math.round(diff / day);
-        return `${value}d ago`;
-    }
-    return new Date(time).toLocaleDateString();
-}
-export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendingStyleEntries, styleEntryDrafts, handleFieldEdit, applyFieldEdit, handlePendingStyleEntryChange, applyStyleEdit, handleStyleEntryDraftChange, characterSaving, characterSaveSuccess, characterSaveError, hasPendingChanges, onSave, }) {
-    const { setActionNotice, setTab, tab, t } = useApp();
-    const [activeSection, setActiveSection] = useState(() => getSectionFromLocation(tab));
-    const [knowledgeDocuments, setKnowledgeDocuments] = useState(() => readHubCache("knowledge-docs", []));
-    const [knowledgeLoading, setKnowledgeLoading] = useState(true);
-    const [selectedKnowledgeDocumentId, setSelectedKnowledgeDocumentId] = useState(null);
-    const [historyEntries, setHistoryEntries] = useState(() => readHubCache("history", []));
-    const [historyLoading, setHistoryLoading] = useState(true);
-    const [, setHistoryError] = useState(null);
-    const [relationshipActivity, setRelationshipActivity] = useState(() => readHubCache("relationship-activity", []));
-    const [relationshipActivityLoading, setRelationshipActivityLoading] = useState(true);
-    const [relationshipActivityError, setRelationshipActivityError] = useState(null);
-    const [learnedSkills, setLearnedSkills] = useState(() => readHubCache("learned-skills", []));
-    const [learnedSkillsLoading, setLearnedSkillsLoading] = useState(true);
-    const [experienceRecords, setExperienceRecords] = useState(() => readHubCache("experience-records", []));
-    const [selectedExperienceId, setSelectedExperienceId] = useState(null);
-    const [experienceLoading, setExperienceLoading] = useState(true);
-    const [experienceError, setExperienceError] = useState(null);
-    const [savingExperienceId, setSavingExperienceId] = useState(null);
-    const [deletingExperienceId, setDeletingExperienceId] = useState(null);
-    const contentScrollRef = useRef(null);
-    const autoSaveTimerRef = useRef(null);
-    const pendingAutoSavePatchRef = useRef({});
-    const flushPendingAutoSave = useCallback(async () => {
-        if (autoSaveTimerRef.current !== null) {
-            window.clearTimeout(autoSaveTimerRef.current);
-            autoSaveTimerRef.current = null;
-        }
-        const patch = pendingAutoSavePatchRef.current;
-        if (Object.keys(patch).length === 0) {
-            return;
-        }
-        pendingAutoSavePatchRef.current = {};
-        try {
-            await client.updateCharacter(patch);
-        }
-        catch (error) {
-            setActionNotice(error instanceof Error
-                ? error.message
-                : "Failed to autosave personality updates.", "error", 5000);
-        }
-    }, [setActionNotice]);
-    const scheduleAutoSave = useCallback((patch) => {
-        pendingAutoSavePatchRef.current = mergeCharacterPatch(pendingAutoSavePatchRef.current, patch);
-        if (autoSaveTimerRef.current !== null) {
-            window.clearTimeout(autoSaveTimerRef.current);
-        }
-        autoSaveTimerRef.current = window.setTimeout(() => {
-            autoSaveTimerRef.current = null;
-            void flushPendingAutoSave();
-        }, 700);
-    }, [flushPendingAutoSave]);
-    useEffect(() => {
-        return () => {
-            void flushPendingAutoSave();
-        };
-    }, [flushPendingAutoSave]);
-    useEffect(() => {
-        setActiveSection(getSectionFromLocation(tab));
-    }, [tab]);
-    useEffect(() => {
-        const handlePopState = () => {
-            setActiveSection(getSectionFromLocation(tab));
-        };
-        window.addEventListener("popstate", handlePopState);
-        return () => window.removeEventListener("popstate", handlePopState);
-    }, [tab]);
-    useEffect(() => {
-        let cancelled = false;
-        setHistoryLoading(true);
-        setHistoryError(null);
-        void client
-            .listCharacterHistory({ limit: 100 })
-            .then((response) => {
-            if (!cancelled) {
-                setHistoryEntries(response.history);
-                writeHubCache("history", response.history);
-            }
-        })
-            .catch((error) => {
-            if (!cancelled) {
-                setHistoryError(error instanceof Error
-                    ? error.message
-                    : "Failed to load personality history.");
-            }
-        })
-            .finally(() => {
-            if (!cancelled) {
-                setHistoryLoading(false);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    useEffect(() => {
-        let cancelled = false;
-        setExperienceLoading(true);
-        setExperienceError(null);
-        void client
-            .listExperiences({ limit: 100 })
-            .then((response) => {
-            if (!cancelled) {
-                setExperienceRecords(response.experiences);
-                writeHubCache("experience-records", response.experiences);
-                setSelectedExperienceId((current) => current ?? response.experiences[0]?.id ?? null);
-            }
-        })
-            .catch((error) => {
-            if (!cancelled) {
-                setExperienceError(error instanceof Error
-                    ? error.message
-                    : "Failed to load experiences.");
-            }
-        })
-            .finally(() => {
-            if (!cancelled) {
-                setExperienceLoading(false);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    useEffect(() => {
-        let cancelled = false;
-        void client
-            .getRelationshipsActivity(50)
-            .then((response) => {
-            if (!cancelled) {
-                const activity = response.activity ?? [];
-                setRelationshipActivity(activity);
-                writeHubCache("relationship-activity", activity);
-            }
-        })
-            .catch((error) => {
-            if (!cancelled) {
-                setRelationshipActivityError(error instanceof Error
-                    ? error.message
-                    : "Failed to load relationship activity.");
-            }
-        })
-            .finally(() => {
-            if (!cancelled) {
-                setRelationshipActivityLoading(false);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    useEffect(() => {
-        let cancelled = false;
-        void client
-            .listKnowledgeDocuments({ limit: 100 })
-            .then((response) => {
-            if (cancelled)
-                return;
-            const docs = response.documents ?? [];
-            setKnowledgeDocuments(docs);
-            writeHubCache("knowledge-docs", docs);
-        })
-            .catch(() => {
-            /* ignored — KnowledgeView shows its own error when active */
-        })
-            .finally(() => {
-            if (!cancelled) {
-                setKnowledgeLoading(false);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    useEffect(() => {
-        let cancelled = false;
-        void client
-            .fetch("/api/skills/curated")
-            .then((data) => {
-            if (cancelled)
-                return;
-            const filtered = (data.skills ?? []).filter((skill) => skill.source !== "human");
-            setLearnedSkills(filtered);
-            writeHubCache("learned-skills", filtered);
-        })
-            .catch(() => {
-            if (!cancelled) {
-                setLearnedSkills([]);
-            }
-        })
-            .finally(() => {
-            if (!cancelled) {
-                setLearnedSkillsLoading(false);
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    useEffect(() => {
-        let cancelled = false;
-        void client
-            .listKnowledgeDocuments({ limit: 100 })
-            .then((response) => {
-            if (!cancelled) {
-                setKnowledgeDocuments(response.documents);
-                setSelectedKnowledgeDocumentId((current) => current ?? response.documents[0]?.id ?? null);
-            }
-        })
-            .catch(() => {
-            // The embedded knowledge view owns the richer error UI.
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    const customKnowledgeDocuments = useMemo(() => knowledgeDocuments.filter((document) => !isDefaultKnowledgeDocument(document)), [knowledgeDocuments]);
-    const overviewWidgets = useMemo(() => {
-        const styleItems = Object.values(d.style ?? {}).reduce((count, values) => count + (Array.isArray(values) ? values.length : 0), 0);
-        const exampleCount = normalizedMessageExamples.length;
-        const recentHistory = [...historyEntries]
-            .sort((left, right) => latestTimestamp(right.timestamp) - latestTimestamp(left.timestamp))
-            .slice(0, 3);
-        const activeSkills = learnedSkills.filter((skill) => skill.status !== "disabled");
-        const recentDocs = [...customKnowledgeDocuments]
-            .sort((left, right) => latestTimestamp(right.createdAt) - latestTimestamp(left.createdAt))
-            .slice(0, 3);
-        const recentExperience = [...experienceRecords].sort((left, right) => latestTimestamp(right.updatedAt ?? right.createdAt) -
-            latestTimestamp(left.updatedAt ?? left.createdAt))[0];
-        const recentRelationshipActivity = [...relationshipActivity]
-            .filter((item) => item.type !== "relationship")
-            .sort((left, right) => latestTimestamp(right.timestamp) - latestTimestamp(left.timestamp))
-            .slice(0, 5);
-        const personalityHasHistory = recentHistory.length > 0;
-        const trimmedBio = bioText.trim();
-        const personalityHasContent = personalityHasHistory ||
-            trimmedBio.length > 0 ||
-            styleItems > 0 ||
-            exampleCount > 0;
-        const personalityBody = personalityHasHistory ? (_jsx("ul", { className: "flex flex-col divide-y divide-border/10 text-xs text-muted", children: recentHistory.map((entry, index) => {
-                const fields = entry.fieldsChanged ?? [];
-                const headField = fields[0];
-                const extraCount = Math.max(fields.length - 1, 0);
-                const actor = entry.source === "agent"
-                    ? d.name?.trim() || "agent"
-                    : entry.source === "restore"
-                        ? "system"
-                        : "you";
-                const fieldLabel = headField
-                    ? extraCount > 0
-                        ? `${headField} +${extraCount} more`
-                        : headField
-                    : (entry.summary?.trim() ?? "personality");
-                return (_jsxs("li", { className: "flex min-w-0 items-baseline gap-2 py-1.5 first:pt-0 last:pb-0", children: [_jsxs("span", { className: "shrink-0 rounded-full border border-border/40 bg-bg-muted/30 px-1.5 py-0.5 text-2xs font-medium text-muted", children: ["@", actor] }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-muted", children: ["edited ", _jsx("span", { className: "text-txt", children: fieldLabel })] }), _jsx("span", { className: "shrink-0 text-2xs text-muted/70", children: formatRelativeTime(entry.timestamp) })] }, entry.id ?? `history-${index}`));
-            }) })) : trimmedBio ? (_jsx("p", { className: "line-clamp-3 text-xs leading-relaxed text-muted", children: trimmedBio })) : (_jsxs("div", { className: "flex flex-wrap gap-1.5 text-2xs", children: [styleItems > 0 ? (_jsxs("span", { className: "rounded-full border border-border/30 bg-bg-muted/30 px-2 py-0.5 text-muted", children: [styleItems, " style rule", styleItems === 1 ? "" : "s"] })) : null, exampleCount > 0 ? (_jsxs("span", { className: "rounded-full border border-border/30 bg-bg-muted/30 px-2 py-0.5 text-muted", children: [exampleCount, " example", exampleCount === 1 ? "" : "s"] })) : null] }));
-        function parseConnectorsFromDetail(detail) {
-            if (!detail)
-                return [];
-            const match = detail.match(/identity on ([^·]+?)(?:\s+·|$)/i);
-            if (!match)
-                return [];
-            return match[1]
-                .split(/[, ]+/)
-                .map((value) => value.trim())
-                .filter(Boolean);
-        }
-        function shortenConnectorLabel(value) {
-            const lower = value.toLowerCase();
-            if (lower === "client_chat")
-                return "chat";
-            if (lower === "telegram")
-                return "tg";
-            return lower;
-        }
-        function ConnectorBadge({ connector }) {
-            const Brand = getBrandIcon(connector);
-            const label = shortenConnectorLabel(connector);
-            const Icon = Brand ?? (connector === "client_chat" ? MessageCircle : null);
-            if (Icon) {
-                return (_jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted/80", title: label, role: "img", "aria-label": label, children: _jsx(Icon, { className: "h-3.5 w-3.5" }) }));
-            }
-            return (_jsx("span", { className: "rounded-full border border-border/30 bg-bg-muted/20 px-1.5 py-0.5 text-2xs lowercase text-muted/80", title: label, children: label }));
-        }
-        const emptyHint = (text) => (_jsx("p", { className: "text-xs leading-relaxed text-muted", children: text }));
-        return [
-            {
-                section: "personality",
-                title: "Personality",
-                meta: null,
-                body: personalityHasContent
-                    ? personalityBody
-                    : emptyHint("Bio, voice, and how I show up. Tell me who I am — I'll keep this in mind every conversation."),
-                isLoading: historyLoading && !personalityHasContent,
-                isEmpty: !personalityHasContent,
-            },
-            {
-                section: "relationships",
-                title: "Relationships",
-                meta: null,
-                body: recentRelationshipActivity.length > 0 ? (_jsx("ul", { className: "flex flex-col divide-y divide-border/10 text-xs text-muted", children: recentRelationshipActivity.map((item) => {
-                        const connectors = parseConnectorsFromDetail(item.detail);
-                        const memoryText = item.type === "fact"
-                            ? item.summary?.trim() || item.detail?.trim() || "fact"
-                            : item.type === "identity"
-                                ? "joined"
-                                : item.summary?.trim() || item.type;
-                        return (_jsxs("li", { className: "flex min-w-0 items-center gap-2 py-1.5 first:pt-0 last:pb-0", children: [_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1", children: [_jsxs("span", { className: "rounded-full border border-border/40 bg-bg-muted/30 px-1.5 py-0.5 text-2xs font-medium text-muted", children: ["@", item.personName?.trim() || "unknown"] }), connectors.map((connector) => (_jsx(ConnectorBadge, { connector: connector }, connector)))] }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: memoryText }), _jsx("span", { className: "shrink-0 text-2xs text-muted/70", children: formatRelativeTime(item.timestamp) })] }, [
-                            item.personId,
-                            item.personName,
-                            item.type,
-                            item.timestamp ?? "no-time",
-                            item.summary,
-                            item.detail ?? "",
-                        ].join(":")));
-                    }) })) : (emptyHint("People I know — names, facts, preferences. Builds up as we talk.")),
-                isLoading: relationshipActivityLoading &&
-                    recentRelationshipActivity.length === 0,
-                isEmpty: recentRelationshipActivity.length === 0,
-            },
-            {
-                section: "knowledge",
-                title: "Knowledge",
-                meta: customKnowledgeDocuments.length > 0
-                    ? `${customKnowledgeDocuments.length} doc${customKnowledgeDocuments.length === 1 ? "" : "s"}`
-                    : null,
-                body: recentDocs.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1 text-xs text-muted", children: recentDocs.map((doc) => (_jsx("li", { className: "truncate", children: doc.filename }, doc.id))) })) : knowledgeDocuments.length > 0 ? (emptyHint("Just the default knowledge so far. Upload notes, docs, or links to teach me what matters.")) : (emptyHint("Things I should read and remember. Upload notes, docs, or links.")),
-                isLoading: knowledgeLoading && knowledgeDocuments.length === 0,
-                isEmpty: knowledgeDocuments.length === 0,
-            },
-            {
-                section: "skills",
-                title: "Skills",
-                meta: activeSkills.length > 0 ? `${activeSkills.length} active` : null,
-                body: activeSkills.length > 0 ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [activeSkills.slice(0, 5).map((skill) => (_jsx("span", { className: "truncate rounded-full border border-border/30 bg-bg-muted/30 px-2 py-0.5 text-2xs text-muted", title: skill.name, children: skill.name }, skill.name))), activeSkills.length > 5 ? (_jsxs("span", { className: "text-2xs text-muted", children: ["+", activeSkills.length - 5, " more"] })) : null] })) : (emptyHint("Abilities I'll pick up over time. Browse the catalog or teach me by example.")),
-                isLoading: learnedSkillsLoading && activeSkills.length === 0,
-                isEmpty: activeSkills.length === 0,
-            },
-            {
-                section: "experience",
-                title: "Experience",
-                meta: experienceRecords.length > 0
-                    ? `${experienceRecords.length} lesson${experienceRecords.length === 1 ? "" : "s"}`
-                    : null,
-                body: recentExperience ? (_jsx("p", { className: "line-clamp-3 text-xs italic leading-relaxed text-muted", children: recentExperience.learning ||
-                        recentExperience.result ||
-                        recentExperience.context ||
-                        recentExperience.type })) : (emptyHint("Lessons from what worked and what didn't. I'll add these as we go.")),
-                isLoading: experienceLoading && experienceRecords.length === 0,
-                isEmpty: experienceRecords.length === 0,
-            },
-        ];
-    }, [
-        bioText,
-        customKnowledgeDocuments,
-        d.name,
-        d.style,
-        experienceLoading,
-        experienceRecords,
-        historyEntries,
-        historyLoading,
-        knowledgeDocuments.length,
-        knowledgeLoading,
-        learnedSkills,
-        learnedSkillsLoading,
-        normalizedMessageExamples.length,
-        relationshipActivity,
-        relationshipActivityLoading,
-    ]);
-    const hubExperienceRecords = useMemo(() => experienceRecords.map(mapExperienceRecordToHubRecord), [experienceRecords]);
-    const activeSectionLabel = getCharacterHubSectionLabel(activeSection);
-    const navigateToSection = useCallback((section) => {
-        setActiveSection(section);
-        if (section === "knowledge") {
-            if (tab !== "knowledge") {
-                setTab("knowledge");
-            }
-            else {
-                updateCharacterSectionPath(section);
-            }
-            return;
-        }
-        updateCharacterSectionPath(section);
-    }, [setTab, tab]);
-    const handleOverviewOpenSection = (section) => {
-        navigateToSection(section);
-    };
-    const handleSaveExperience = async (experience, draft) => {
-        setSavingExperienceId(experience.id);
-        try {
-            const response = await client.updateExperience(experience.id, {
-                learning: draft.learning,
-                importance: draft.importance,
-                confidence: draft.confidence,
-                tags: draft.tags
-                    .split(",")
-                    .map((tag) => tag.trim())
-                    .filter(Boolean),
-            });
-            setExperienceRecords((current) => current.map((item) => item.id === experience.id ? response.experience : item));
-        }
-        finally {
-            setSavingExperienceId(null);
-        }
-    };
-    const handleDeleteExperience = async (experience) => {
-        setDeletingExperienceId(experience.id);
-        try {
-            await client.deleteExperience(experience.id);
-            setExperienceRecords((current) => current.filter((item) => item.id !== experience.id));
-            setSelectedExperienceId((current) => current === experience.id ? null : current);
-        }
-        finally {
-            setDeletingExperienceId(null);
-        }
-    };
-    const handleAutoSavedExamplesEdit = useCallback((field, value) => {
-        applyFieldEdit(field, value);
-        if (field === "messageExamples" || field === "postExamples") {
-            scheduleAutoSave({ [field]: value });
-        }
-    }, [applyFieldEdit, scheduleAutoSave]);
-    const buildStylePatch = useCallback((key, items) => ({
-        style: {
-            ...(d.style ?? {}),
-            [key]: items,
-        },
-    }), [d.style]);
-    const handleAutoAddStyleEntry = useCallback((key) => {
-        const styleKey = key;
-        const value = pendingStyleEntries[key]?.trim();
-        if (!value)
-            return;
-        const currentItems = [...(d.style?.[styleKey] ?? [])];
-        const nextItems = currentItems.includes(value)
-            ? currentItems
-            : [...currentItems, value];
-        applyStyleEdit(styleKey, nextItems.join("\n"));
-        handlePendingStyleEntryChange(key, "");
-        scheduleAutoSave(buildStylePatch(styleKey, nextItems));
-    }, [
-        applyStyleEdit,
-        buildStylePatch,
-        d.style,
-        handlePendingStyleEntryChange,
-        pendingStyleEntries,
-        scheduleAutoSave,
-    ]);
-    const handleAutoRemoveStyleEntry = useCallback((key, index) => {
-        const styleKey = key;
-        const nextItems = [...(d.style?.[styleKey] ?? [])];
-        nextItems.splice(index, 1);
-        applyStyleEdit(styleKey, nextItems.join("\n"));
-        scheduleAutoSave(buildStylePatch(styleKey, nextItems));
-    }, [applyStyleEdit, buildStylePatch, d.style, scheduleAutoSave]);
-    const handleAutoCommitStyleEntry = useCallback((key, index) => {
-        const styleKey = key;
-        const nextValue = styleEntryDrafts[key]?.[index]?.trim() ?? "";
-        const nextItems = [...(d.style?.[styleKey] ?? [])];
-        if (!nextValue) {
-            nextItems.splice(index, 1);
-        }
-        else {
-            nextItems[index] = nextValue;
-        }
-        applyStyleEdit(styleKey, nextItems.join("\n"));
-        scheduleAutoSave(buildStylePatch(styleKey, nextItems));
-    }, [
-        applyStyleEdit,
-        buildStylePatch,
-        d.style,
-        scheduleAutoSave,
-        styleEntryDrafts,
-    ]);
-    const handleAutoReorderStyleEntries = useCallback((key, items) => {
-        const styleKey = key;
-        applyStyleEdit(styleKey, items.join("\n"));
-        scheduleAutoSave(buildStylePatch(styleKey, items));
-    }, [applyStyleEdit, buildStylePatch, scheduleAutoSave]);
-    const handleManualSave = useCallback(async () => {
-        await flushPendingAutoSave();
-        try {
-            await onSave();
-        }
-        catch {
-            // handleSaveCharacter already populates the visible error state
-        }
-    }, [flushPendingAutoSave, onSave]);
-    const sectionNav = (_jsx(SidebarPanel, { className: "min-h-0 gap-2 bg-transparent p-0 shadow-none", children: _jsx("nav", { className: "flex flex-col gap-0", "aria-label": t("character.characterHubSections"), children: CHARACTER_HUB_SECTIONS.map((section) => (() => {
-                const meta = CHARACTER_SECTION_META[section];
-                const Icon = meta.icon;
-                const active = activeSection === section;
-                return (_jsxs(SidebarContent.Item, { active: active, onClick: () => navigateToSection(section), "aria-current": active ? "page" : undefined, className: "items-center gap-2 rounded-none px-5 py-2", children: [_jsx(SidebarContent.ItemIcon, { active: active, className: `mt-0 h-8 w-8 bg-transparent p-0 group-hover:bg-transparent ${active ? "text-accent" : "text-muted"}`, children: _jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx(SidebarContent.ItemBody, { children: _jsx(SidebarContent.ItemTitle, { className: `truncate text-sm leading-5 ${active ? "font-semibold" : "font-medium"}`, children: getCharacterHubSectionLabel(section) }) })] }, section));
-            })()) }) }));
-    const renderSection = () => {
-        if (activeSection === "overview") {
-            return (_jsx(CharacterOverviewSection, { characterName: d.name, widgets: overviewWidgets, onOpenSection: handleOverviewOpenSection }));
-        }
-        if (activeSection === "personality") {
-            return (_jsxs("div", { className: "flex min-w-0 flex-col gap-8", children: [_jsxs("section", { className: "rounded-2xl border border-border/40 bg-bg/70 px-4 py-4", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h2", { className: "text-lg font-semibold text-txt", children: "Personality" }), _jsx("p", { className: "text-sm text-muted", children: "Save your bio manually. Style rules and examples autosave as you edit them." })] }), _jsx(CharacterIdentityPanel, { bioText: bioText, handleFieldEdit: handleFieldEdit, t: t }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-border/30 pt-4", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [characterSaveSuccess ? (_jsx("span", { className: "rounded-sm border border-status-success/20 bg-status-success-bg px-2 py-1 text-2xs font-semibold text-status-success", children: characterSaveSuccess })) : null, characterSaveError ? (_jsx("span", { className: "rounded-sm border border-status-danger/20 bg-status-danger-bg px-2 py-1 text-2xs font-medium text-status-danger", children: characterSaveError })) : null] }), _jsx(Button, { type: "button", className: "h-9 rounded-sm px-4 text-sm font-semibold tracking-[0.02em]", disabled: characterSaving || !hasPendingChanges, onClick: () => {
-                                            void handleManualSave();
-                                        }, children: characterSaving
-                                            ? t("charactereditor.Saving", { defaultValue: "saving..." })
-                                            : t("common.save", { defaultValue: "Save" }) })] })] }), _jsx(CharacterStylePanel, { d: d, pendingStyleEntries: pendingStyleEntries, styleEntryDrafts: styleEntryDrafts, handlePendingStyleEntryChange: handlePendingStyleEntryChange, handleAddStyleEntry: handleAutoAddStyleEntry, handleRemoveStyleEntry: handleAutoRemoveStyleEntry, handleStyleEntryDraftChange: handleStyleEntryDraftChange, handleCommitStyleEntry: handleAutoCommitStyleEntry, handleReorderStyleEntries: handleAutoReorderStyleEntries, t: t }), _jsx("section", { className: "rounded-2xl border border-border/40 bg-bg/70 px-4 py-4", children: _jsx(CharacterExamplesPanel, { d: d, normalizedMessageExamples: normalizedMessageExamples, handleFieldEdit: handleAutoSavedExamplesEdit, t: t }) })] }));
-        }
-        if (activeSection === "knowledge") {
-            return (_jsx("section", { className: "rounded-2xl border border-border/40 bg-bg/70 p-0", children: _jsx(KnowledgeView, { embedded: true, fileInputId: "character-hub-knowledge-upload", onDocumentsChange: (docs) => {
-                        setKnowledgeDocuments(docs);
-                        writeHubCache("knowledge-docs", docs);
-                        setKnowledgeLoading(false);
-                    }, onSelectedDocumentIdChange: setSelectedKnowledgeDocumentId, selectedDocumentId: selectedKnowledgeDocumentId, showSelectorRail: false }) }));
-        }
-        if (activeSection === "skills") {
-            return _jsx(CharacterLearnedSkillsSection, {});
-        }
-        if (activeSection === "experience") {
-            return (_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [experienceError ? (_jsx("div", { className: "rounded-xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: experienceError })) : null, experienceLoading ? (_jsx("div", { className: "text-sm text-muted", children: "Loading experiences\u2026" })) : (_jsx(CharacterExperienceWorkspace, { experiences: hubExperienceRecords, selectedExperienceId: selectedExperienceId, onSelectExperience: setSelectedExperienceId, onSaveExperience: (experience, draft) => {
-                            const source = experienceRecords.find((item) => item.id === experience.id);
-                            if (!source)
-                                return;
-                            void handleSaveExperience(source, draft);
-                        }, onDeleteExperience: (experience) => {
-                            const source = experienceRecords.find((item) => item.id === experience.id);
-                            if (!source)
-                                return;
-                            void handleDeleteExperience(source);
-                        }, savingExperienceId: savingExperienceId, deletingExperienceId: deletingExperienceId }))] }));
-        }
-        return (_jsxs(CharacterRelationshipsSection, { summary: "See the full relationships viewer, including extracted facts, relevant memories, and user-scoped preferences.", children: [relationshipActivityError ? (_jsx("div", { className: "border-b border-danger/20 bg-danger/10 px-4 py-3 text-sm text-danger", children: relationshipActivityError })) : null, _jsx("div", { className: "min-h-[40rem]", children: _jsx(RelationshipsWorkspaceView, { embedded: true, onViewMemories: () => {
-                            setTab("memories");
-                        } }) })] }));
-    };
-    return (_jsx(PageLayout, { className: "h-full", contentPadding: false, contentInnerClassName: "flex w-full min-h-0 flex-1 flex-col px-4 py-4 sm:px-5 sm:py-5 lg:px-6", sidebar: _jsx(AppPageSidebar, { testId: "character-editor-sidebar", collapsible: true, contentIdentity: "character-hub", children: _jsx(SidebarScrollRegion, { className: "scrollbar-hide !px-0 pb-3 pt-0 [scrollbar-width:none] [scrollbar-gutter:auto] supports-[scrollbar-gutter:stable]:[scrollbar-gutter:auto] [&::-webkit-scrollbar]:hidden", children: sectionNav }) }), mobileSidebarLabel: activeSectionLabel, "data-testid": "character-editor-view", children: _jsxs("div", { ref: contentScrollRef, className: "custom-scrollbar flex min-h-0 flex-1 min-w-0 flex-col overflow-y-auto overflow-x-hidden", children: [_jsx(WidgetHost, { slot: "character", className: "mb-4" }), renderSection()] }) }));
-}