@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/character/CharacterHubView.js

@@ -0,0 +1,695 @@
+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.js";
+import { getWindowNavigationPath, shouldUseHashNavigation, } from "../../navigation/index.js";
+import { useApp } from "../../state/useApp.js";
+// Direct sub-path import to avoid the widgets/index.ts ↔ WidgetHost.tsx
+// chunk-level circular dependency.
+import { WidgetHost } from "../../widgets/WidgetHost.js";
+import { getBrandIcon } from "../conversations/brand-icons.js";
+import { DocumentsView } from "../pages/DocumentsView.js";
+import { RelationshipsWorkspaceView } from "../pages/relationships/RelationshipsWorkspaceView.js";
+import { AppPageSidebar } from "../shared/AppPageSidebar.js";
+import { CharacterExamplesPanel, CharacterIdentityPanel, CharacterStylePanel, } from "./CharacterEditorPanels.js";
+import { CharacterExperienceWorkspace } from "./CharacterExperienceWorkspace.js";
+import { CharacterLearnedSkillsSection } from "./CharacterLearnedSkillsSection.js";
+import { CharacterOverviewSection, } from "./CharacterOverviewSection.js";
+import { CharacterRelationshipsSection } from "./CharacterRelationshipsSection.js";
+import { CHARACTER_HUB_SECTIONS, getCharacterHubSectionLabel, mapExperienceRecordToHubRecord, } from "./character-hub-helpers.js";
+const CHARACTER_SECTION_PATHS = {
+    overview: "/character",
+    personality: "/character/personality",
+    documents: "/character/documents",
+    skills: "/character/skills",
+    experience: "/character/experience",
+    relationships: "/character/relationships",
+};
+const CHARACTER_SECTION_META = {
+    overview: {
+        icon: LayoutDashboard,
+    },
+    personality: {
+        icon: PencilLine,
+    },
+    documents: {
+        icon: BookOpen,
+    },
+    skills: {
+        icon: Sparkles,
+    },
+    experience: {
+        icon: Brain,
+    },
+    relationships: {
+        icon: Network,
+    },
+};
+function getSectionFromLocation(tab) {
+    const pathname = getWindowNavigationPath().toLowerCase();
+    if (pathname.endsWith("/personality"))
+        return "personality";
+    if (pathname.endsWith("/documents"))
+        return "documents";
+    if (pathname.endsWith("/skills"))
+        return "skills";
+    if (pathname.endsWith("/experience"))
+        return "experience";
+    if (pathname.endsWith("/relationships"))
+        return "relationships";
+    if (tab === "documents")
+        return "documents";
+    return "overview";
+}
+function updateCharacterSectionPath(section, mode = "push") {
+    if (typeof window === "undefined")
+        return;
+    const path = CHARACTER_SECTION_PATHS[section];
+    if (!path || getWindowNavigationPath() === path)
+        return;
+    if (shouldUseHashNavigation()) {
+        window.location.hash = path;
+        return;
+    }
+    window.history[mode === "replace" ? "replaceState" : "pushState"](null, "", path);
+}
+const DEFAULT_DOCUMENT_FILENAMES = new Set([
+    "eliza-overview.txt",
+    "eliza-history.txt",
+    "eliza-cloud-basics.txt",
+]);
+function isDefaultDocumentRecord(document) {
+    const normalizedFilename = document.filename.trim().toLowerCase();
+    return (document.source === "bundled" ||
+        document.source === "character" ||
+        document.provenance.kind === "bundled" ||
+        document.provenance.kind === "character" ||
+        DEFAULT_DOCUMENT_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 [documentRecords, setDocumentRecords] = useState(() => readHubCache("documents", []));
+    const [documentsLoading, setDocumentsLoading] = useState(true);
+    const [selectedDocumentId, setSelectedDocumentId] = 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 syncSectionFromLocation = () => {
+            setActiveSection(getSectionFromLocation(tab));
+        };
+        window.addEventListener("popstate", syncSectionFromLocation);
+        window.addEventListener("hashchange", syncSectionFromLocation);
+        return () => {
+            window.removeEventListener("popstate", syncSectionFromLocation);
+            window.removeEventListener("hashchange", syncSectionFromLocation);
+        };
+    }, [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
+            .listDocuments({ limit: 100 })
+            .then((response) => {
+            if (cancelled)
+                return;
+            const docs = response.documents ?? [];
+            setDocumentRecords(docs);
+            writeHubCache("documents", docs);
+        })
+            .catch(() => {
+            /* ignored — DocumentsView shows its own error when active */
+        })
+            .finally(() => {
+            if (!cancelled) {
+                setDocumentsLoading(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
+            .listDocuments({ limit: 100 })
+            .then((response) => {
+            if (!cancelled) {
+                setDocumentRecords(response.documents);
+                setSelectedDocumentId((current) => current ?? response.documents[0]?.id ?? null);
+            }
+        })
+            .catch(() => {
+            // The embedded documents view owns the richer error UI.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const customDocumentRecords = useMemo(() => documentRecords.filter((document) => !isDefaultDocumentRecord(document)), [documentRecords]);
+    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 = [...customDocumentRecords]
+            .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: "documents",
+                title: "Knowledge",
+                meta: customDocumentRecords.length > 0
+                    ? `${customDocumentRecords.length} doc${customDocumentRecords.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))) })) : documentRecords.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: documentsLoading && documentRecords.length === 0,
+                isEmpty: documentRecords.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,
+        customDocumentRecords,
+        d.name,
+        d.style,
+        experienceLoading,
+        experienceRecords,
+        historyEntries,
+        historyLoading,
+        documentRecords.length,
+        documentsLoading,
+        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 === "documents") {
+            if (tab !== "documents") {
+                setTab("documents");
+            }
+            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 === "documents") {
+            return (_jsx(DocumentsView, { embedded: true, fileInputId: "character-hub-documents-upload", onDocumentsChange: (docs) => {
+                    setDocumentRecords(docs);
+                    writeHubCache("documents", docs);
+                    setDocumentsLoading(false);
+                }, onSelectedDocumentIdChange: setSelectedDocumentId, selectedDocumentId: selectedDocumentId, 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()] }) }));
+}