@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.3

package/components/character/CharacterHubView.js

@@ -1,23 +1,24 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { client } from "../../api/client.js";
+import { useRenderGuard } from "../../hooks/useRenderGuard.js";
+import { WorkspaceLayout } from "../../layouts/workspace-layout/workspace-layout.js";
 import { getWindowNavigationPath, shouldUseHashNavigation, } from "../../navigation/index.js";
-import { useApp } from "../../state/useApp.js";
+import { useAppSelectorShallow } from "../../state/index.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 { Button } from "../ui/button.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";
+import { getCharacterHubSectionLabel, mapExperienceRecordToHubRecord, } from "./character-hub-helpers.js";
+import { useCharacterHubData } from "./useCharacterHubData.js";
 const CHARACTER_SECTION_PATHS = {
     overview: "/character",
     personality: "/character/personality",
@@ -26,26 +27,6 @@ const CHARACTER_SECTION_PATHS = {
     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"))
@@ -100,80 +81,36 @@ function latestTimestamp(value) {
     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);
+export function CharacterHubView({ initialSection, d, bioText, normalizedMessageExamples, pendingStyleEntries, styleEntryDrafts, handleFieldEdit, applyFieldEdit, handlePendingStyleEntryChange, applyStyleEdit, handleStyleEntryDraftChange, characterSaving, characterSaveSuccess, characterSaveError, hasPendingChanges, onSave, }) {
+    useRenderGuard("CharacterHubView");
+    const { setActionNotice, setTab, tab, t } = useAppSelectorShallow((s) => ({
+        setActionNotice: s.setActionNotice,
+        setTab: s.setTab,
+        tab: s.tab,
+        t: s.t,
+    }));
+    const [activeSection, setActiveSection] = useState(() => initialSection ?? getSectionFromLocation(tab));
+    const hubData = useCharacterHubData();
+    const documentRecords = hubData.documents.data;
+    const documentsLoading = hubData.documents.loading;
+    const historyEntries = hubData.history.data;
+    const historyLoading = hubData.history.loading;
+    const relationshipActivity = hubData.relationshipActivity.data;
+    const relationshipActivityLoading = hubData.relationshipActivity.loading;
+    const relationshipActivityError = hubData.relationshipActivity.error
+        ? hubData.relationshipActivity.error.message
+        : null;
+    const learnedSkills = hubData.learnedSkills.data;
+    const learnedSkillsLoading = hubData.learnedSkills.loading;
+    const experienceRecords = hubData.experiences.data;
+    const experienceLoading = hubData.experiences.loading;
+    const experienceError = hubData.experiences.error
+        ? hubData.experiences.error.message
+        : null;
+    const setDocumentRecords = hubData.documents.mutate;
+    const setExperienceRecords = hubData.experiences.mutate;
     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);
@@ -214,9 +151,15 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
         };
     }, [flushPendingAutoSave]);
     useEffect(() => {
+        if (initialSection) {
+            setActiveSection(initialSection);
+            return;
+        }
         setActiveSection(getSectionFromLocation(tab));
-    }, [tab]);
+    }, [initialSection, tab]);
     useEffect(() => {
+        if (initialSection)
+            return;
         const syncSectionFromLocation = () => {
             setActiveSection(getSectionFromLocation(tab));
         };
@@ -226,258 +169,74 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
             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;
-        };
-    }, []);
+    }, [initialSection, tab]);
+    // Seed `selectedExperienceId` / `selectedDocumentId` from the first loaded
+    // record once data lands. The hook owns the fetch; this just mirrors the
+    // pre-refactor "first record wins" default.
     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;
-        };
-    }, []);
+        if (experienceRecords.length === 0)
+            return;
+        setSelectedExperienceId((current) => current ?? experienceRecords[0]?.id ?? null);
+    }, [experienceRecords]);
     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;
-        };
-    }, []);
+        if (documentRecords.length === 0)
+            return;
+        setSelectedDocumentId((current) => current ?? documentRecords[0]?.id ?? null);
+    }, [documentRecords]);
     const customDocumentRecords = useMemo(() => documentRecords.filter((document) => !isDefaultDocumentRecord(document)), [documentRecords]);
+    // Stable identity: DocumentsView's loadData effect depends on this callback,
+    // so an inline closure would re-trigger fetch → setState → render → new
+    // closure, looping the hub (render-guard trips on /character/documents).
+    // `setDocumentRecords` is the hook's mutate fn — it flips state to
+    // "success" so the loading flag derived from it also goes false.
+    const handleDocumentsChange = useCallback((docs) => {
+        setDocumentRecords(docs);
+    }, [setDocumentRecords]);
     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]
+        // Unique people the agent knows (drop edge-only "relationship" rows).
+        const peopleNames = Array.from(new Set(relationshipActivity
             .filter((item) => item.type !== "relationship")
-            .sort((left, right) => latestTimestamp(right.timestamp) - latestTimestamp(left.timestamp))
-            .slice(0, 5);
-        const personalityHasHistory = recentHistory.length > 0;
+            .map((item) => item.personName?.trim())
+            .filter((name) => Boolean(name))));
         const trimmedBio = bioText.trim();
-        const personalityHasContent = personalityHasHistory ||
+        const personalityHasContent = historyEntries.length > 0 ||
             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 StatChip({ children }) {
+            return (_jsx("span", { className: "rounded-full border border-border/40 bg-bg/60 px-2.5 py-1 text-xs font-medium text-muted", children: children }));
         }
-        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 }));
+        /** Clean person chip: avatar initial + name + optional platform badge. */
+        function PersonChip({ name }) {
+            const Brand = getBrandIcon(name);
+            return (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full border border-border/40 bg-bg/70 py-1 pl-1 pr-2.5 text-xs font-medium text-txt", children: [_jsx("span", { className: "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent/15 text-2xs font-semibold uppercase text-accent", children: name.slice(0, 1) }), _jsx("span", { className: "truncate", children: name }), Brand ? (_jsx(Brand, { className: "h-3 w-3 shrink-0 text-muted/70", "aria-hidden": true })) : null] }));
         }
-        const emptyHint = (text) => (_jsx("p", { className: "text-xs leading-relaxed text-muted", children: text }));
+        const personalityBody = personalityHasContent ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [styleItems > 0 ? (_jsxs(StatChip, { children: [styleItems, " style rule", styleItems === 1 ? "" : "s"] })) : null, exampleCount > 0 ? (_jsxs(StatChip, { children: [exampleCount, " example", exampleCount === 1 ? "" : "s"] })) : null, styleItems === 0 && exampleCount === 0 && trimmedBio ? (_jsx(StatChip, { children: "bio set" })) : null] })) : (_jsx("span", { className: "text-xs text-muted", children: "Tap to define voice + bio" }));
+        const relationshipsBody = peopleNames.length > 0 ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [peopleNames.slice(0, 4).map((name) => (_jsx(PersonChip, { name: name }, name))), peopleNames.length > 4 ? (_jsxs(StatChip, { children: ["+", peopleNames.length - 4] })) : null] })) : (_jsx("span", { className: "text-xs text-muted", children: "Builds up as we talk" }));
+        const skillsBody = activeSkills.length > 0 ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [activeSkills.slice(0, 4).map((skill) => (_jsx(StatChip, { children: skill.name }, skill.name))), activeSkills.length > 4 ? (_jsxs(StatChip, { children: ["+", activeSkills.length - 4] })) : null] })) : (_jsx("span", { className: "text-xs text-muted", children: "Learned over time" }));
         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."),
+                meta: styleItems > 0 ? `${styleItems} rules` : null,
+                body: personalityBody,
                 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,
+                meta: peopleNames.length > 0
+                    ? `${peopleNames.length} ${peopleNames.length === 1 ? "person" : "people"}`
+                    : null,
+                body: relationshipsBody,
+                isLoading: relationshipActivityLoading && peopleNames.length === 0,
+                isEmpty: peopleNames.length === 0,
             },
             {
                 section: "documents",
@@ -485,15 +244,15 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
                 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.")),
+                body: customDocumentRecords.length > 0 ? (_jsxs("span", { className: "text-xs text-muted", children: [customDocumentRecords.length, " custom document", customDocumentRecords.length === 1 ? "" : "s"] })) : (_jsx("span", { className: "text-xs text-muted", children: "Upload notes, docs, links" })),
                 isLoading: documentsLoading && documentRecords.length === 0,
-                isEmpty: documentRecords.length === 0,
+                isEmpty: customDocumentRecords.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.")),
+                body: skillsBody,
                 isLoading: learnedSkillsLoading && activeSkills.length === 0,
                 isEmpty: activeSkills.length === 0,
             },
@@ -503,10 +262,10 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
                 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 ||
+                body: recentExperience ? (_jsx("span", { className: "line-clamp-2 text-xs italic 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.")),
+                        recentExperience.type })) : (_jsx("span", { className: "text-xs text-muted", children: "Lessons added as we go" })),
                 isLoading: experienceLoading && experienceRecords.length === 0,
                 isEmpty: experienceRecords.length === 0,
             },
@@ -514,11 +273,10 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
     }, [
         bioText,
         customDocumentRecords,
-        d.name,
         d.style,
         experienceLoading,
         experienceRecords,
-        historyEntries,
+        historyEntries.length,
         historyLoading,
         documentRecords.length,
         documentsLoading,
@@ -532,6 +290,8 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
     const activeSectionLabel = getCharacterHubSectionLabel(activeSection);
     const navigateToSection = useCallback((section) => {
         setActiveSection(section);
+        if (initialSection)
+            return;
         if (section === "documents") {
             if (tab !== "documents") {
                 setTab("documents");
@@ -542,7 +302,7 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
             return;
         }
         updateCharacterSectionPath(section);
-    }, [setTab, tab]);
+    }, [initialSection, setTab, tab]);
     const handleOverviewOpenSection = (section) => {
         navigateToSection(section);
     };
@@ -647,35 +407,25 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
             // 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: () => {
+            return (_jsxs("div", { className: "flex min-w-0 flex-col gap-6", children: [_jsxs("section", { className: "rounded-sm border border-border/40 bg-bg/70 px-4 py-4", children: [_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 }) })] }));
+                                            : 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-sm 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 }));
+            return (_jsx(DocumentsView, { embedded: true, fileInputId: "character-hub-documents-upload", onDocumentsChange: handleDocumentsChange, 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) => {
+            return (_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [experienceError ? (_jsx("div", { className: "rounded-sm 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;
@@ -687,9 +437,10 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
                             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: () => {
+        return (_jsxs("section", { className: "flex min-w-0 flex-col gap-3", 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()] }) }));
+    const isSubPage = activeSection !== "overview";
+    return (_jsx(WorkspaceLayout, { 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", "data-testid": "character-editor-view", children: _jsxs("div", { ref: contentScrollRef, className: "custom-scrollbar mx-auto flex min-h-0 w-full min-w-0 max-w-6xl flex-1 flex-col overflow-y-auto overflow-x-hidden pb-32", children: [_jsx(WidgetHost, { slot: "character", className: "mb-4" }), isSubPage ? (_jsxs("div", { className: "mb-5 flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: () => navigateToSection("overview"), className: "inline-flex items-center gap-1.5 rounded-full border border-border/50 bg-card/50 py-1.5 pl-2 pr-3.5 text-sm font-medium text-muted transition-colors hover:border-accent/40 hover:text-txt   ", "aria-label": "Back to Character hub", children: [_jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true }), "Character"] }), _jsx("span", { className: "text-lg font-semibold text-txt", children: activeSectionLabel })] })) : null, renderSection()] }) }));
 }

package/components/character/CharacterLearnedSkillsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CharacterLearnedSkillsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterLearnedSkillsSection.tsx"],"names":[],"mappings":"AAkCA,wBAAgB,6BAA6B,4CAwI5C"}
+{"version":3,"file":"CharacterLearnedSkillsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterLearnedSkillsSection.tsx"],"names":[],"mappings":"AAyCA,wBAAgB,6BAA6B,4CAoI5C"}