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

package/components/character/CharacterEditorPanels.js

@@ -10,7 +10,7 @@ const PlusIconSvg = ({ className }) => (_jsx("svg", { width: "10", height: "10",
 const TrashIconSvg = ({ className }) => (_jsx("svg", { width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: className, children: _jsx("path", { d: "M1.75 2.75h7.5M4 2.75V1.75h3v1M2.75 2.75l.4 6.75h4.7l.4-6.75" }) }));
 /* ── Small grip icon shown as drag affordance ───────────────────── */
 const GripIconSvg = ({ className }) => (_jsxs("svg", { width: "10", height: "14", viewBox: "0 0 10 14", fill: "currentColor", "aria-hidden": "true", className: className, children: [_jsx("circle", { cx: "3", cy: "3", r: "1" }), _jsx("circle", { cx: "3", cy: "7", r: "1" }), _jsx("circle", { cx: "3", cy: "11", r: "1" }), _jsx("circle", { cx: "7", cy: "3", r: "1" }), _jsx("circle", { cx: "7", cy: "7", r: "1" }), _jsx("circle", { cx: "7", cy: "11", r: "1" })] }));
-const compactIconBtn = "inline-flex h-7 w-7 items-center justify-center rounded-sm border border-border/35 text-muted transition-colors hover:border-border/70 hover:bg-bg-muted/70 hover:text-txt focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent";
+const compactIconBtn = "inline-flex h-7 w-7 items-center justify-center rounded-sm border border-border/35 text-muted transition-colors hover:border-border/70 hover:bg-bg-muted/70 hover:text-txt    disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:bg-transparent";
 /* ── Style section constants ─────────────────────────────────────── */
 const STYLE_SECTION_KEYS = ["all"];
 const STYLE_SECTION_PLACEHOLDERS = {
@@ -51,7 +51,7 @@ export function CharacterIdentityPanel({ bioText, handleFieldEdit, t, }) {
     });
     return (_jsx("div", { className: "flex flex-col gap-5", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted", children: t("charactereditor.AboutMe", { defaultValue: "About Me" }) }), _jsx(Textarea, { ref: bioRef, value: bioText, rows: 8, placeholder: t("charactereditor.AboutMePlaceholder", {
                         defaultValue: "Describe who your agent is...",
-                    }), onChange: (e) => handleFieldEdit("bio", e.target.value), className: "w-full resize-none min-h-[8rem] overflow-x-hidden rounded-none border-0 border-b border-border/40 bg-transparent px-0 py-2 font-mono text-xs leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0", ...bioAgentProps })] }) }));
+                    }), onChange: (e) => handleFieldEdit("bio", e.target.value), className: "w-full resize-none min-h-[8rem] overflow-x-hidden rounded-none border-0 border-b border-border/40 bg-transparent px-0 py-2 font-mono text-xs leading-relaxed text-txt  ", ...bioAgentProps })] }) }));
 }
 /* ── CharacterStylePanel ─────────────────────────────────────────── */
 function StyleRuleRow({ sectionKey, index, value, isDuplicate, isDragging, draftValue, onDragStart, onDragOver, onDrop, onDragEnd, onDraftChange, onCommit, onRemove, t, }) {
@@ -77,11 +77,9 @@ function StyleRuleRow({ sectionKey, index, value, isDuplicate, isDragging, draft
     });
     return (_jsxs("fieldset", { draggable: true, onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, className: `group flex min-w-0 items-center gap-2 px-0 py-1 transition-opacity ${isDuplicate ? "" : ""} ${isDragging ? "opacity-40" : ""}`, children: [_jsx("span", { className: "shrink-0 text-muted opacity-60 cursor-grab active:cursor-grabbing select-none", "aria-hidden": "true", title: t("charactereditor.DragToReorder", {
                     defaultValue: "Drag to reorder",
-                }), children: _jsx(GripIconSvg, {}) }), _jsx(Input, { ref: inputRef, value: value, onChange: (e) => onDraftChange(e.target.value), onBlur: onCommit, "aria-label": ruleLabel, className: `h-8 min-w-0 flex-1 rounded-none border-0 border-b bg-transparent px-0 text-sm text-txt focus-visible:ring-0 ${isDuplicate
-                    ? "border-warning/60 focus-visible:border-warning"
-                    : "border-border/30 focus-visible:border-accent/60"}`, ...inputAgentProps }), isDuplicate ? (_jsx("span", { className: "shrink-0 rounded-sm bg-warning/15 px-1.5 py-0.5 text-[0.68rem] font-medium text-warning", children: t("charactereditor.DuplicateRule", {
+                }), children: _jsx(GripIconSvg, {}) }), _jsx(Input, { ref: inputRef, value: value, onChange: (e) => onDraftChange(e.target.value), onBlur: onCommit, "aria-label": ruleLabel, className: `h-8 min-w-0 flex-1 rounded-none border-0 border-b bg-transparent px-0 text-sm text-txt  ${isDuplicate ? "border-warning/60 " : "border-border/30 "}`, ...inputAgentProps }), isDuplicate ? (_jsx("span", { className: "shrink-0 rounded-sm bg-warning/15 px-1.5 py-0.5 text-[0.68rem] font-medium text-warning", children: t("charactereditor.DuplicateRule", {
                     defaultValue: "duplicate",
-                }) })) : null, _jsx(Button, { ref: removeRef, type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm p-0 text-muted opacity-0 transition-colors hover:text-danger group-hover:opacity-100 focus-visible:opacity-100", onClick: onRemove, title: t("common.remove"), "aria-label": `${t("common.remove")} ${ruleLabel}`, ...removeAgentProps, children: _jsx(TrashIconSvg, {}) })] }));
+                }) })) : null, _jsx(Button, { ref: removeRef, type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm p-0 text-muted opacity-0 transition-colors hover:text-danger group-hover:opacity-100 ", onClick: onRemove, title: t("common.remove"), "aria-label": `${t("common.remove")} ${ruleLabel}`, ...removeAgentProps, children: _jsx(TrashIconSvg, {}) })] }));
 }
 function StyleAddRow({ sectionKey, pendingValue, onChange, onAdd, t, }) {
     const placeholder = t(STYLE_SECTION_PLACEHOLDERS[sectionKey].key, {
@@ -112,7 +110,7 @@ function StyleAddRow({ sectionKey, pendingValue, onChange, onAdd, t, }) {
                         e.preventDefault();
                         onAdd();
                     }
-                }, className: "h-9 min-w-0 flex-1 rounded-sm border border-border/40 bg-bg/70 px-3 text-sm text-txt outline-none focus:border-accent", ...inputAgentProps }), _jsxs("button", { ref: addRef, type: "button", className: "inline-flex h-9 shrink-0 items-center gap-2 rounded-sm border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent", onClick: onAdd, disabled: !pendingValue.trim(), title: addLabel, "aria-label": addLabel, ...addAgentProps, children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddStyleRuleShort", {
+                }, className: "h-9 min-w-0 flex-1 rounded-sm border border-border/40 bg-bg/70 px-3 text-sm text-txt outline-none ", ...inputAgentProps }), _jsxs("button", { ref: addRef, type: "button", className: "inline-flex h-9 shrink-0 items-center gap-2 rounded-sm border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10    disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent", onClick: onAdd, disabled: !pendingValue.trim(), title: addLabel, "aria-label": addLabel, ...addAgentProps, children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddStyleRuleShort", {
                         defaultValue: "Add rule",
                     })] })] }));
 }
@@ -179,7 +177,7 @@ function ConversationTurnTextarea({ ci, mi, isUser, value, onChange, }) {
         getValue: () => value,
         onFill: onChange,
     });
-    return (_jsx(Textarea, { ref: ref, value: value, rows: 2, "aria-label": label, onChange: (e) => onChange(e.target.value), className: "min-h-[3rem] w-full resize-none rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0", ...agentProps }));
+    return (_jsx(Textarea, { ref: ref, value: value, rows: 2, "aria-label": label, onChange: (e) => onChange(e.target.value), className: "min-h-[3rem] w-full resize-none rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt  ", ...agentProps }));
 }
 function ConversationFooter({ ci, onAddTurn, onRemove, t, }) {
     const addTurnLabel = t("charactereditor.AddTurn", {
@@ -201,7 +199,7 @@ function ConversationFooter({ ci, onAddTurn, onRemove, t, }) {
         description: `Remove conversation ${ci + 1}`,
         onActivate: onRemove,
     });
-    return (_jsxs("div", { className: "mt-1 flex items-center justify-end gap-2", children: [_jsxs("button", { ref: addTurnRef, type: "button", className: "inline-flex h-8 items-center gap-2 rounded-sm border border-border/40 px-2.5 text-xs font-medium text-txt transition-colors hover:bg-bg-muted/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: onAddTurn, title: addTurnLabel, "aria-label": addTurnLabel, ...addTurnAgentProps, children: [_jsx(PlusIconSvg, {}), addTurnLabel] }), _jsx("button", { ref: removeRef, type: "button", className: compactIconBtn, onClick: onRemove, title: t("charactereditor.RemoveExample", {
+    return (_jsxs("div", { className: "mt-1 flex items-center justify-end gap-2", children: [_jsxs("button", { ref: addTurnRef, type: "button", className: "inline-flex h-8 items-center gap-2 rounded-sm border border-border/40 px-2.5 text-xs font-medium text-txt transition-colors hover:bg-bg-muted/70   ", onClick: onAddTurn, title: addTurnLabel, "aria-label": addTurnLabel, ...addTurnAgentProps, children: [_jsx(PlusIconSvg, {}), addTurnLabel] }), _jsx("button", { ref: removeRef, type: "button", className: compactIconBtn, onClick: onRemove, title: t("charactereditor.RemoveExample", {
                     defaultValue: "Remove conversation",
                 }), "aria-label": `${t("common.remove")} conversation ${ci + 1}`, ...removeAgentProps, children: _jsx(TrashIconSvg, {}) })] }));
 }
@@ -232,7 +230,7 @@ function PostExampleRow({ pi, post, isDuplicate, isDragging, onDragStart, onDrag
                                         defaultValue: "Post",
                                     }), " ", "#", pi + 1] }), isDuplicate ? (_jsx("span", { className: "rounded-sm bg-warning/15 px-1.5 py-0.5 text-[0.68rem] font-medium text-warning", children: t("charactereditor.DuplicatePost", {
                                     defaultValue: "duplicate",
-                                }) })) : null] }), _jsx(Textarea, { ref: textRef, value: post, rows: 3, "aria-label": postLabel, onChange: (e) => onChange(e.target.value), className: "min-h-[4.25rem] w-full resize-none rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0", ...textAgentProps })] }), _jsx("div", { className: "flex shrink-0 flex-col gap-1", children: _jsx(Button, { ref: removeRef, type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm border border-border/35 p-0 text-muted transition-colors hover:border-danger/45 hover:bg-danger/10 hover:text-danger", onClick: onRemove, "aria-label": `${t("common.remove")} post ${pi + 1}`, title: t("charactereditor.RemovePost", {
+                                }) })) : null] }), _jsx(Textarea, { ref: textRef, value: post, rows: 3, "aria-label": postLabel, onChange: (e) => onChange(e.target.value), className: "min-h-[4.25rem] w-full resize-none rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt  ", ...textAgentProps })] }), _jsx("div", { className: "flex shrink-0 flex-col gap-1", children: _jsx(Button, { ref: removeRef, type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm border border-border/35 p-0 text-muted transition-colors hover:border-danger/45 hover:bg-danger/10 hover:text-danger", onClick: onRemove, "aria-label": `${t("common.remove")} post ${pi + 1}`, title: t("charactereditor.RemovePost", {
                         defaultValue: "Remove post",
                     }), ...removeAgentProps, children: _jsx(TrashIconSvg, {}) }) })] }));
 }
@@ -319,7 +317,7 @@ export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFie
                                             handleFieldEdit("messageExamples", updated);
                                         }, t: t })] }, `convo-${ci}`))), normalizedMessageExamples.length === 0 && (_jsx("div", { className: "rounded-sm border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t("charactereditor.NoChatExamples", {
                                     defaultValue: "No chat examples yet.",
-                                }) }))] }), _jsxs("button", { ref: addConversationRef, type: "button", className: "inline-flex h-9 self-start items-center gap-2 rounded-sm border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: addConversation, title: addConversationLabel, "aria-label": addConversationLabel, ...addConversationAgentProps, children: [_jsx(PlusIconSvg, {}), addConversationLabel] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-xs font-medium text-muted", children: t("charactereditor.PostExamples", {
+                                }) }))] }), _jsxs("button", { ref: addConversationRef, type: "button", className: "inline-flex h-9 self-start items-center gap-2 rounded-sm border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10   ", onClick: addConversation, title: addConversationLabel, "aria-label": addConversationLabel, ...addConversationAgentProps, children: [_jsx(PlusIconSvg, {}), addConversationLabel] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-xs font-medium text-muted", children: t("charactereditor.PostExamples", {
                                             defaultValue: "Post Examples",
                                         }) }), _jsx("p", { className: "mt-1 text-xs text-muted", children: t("charactereditor.PostExamplesHelp", {
                                             defaultValue: "Standalone post examples for social channels.",
@@ -357,5 +355,5 @@ export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFie
                                     }, t: t }, `post-${pi}`));
                             }), postExamples.length === 0 && (_jsx("div", { className: "rounded-sm border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t("charactereditor.NoPostExamples", {
                                     defaultValue: "No post examples yet.",
-                                }) })), _jsxs("button", { ref: addPostRef, type: "button", className: "mt-1 inline-flex h-9 self-start items-center gap-2 rounded-sm border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: addPost, title: addPostLabel, "aria-label": addPostLabel, ...addPostAgentProps, children: [_jsx(PlusIconSvg, {}), addPostLabel] })] })] })] }));
+                                }) })), _jsxs("button", { ref: addPostRef, type: "button", className: "mt-1 inline-flex h-9 self-start items-center gap-2 rounded-sm border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10   ", onClick: addPost, title: addPostLabel, "aria-label": addPostLabel, ...addPostAgentProps, children: [_jsx(PlusIconSvg, {}), addPostLabel] })] })] })] }));
 }

package/components/character/CharacterExperienceWorkspace.d.ts

@@ -1,4 +1,4 @@
-import type { CharacterExperienceDraft, CharacterExperienceRecord } from "./character-hub-types";
+import type { CharacterExperienceDraft, CharacterExperienceRecord } from "./character-hub-types.js";
 export declare function CharacterExperienceWorkspace({ experiences, selectedExperienceId, onSelectExperience, onSaveExperience, onDeleteExperience, savingExperienceId, deletingExperienceId, }: {
     experiences: CharacterExperienceRecord[];
     selectedExperienceId: string | null;

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

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

package/components/character/CharacterExperienceWorkspace.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { useTranslation } from "../../state/TranslationContext.hooks.js";
 import { Button } from "../ui/button.js";
@@ -231,7 +231,7 @@ function ExperienceGraphNode({ experience, position, selected, connected, onSele
         description: "Select this experience from the knowledge graph",
         onActivate: () => onSelectExperience(experience.id),
     });
-    return (_jsx("button", { ref: ref, type: "button", "aria-label": `Select experience: ${nodeLabel}`, "data-testid": `experience-graph-node-${experience.id}`, className: "absolute -translate-x-1/2 -translate-y-1/2 rounded-full outline-none transition duration-200 hover:scale-125 focus-visible:ring-2 focus-visible:ring-accent", style: {
+    return (_jsx("button", { ref: ref, type: "button", "aria-label": `Select experience: ${nodeLabel}`, "data-testid": `experience-graph-node-${experience.id}`, className: "absolute -translate-x-1/2 -translate-y-1/2 rounded-full outline-none transition duration-200 hover:scale-125  ", style: {
             left: `${position.x}%`,
             top: `${position.y}%`,
             width: `${size}rem`,
@@ -247,11 +247,11 @@ function ExperienceGraphNode({ experience, position, selected, connected, onSele
                 outlineOffset: "2px",
             } }) }));
 }
-function ExperienceGraphPanel({ experiences, selectedExperienceId, onSelectExperience, }) {
-    const graphExperiences = experiences.slice(0, 24);
-    const links = buildLocalGraphLinks(graphExperiences);
-    const positions = buildGraphPositions(graphExperiences);
-    const connectedIds = new Set(links.flatMap((link) => [link.sourceId, link.targetId]));
+const ExperienceGraphPanel = memo(function ExperienceGraphPanel({ experiences, selectedExperienceId, onSelectExperience, }) {
+    const graphExperiences = useMemo(() => experiences.slice(0, 24), [experiences]);
+    const links = useMemo(() => buildLocalGraphLinks(graphExperiences), [graphExperiences]);
+    const positions = useMemo(() => buildGraphPositions(graphExperiences), [graphExperiences]);
+    const connectedIds = useMemo(() => new Set(links.flatMap((link) => [link.sourceId, link.targetId])), [links]);
     return (_jsxs("div", { "data-testid": "experience-graph-panel", className: "relative h-[24rem] overflow-hidden rounded-sm bg-bg-muted/20", children: [_jsx("div", { className: "pointer-events-none absolute inset-0 opacity-60 [background-image:linear-gradient(var(--border)_1px,transparent_1px),linear-gradient(90deg,var(--border)_1px,transparent_1px)] [background-size:34px_34px] [background-blend-mode:normal] [opacity:0.25]" }), _jsx("svg", { "aria-hidden": "true", className: "absolute inset-0 h-full w-full", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: links.map((link) => {
                     const source = positions.get(link.sourceId);
                     const target = positions.get(link.targetId);
@@ -259,8 +259,8 @@ function ExperienceGraphPanel({ experiences, selectedExperienceId, onSelectExper
                         return null;
                     return (_jsx("path", { d: graphPath(source, target), fill: "none", stroke: graphLinkColor(link.type), strokeDasharray: link.type === "supersedes" ? "3 3" : undefined, strokeLinecap: "round", strokeWidth: Math.max(0.22, link.strength * 0.8), vectorEffect: "non-scaling-stroke" }, `${link.sourceId}-${link.targetId}-${link.type}`));
                 }) }), graphExperiences.map((experience) => (_jsx(ExperienceGraphNode, { experience: experience, position: positions.get(experience.id) ?? { x: 50, y: 50 }, selected: experience.id === selectedExperienceId, connected: connectedIds.has(experience.id), onSelectExperience: onSelectExperience }, experience.id)))] }));
-}
-function ExperienceQueueRow({ experience, isSelected, onSelect, }) {
+});
+const ExperienceQueueRow = memo(function ExperienceQueueRow({ experience, isSelected, onSelect, }) {
     const title = experience.learning || experience.result || experience.context;
     const reviewReasons = [
         clampScore(experience.importance) >= 0.75 ? "high importance" : null,
@@ -279,7 +279,7 @@ function ExperienceQueueRow({ experience, isSelected, onSelect, }) {
         onActivate: () => onSelect(experience.id),
     });
     return (_jsxs("button", { ref: ref, type: "button", "data-testid": `experience-row-${experience.id}`, className: `flex min-w-0 flex-col items-start gap-2 border-b border-border/15 px-4 py-4 text-left transition-colors hover:bg-bg-muted/20 ${isSelected ? "bg-bg-muted/25" : ""}`, onClick: () => onSelect(experience.id), ...agentProps, children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(OutcomeDot, { outcome: experience.outcome, review: needsReview(experience) }), _jsx("h4", { className: "line-clamp-2 text-sm font-semibold text-txt", children: title })] }), _jsxs("div", { className: "grid w-full grid-cols-2 gap-2 text-xs text-muted", children: [_jsxs("span", { children: ["Importance ", formatPercent(experience.importance)] }), _jsxs("span", { children: ["Confidence ", formatPercent(experience.confidence)] })] }), _jsx("p", { className: "line-clamp-2 text-sm text-muted-strong", children: experience.context }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 text-xs text-muted", children: [_jsx("span", { children: experience.type }), experience.domain ? _jsxs("span", { children: ["\u00B7 ", experience.domain] }) : null, _jsxs("span", { children: ["\u00B7 ", formatTimestamp(experience.createdAt)] }), reviewReasons.length > 0 ? (_jsxs("span", { children: ["\u00B7 ", reviewReasons.join(", ")] })) : null] })] }));
-}
+});
 function RelatedExperienceButton({ experience, onSelect, }) {
     const title = experience.learning || experience.result || experience.context;
     const { ref, agentProps } = useAgentElement({

package/components/character/CharacterHubView.d.ts

@@ -1,7 +1,9 @@
 import type { MessageExampleGroup } from "@elizaos/core";
-import type { CharacterData } from "../../api/client-types";
+import type { CharacterData } from "../../api/client-types.js";
+import { type CharacterHubSection } from "./character-hub-helpers.js";
 type CharacterStyleSection = "all" | "chat" | "post";
-export declare function CharacterHubView({ d, bioText, normalizedMessageExamples, pendingStyleEntries, styleEntryDrafts, handleFieldEdit, applyFieldEdit, handlePendingStyleEntryChange, applyStyleEdit, handleStyleEntryDraftChange, characterSaving, characterSaveSuccess, characterSaveError, hasPendingChanges, onSave, }: {
+export declare function CharacterHubView({ initialSection, d, bioText, normalizedMessageExamples, pendingStyleEntries, styleEntryDrafts, handleFieldEdit, applyFieldEdit, handlePendingStyleEntryChange, applyStyleEdit, handleStyleEntryDraftChange, characterSaving, characterSaveSuccess, characterSaveError, hasPendingChanges, onSave, }: {
+    initialSection?: CharacterHubSection;
     d: CharacterData;
     bioText: string;
     normalizedMessageExamples: MessageExampleGroup[];

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

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

package/components/character/CharacterHubView.js

@@ -5,7 +5,7 @@ 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";
@@ -18,6 +18,7 @@ import { CharacterExperienceWorkspace } from "./CharacterExperienceWorkspace.js"
 import { CharacterLearnedSkillsSection } from "./CharacterLearnedSkillsSection.js";
 import { CharacterOverviewSection, } from "./CharacterOverviewSection.js";
 import { getCharacterHubSectionLabel, mapExperienceRecordToHubRecord, } from "./character-hub-helpers.js";
+import { useCharacterHubData } from "./useCharacterHubData.js";
 const CHARACTER_SECTION_PATHS = {
     overview: "/character",
     personality: "/character/personality",
@@ -80,53 +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 */
-    }
-}
-export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendingStyleEntries, styleEntryDrafts, handleFieldEdit, applyFieldEdit, handlePendingStyleEntryChange, applyStyleEdit, handleStyleEntryDraftChange, characterSaving, characterSaveSuccess, characterSaveError, hasPendingChanges, onSave, }) {
+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 } = useApp();
-    const [activeSection, setActiveSection] = useState(() => getSectionFromLocation(tab));
-    const [documentRecords, setDocumentRecords] = useState(() => readHubCache("documents", []));
-    const [documentsLoading, setDocumentsLoading] = useState(true);
+    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);
@@ -167,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));
         };
@@ -179,165 +169,29 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
             window.removeEventListener("popstate", syncSectionFromLocation);
             window.removeEventListener("hashchange", syncSectionFromLocation);
         };
-    }, [tab]);
+    }, [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;
-        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;
-        };
-    }, []);
+        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);
-        writeHubCache("documents", docs);
-        setDocumentsLoading(false);
-    }, []);
+    }, [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;
@@ -355,12 +209,12 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
             styleItems > 0 ||
             exampleCount > 0;
         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 backdrop-blur-sm", children: 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 }));
         }
         /** 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 backdrop-blur-sm", 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] }));
+            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 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" }));
@@ -436,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");
@@ -446,7 +302,7 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
             return;
         }
         updateCharacterSectionPath(section);
-    }, [setTab, tab]);
+    }, [initialSection, setTab, tab]);
     const handleOverviewOpenSection = (section) => {
         navigateToSection(section);
     };
@@ -586,5 +442,5 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
                         } }) })] }));
     };
     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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50", "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()] }) }));
+    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/CharacterOverviewSection.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { CharacterHubSection } from "./character-hub-helpers";
+import type { CharacterHubSection } from "./character-hub-helpers.js";
 type OverviewSection = Exclude<CharacterHubSection, "overview">;
 export interface CharacterOverviewWidget {
     /** Section the tile links to. */

package/components/character/CharacterOverviewSection.js

@@ -12,7 +12,7 @@ function HubTile({ onOpenSection, size, widget, }) {
     const medallionSize = size === "hero" ? "h-16 w-16" : "h-14 w-14";
     const iconSize = size === "hero" ? "h-8 w-8" : "h-7 w-7";
     const titleSize = size === "hero" ? "text-xl" : "text-lg";
-    return (_jsxs("button", { type: "button", onClick: () => onOpenSection(widget.section), className: "group relative flex h-full w-full min-h-[8rem] min-w-0 flex-col overflow-hidden rounded-2xl bg-card/60 p-4 text-left transition-colors hover:bg-accent/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 sm:min-h-[12rem] sm:p-5", "aria-label": `Open ${widget.title}`, children: [_jsxs("div", { className: "relative flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: `inline-flex ${medallionSize} shrink-0 items-center justify-center rounded-2xl bg-accent/10 text-accent transition-transform group-hover:scale-105`, children: _jsx(Icon, { className: iconSize, "aria-hidden": true }) }), widget.meta ? (_jsx("span", { className: "shrink-0 text-xs font-medium text-muted", children: widget.meta })) : null] }), _jsx("h3", { className: `truncate font-semibold text-txt ${titleSize}`, children: widget.title })] }), widget.body ? (_jsx("div", { className: "relative mt-3 flex min-h-0 flex-col sm:mt-auto sm:pt-4", children: widget.body })) : null] }));
+    return (_jsxs("button", { type: "button", onClick: () => onOpenSection(widget.section), className: "group relative flex h-full w-full min-h-[8rem] min-w-0 flex-col overflow-hidden rounded-2xl bg-card/60 p-4 text-left transition-colors hover:bg-accent/5    sm:min-h-[12rem] sm:p-5", "aria-label": `Open ${widget.title}`, children: [_jsxs("div", { className: "relative flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: `inline-flex ${medallionSize} shrink-0 items-center justify-center rounded-2xl bg-accent/10 text-accent transition-transform group-hover:scale-105`, children: _jsx(Icon, { className: iconSize, "aria-hidden": true }) }), widget.meta ? (_jsx("span", { className: "shrink-0 text-xs font-medium text-muted", children: widget.meta })) : null] }), _jsx("h3", { className: `truncate font-semibold text-txt ${titleSize}`, children: widget.title })] }), widget.body ? (_jsx("div", { className: "relative mt-3 flex min-h-0 flex-col sm:mt-auto sm:pt-4", children: widget.body })) : null] }));
 }
 export function CharacterOverviewSection({ onOpenSection, widgets, }) {
     const order = [

package/components/character/CharacterPersonalityTimeline.d.ts

@@ -1,4 +1,4 @@
-import type { CharacterPersonalityHistoryItem } from "./character-hub-types";
+import type { CharacterPersonalityHistoryItem } from "./character-hub-types.js";
 export declare function CharacterPersonalityTimeline({ entries, }: {
     entries: CharacterPersonalityHistoryItem[];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"CharacterRoster.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterRoster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AASnD,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAIF,UAAU,oBAAoB;IAC5B,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,4FAA4F;IAC5F,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,UAAU,EACV,QAAQ,EACR,OAAkB,EAClB,YAA0B,GAC3B,EAAE,oBAAoB,2CAgJtB"}
+{"version":3,"file":"CharacterRoster.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterRoster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AASnD,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAIF,UAAU,oBAAoB;IAC5B,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,4FAA4F;IAC5F,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,UAAU,EACV,QAAQ,EACR,OAAkB,EAClB,YAA0B,GAC3B,EAAE,oBAAoB,2CAuItB"}

package/components/character/CharacterRoster.helpers.d.ts

@@ -1,5 +1,5 @@
 import type { StylePreset } from "@elizaos/shared";
-import type { CharacterRosterEntry } from "./CharacterRoster";
+import type { CharacterRosterEntry } from "./CharacterRoster.js";
 export declare const SLANT_CLIP = "polygon(32px 0, 100% 0, calc(100% - 32px) 100%, 0 100%)";
 export declare const INSET_CLIP = "polygon(0px 0, 100% 0, calc(100% - 4px) 100%, -8px 100%)";
 export declare function resolveRosterEntries(styles: readonly StylePreset[]): CharacterRosterEntry[];

package/components/character/CharacterRoster.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { getVrmPreviewUrl } from "../../state/vrm.js";
 import { Button } from "../ui/button.js";
 import { INSET_CLIP, SLANT_CLIP } from "./CharacterRoster.helpers.js";
 export function CharacterRoster({ entries, selectedId, onSelect, variant = "editor", testIdPrefix = "character", }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const useWhiteBorders = variant === "first-run";
     const [loadedImages, setLoadedImages] = useState({});
     useEffect(() => {
@@ -40,7 +40,6 @@ export function CharacterRoster({ entries, selectedId, onSelect, variant = "edit
                         ...(isSelected
                             ? {
                                 background: "linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, white 10%) 0%, var(--accent) 100%)",
-                                boxShadow: "0 0 16px rgba(var(--accent-rgb, 240, 185, 11), 0.16)",
                             }
                             : {}),
                     }, children: _jsxs("div", { className: "relative h-full w-full overflow-hidden", style: { clipPath: SLANT_CLIP }, children: [isSelected && (_jsx("div", { className: "pointer-events-none absolute -inset-3 bg-[rgba(var(--accent-rgb,240,185,11),0.15)] blur-xl", style: { clipPath: SLANT_CLIP } })), !imageLoaded && (_jsx("div", { "aria-hidden": "true", className: "absolute inset-0 animate-pulse bg-[linear-gradient(110deg,rgba(255,255,255,0.08)_8%,rgba(255,255,255,0.18)_18%,rgba(255,255,255,0.08)_33%)] bg-[length:200%_100%]" })), _jsx("img", { src: entry.previewUrl ??
@@ -55,13 +54,6 @@ export function CharacterRoster({ entries, selectedId, onSelect, variant = "edit
                                         : "text-white"}${isSelected ? (useWhiteBorders ? " bg-[rgba(7,11,15,0.9)]" : " bg-black/[0.82]") : useWhiteBorders ? " bg-[rgba(7,11,15,0.8)]" : " bg-black/[0.72]"}`, style: {
                                         clipPath: INSET_CLIP,
                                         textShadow: "0 2px 10px rgba(3,5,10,0.72)",
-                                        ...(isSelected
-                                            ? {
-                                                boxShadow: useWhiteBorders
-                                                    ? "inset 0 1px 0 rgba(255,255,255,0.22)"
-                                                    : "inset 0 1px 0 rgba(255,255,255,0.1)",
-                                            }
-                                            : {}),
                                     }, children: entry.name }) })] }) }) }, entry.id));
         }) }));
 }