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

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;AA2BzD,OAAO,KAAK,EACV,aAAa,EAKd,MAAM,wBAAwB,CAAC;AAgChC,KAAK,qBAAqB,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAmKrD,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,2CAg/BA"}
+{"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"}

package/components/character/CharacterHubView.js

@@ -1,8 +1,9 @@
-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";
 // Direct sub-path import to avoid the widgets/index.ts ↔ WidgetHost.tsx
@@ -11,13 +12,12 @@ 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";
 const CHARACTER_SECTION_PATHS = {
     overview: "/character",
     personality: "/character/personality",
@@ -26,26 +26,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"))
@@ -128,35 +108,8 @@ function writeHubCache(suffix, value) {
         /* 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, }) {
+    useRenderGuard("CharacterHubView");
     const { setActionNotice, setTab, tab, t } = useApp();
     const [activeSection, setActiveSection] = useState(() => getSectionFromLocation(tab));
     const [documentRecords, setDocumentRecords] = useState(() => readHubCache("documents", []));
@@ -377,107 +330,59 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
         };
     }, []);
     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).
+    const handleDocumentsChange = useCallback((docs) => {
+        setDocumentRecords(docs);
+        writeHubCache("documents", docs);
+        setDocumentsLoading(false);
+    }, []);
     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 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 }));
         }
-        function shortenConnectorLabel(value) {
-            const lower = value.toLowerCase();
-            if (lower === "client_chat")
-                return "chat";
-            if (lower === "telegram")
-                return "tg";
-            return lower;
+        /** 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] }));
         }
-        function ConnectorBadge({ connector }) {
-            const Brand = getBrandIcon(connector);
-            const label = shortenConnectorLabel(connector);
-            const Icon = Brand ?? (connector === "client_chat" ? MessageCircle : null);
-            if (Icon) {
-                return (_jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted/80", title: label, role: "img", "aria-label": label, children: _jsx(Icon, { className: "h-3.5 w-3.5" }) }));
-            }
-            return (_jsx("span", { className: "rounded-full border border-border/30 bg-bg-muted/20 px-1.5 py-0.5 text-2xs lowercase text-muted/80", title: label, children: label }));
-        }
-        const emptyHint = (text) => (_jsx("p", { className: "text-xs leading-relaxed text-muted", children: text }));
+        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 +390,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 +408,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 +419,10 @@ export function CharacterHubView({ d, bioText, normalizedMessageExamples, pendin
     }, [
         bioText,
         customDocumentRecords,
-        d.name,
         d.style,
         experienceLoading,
         experienceRecords,
-        historyEntries,
+        historyEntries.length,
         historyLoading,
         documentRecords.length,
         documentsLoading,
@@ -647,35 +551,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 +581,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 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()] }) }));
 }

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"}

package/components/character/CharacterLearnedSkillsSection.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Card, CardContent } from "@elizaos/ui";
-import { RefreshCw } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/client.js";
+import { useFetchData } from "../../hooks/index.js";
+import { useTranslation, } from "../../state/TranslationContext.hooks.js";
+import { Button } from "../ui/button.js";
 function formatScore(score) {
     if (score === undefined)
         return "—";
@@ -15,29 +17,20 @@ function formatDate(iso) {
     return new Date(ms).toLocaleString();
 }
 export function CharacterLearnedSkillsSection() {
-    const [skills, setSkills] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [errorMessage, setErrorMessage] = useState(null);
+    const { t } = useTranslation();
+    const [actionErrorMessage, setActionErrorMessage] = useState(null);
     const [busyName, setBusyName] = useState(null);
-    const refresh = useCallback(async () => {
-        setLoading(true);
-        setErrorMessage(null);
-        try {
-            const res = (await client.fetch("/api/skills/curated"));
-            const filtered = res.skills.filter((s) => s.source !== "human");
-            setSkills(filtered);
-        }
-        catch (err) {
-            setErrorMessage(err instanceof Error ? err.message : String(err));
-            setSkills([]);
-        }
-        finally {
-            setLoading(false);
-        }
+    const fetchState = useFetchData(async (signal) => {
+        const res = (await client.fetch("/api/skills/curated", {
+            signal,
+        }));
+        return res.skills.filter((s) => s.source !== "human");
     }, []);
-    useEffect(() => {
-        void refresh();
-    }, [refresh]);
+    const skills = fetchState.status === "success" ? fetchState.data : [];
+    const loading = fetchState.status === "loading";
+    const fetchErrorMessage = fetchState.status === "error" ? fetchState.error.message : null;
+    const errorMessage = actionErrorMessage ?? fetchErrorMessage;
+    const refresh = fetchState.refetch;
     const grouped = useMemo(() => {
         const proposed = skills.filter((s) => s.status === "proposed");
         const active = skills.filter((s) => s.status === "active");
@@ -46,16 +39,16 @@ export function CharacterLearnedSkillsSection() {
     }, [skills]);
     const performAction = useCallback(async (name, method, action) => {
         setBusyName(name);
-        setErrorMessage(null);
+        setActionErrorMessage(null);
         try {
             const path = action === "delete"
                 ? `/api/skills/curated/${encodeURIComponent(name)}`
                 : `/api/skills/curated/${encodeURIComponent(name)}/${action}`;
             await client.fetch(path, { method });
-            await refresh();
+            refresh();
         }
         catch (err) {
-            setErrorMessage(err instanceof Error ? err.message : String(err));
+            setActionErrorMessage(err instanceof Error ? err.message : String(err));
         }
         finally {
             setBusyName(null);
@@ -65,12 +58,52 @@ export function CharacterLearnedSkillsSection() {
         grouped.proposed.length === 0 &&
         grouped.active.length === 0 &&
         grouped.disabled.length === 0;
-    return (_jsxs("section", { className: "flex min-w-0 flex-col gap-4 rounded-2xl border border-border/40 bg-bg/70 px-4 py-4", "data-testid": "character-learned-skills-panel", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-lg font-semibold text-txt", children: "Skills" }), _jsx("div", { className: "mt-1 text-2xs text-muted", children: loading
-                                    ? "Loading"
-                                    : `${grouped.proposed.length} proposed · ${grouped.active.length} active · ${grouped.disabled.length} disabled` })] }), _jsx(Button, { variant: "outline", size: "icon", className: "h-8 w-8 rounded-lg", onClick: () => {
-                            void refresh();
-                        }, disabled: loading, "aria-label": "Refresh learned skills", title: "Refresh", children: _jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` }) })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [errorMessage ? (_jsx("div", { className: "rounded-xl border border-danger/40 bg-danger/10 px-3 py-2.5 text-xs-tight leading-5 text-danger", children: errorMessage })) : null, grouped.proposed.length > 0 ? (_jsx(SkillSection, { title: "Pending proposals", skills: grouped.proposed, busyName: busyName, onPromote: (name) => performAction(name, "POST", "promote"), onDelete: (name) => performAction(name, "DELETE", "delete") })) : null, grouped.active.length > 0 ? (_jsx(SkillSection, { title: "Active learned skills", skills: grouped.active, busyName: busyName, onDisable: (name) => performAction(name, "POST", "disable"), onDelete: (name) => performAction(name, "DELETE", "delete") })) : null, grouped.disabled.length > 0 ? (_jsx(SkillSection, { title: "Disabled", skills: grouped.disabled, busyName: busyName, onDelete: (name) => performAction(name, "DELETE", "delete") })) : null, isEmpty ? (_jsx("div", { className: "rounded-xl border border-dashed border-border/60 bg-bg-hover/40 px-3 py-3 text-xs-tight leading-5 text-muted", children: "I haven\u2019t picked up any abilities yet. Browse the catalog or add one by example, and I\u2019ll start using it." })) : null] })] }));
+    return (_jsxs("section", { className: "flex min-w-0 flex-col gap-4", "data-testid": "character-learned-skills-panel", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-lg font-semibold text-txt", children: t("learnedskills.title", { defaultValue: "Skills" }) }), _jsx("div", { className: "mt-1 text-2xs text-muted", children: loading
+                            ? t("learnedskills.loading", { defaultValue: "Loading" })
+                            : t("learnedskills.summary", {
+                                proposed: grouped.proposed.length,
+                                active: grouped.active.length,
+                                disabled: grouped.disabled.length,
+                                defaultValue: "{{proposed}} proposed · {{active}} active · {{disabled}} disabled",
+                            }) })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [errorMessage ? (_jsx("div", { className: "rounded-sm border border-danger/40 bg-danger/10 px-3 py-2.5 text-xs-tight leading-5 text-danger", children: errorMessage })) : null, grouped.proposed.length > 0 ? (_jsx(SkillSection, { title: t("learnedskills.pendingProposals", {
+                            defaultValue: "Pending proposals",
+                        }), skills: grouped.proposed, busyName: busyName, onPromote: (name) => performAction(name, "POST", "promote"), onDelete: (name) => performAction(name, "DELETE", "delete"), t: t })) : null, grouped.active.length > 0 ? (_jsx(SkillSection, { title: t("learnedskills.activeSkills", {
+                            defaultValue: "Active learned skills",
+                        }), skills: grouped.active, busyName: busyName, onDisable: (name) => performAction(name, "POST", "disable"), onDelete: (name) => performAction(name, "DELETE", "delete"), t: t })) : null, grouped.disabled.length > 0 ? (_jsx(SkillSection, { title: t("learnedskills.disabled", { defaultValue: "Disabled" }), skills: grouped.disabled, busyName: busyName, onDelete: (name) => performAction(name, "DELETE", "delete"), t: t })) : null, isEmpty ? (_jsx("div", { className: "rounded-sm border border-dashed border-border/60 bg-bg-hover/40 px-3 py-3 text-xs-tight leading-5 text-muted", children: t("learnedskills.empty", {
+                            defaultValue: "I haven’t picked up any abilities yet. Browse the catalog or add one by example, and I’ll start using it.",
+                        }) })) : null] })] }));
+}
+function slugifySkillName(name) {
+    return name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+function SkillActionButton({ skill, action, label, variant, disabled, onActivate, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `learned-skill-${action}-${slugifySkillName(skill)}`,
+        role: "button",
+        label: `${label} ${skill}`,
+        group: "learned-skills",
+        description: `${label} the ${skill} learned skill`,
+        onActivate,
+    });
+    return (_jsx(Button, { ref: ref, size: "sm", variant: variant, disabled: disabled, onClick: onActivate, ...agentProps, children: label }));
 }
-function SkillSection({ title, skills, busyName, onPromote, onDisable, onDelete, }) {
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-2xs font-semibold uppercase tracking-wide text-muted", children: title }), _jsx("ul", { className: "flex flex-col gap-2", children: skills.map((skill) => (_jsx("li", { children: _jsx(Card, { className: "border-border/50 bg-bg-hover/60 shadow-none", children: _jsx(CardContent, { className: "flex flex-col gap-2 px-3 py-3 text-xs-tight", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "font-mono text-sm font-semibold text-txt", children: skill.name }), _jsx("div", { className: "text-xs-tight text-muted", children: skill.description }), _jsxs("div", { className: "flex flex-wrap gap-x-2 gap-y-1 text-2xs uppercase tracking-wide text-muted", children: [_jsx("span", { children: skill.source }), _jsxs("span", { children: [skill.refinedCount, " refinements"] }), _jsxs("span", { children: [formatScore(skill.lastEvalScore), " score"] }), _jsx("span", { children: formatDate(skill.createdAt) })] }), skill.derivedFromTrajectory ? (_jsxs("div", { className: "text-2xs text-muted", children: ["Derived from trajectory:", " ", _jsxs("a", { href: `/trajectories/${skill.derivedFromTrajectory}`, className: "underline", children: [skill.derivedFromTrajectory.slice(0, 8), "\u2026"] })] })) : null] }), _jsxs("div", { className: "flex shrink-0 flex-col gap-1", children: [onPromote ? (_jsx(Button, { size: "sm", variant: "default", disabled: busyName === skill.name, onClick: () => onPromote(skill.name), children: "Promote" })) : null, onDisable ? (_jsx(Button, { size: "sm", variant: "outline", disabled: busyName === skill.name, onClick: () => onDisable(skill.name), children: "Disable" })) : null, _jsx(Button, { size: "sm", variant: "ghost", disabled: busyName === skill.name, onClick: () => onDelete(skill.name), children: "Delete" })] })] }) }) }) }, skill.name))) })] }));
+function SkillSection({ title, skills, busyName, onPromote, onDisable, onDelete, t, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-sm font-medium text-muted", children: title }), _jsx("ul", { className: "flex flex-col", children: skills.map((skill) => (_jsx("li", { className: "border-b border-border/15 py-3 last:border-b-0", children: _jsxs("div", { className: "flex items-start justify-between gap-3 text-xs-tight", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "font-mono text-sm font-semibold text-txt", children: skill.name }), _jsx("div", { className: "text-xs-tight text-muted", children: skill.description }), _jsxs("div", { className: "flex flex-wrap gap-x-2 gap-y-1 text-2xs text-muted", children: [_jsx("span", { children: skill.source }), _jsx("span", { children: t("learnedskills.refinements", {
+                                                    count: skill.refinedCount,
+                                                    defaultValue: "{{count}} refinements",
+                                                }) }), _jsx("span", { children: t("learnedskills.score", {
+                                                    score: formatScore(skill.lastEvalScore),
+                                                    defaultValue: "{{score}} score",
+                                                }) }), _jsx("span", { children: formatDate(skill.createdAt) })] }), skill.derivedFromTrajectory ? (_jsxs("div", { className: "text-2xs text-muted", children: [t("learnedskills.derivedFrom", {
+                                                defaultValue: "Derived from trajectory:",
+                                            }), " ", _jsxs("a", { href: `/trajectories/${skill.derivedFromTrajectory}`, className: "underline", children: [skill.derivedFromTrajectory.slice(0, 8), "\u2026"] })] })) : null] }), _jsxs("div", { className: "flex shrink-0 flex-col gap-1", children: [onPromote ? (_jsx(SkillActionButton, { skill: skill.name, action: "promote", label: t("learnedskills.promote", {
+                                            defaultValue: "Promote",
+                                        }), variant: "default", disabled: busyName === skill.name, onActivate: () => onPromote(skill.name) })) : null, onDisable ? (_jsx(SkillActionButton, { skill: skill.name, action: "disable", label: t("learnedskills.disable", {
+                                            defaultValue: "Disable",
+                                        }), variant: "outline", disabled: busyName === skill.name, onActivate: () => onDisable(skill.name) })) : null, _jsx(SkillActionButton, { skill: skill.name, action: "delete", label: t("learnedskills.delete", {
+                                            defaultValue: "Delete",
+                                        }), variant: "ghost", disabled: busyName === skill.name, onActivate: () => onDelete(skill.name) })] })] }) }, skill.name))) })] }));
 }

package/components/character/CharacterOverviewSection.d.ts

@@ -2,20 +2,17 @@ import type { ReactNode } from "react";
 import type { CharacterHubSection } from "./character-hub-helpers";
 type OverviewSection = Exclude<CharacterHubSection, "overview">;
 export interface CharacterOverviewWidget {
-    /** Section the widget links to. */
+    /** Section the tile links to. */
     section: OverviewSection;
-    /** Header title. */
+    /** Tile title. */
     title: string;
-    /** Optional small text on the right side of the header. */
+    /** One short stat/chip line (e.g. "3 docs", "12 skills"). Null when empty. */
     meta?: string | null;
-    /**
-     * Content rendered in the widget body. Should always be present so the widget
-     * shows useful copy even when there is no real data yet.
-     */
+    /** Optional small visual content (chips/avatars) rendered under the title. */
     body?: ReactNode | null;
-    /** True while the widget's data source is fetching for the first time. */
+    /** True while the tile's data source is fetching for the first time. */
     isLoading?: boolean;
-    /** True when no real content exists; widget still renders with hint copy. */
+    /** True when no real content exists yet. */
     isEmpty: boolean;
 }
 export declare function CharacterOverviewSection({ onOpenSection, widgets, }: {

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

@@ -1 +1 @@
-{"version":3,"file":"CharacterOverviewSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterOverviewSection.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,KAAK,eAAe,GAAG,OAAO,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AAEhE,MAAM,WAAW,uBAAuB;IACtC,mCAAmC;IACnC,OAAO,EAAE,eAAe,CAAC;IACzB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,OAAO,EAAE,OAAO,CAAC;CAClB;AA+ED,wBAAgB,wBAAwB,CAAC,EACvC,aAAa,EACb,OAAO,GACR,EAAE;IACD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,uBAAuB,EAAE,CAAC;CACpC,2CA0CA"}
+{"version":3,"file":"CharacterOverviewSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterOverviewSection.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,KAAK,eAAe,GAAG,OAAO,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AAEhE,MAAM,WAAW,uBAAuB;IACtC,iCAAiC;IACjC,OAAO,EAAE,eAAe,CAAC;IACzB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,OAAO,EAAE,OAAO,CAAC;CAClB;AA6DD,wBAAgB,wBAAwB,CAAC,EACvC,aAAa,EACb,OAAO,GACR,EAAE;IACD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,uBAAuB,EAAE,CAAC;CACpC,2CA4CA"}