@elizaos/ui 2.0.0-beta.2 → 2.0.11-beta.7

package/components/pages/relationships/RelationshipsWorkspaceView.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, PageLayout, PagePanel } from "@elizaos/ui";
-import { Filter, RefreshCw, Search, X } from "lucide-react";
-import { useCallback, useDeferredValue, useEffect, useRef, useState, } from "react";
+import { Filter, Network, Sparkles, UserRound } from "lucide-react";
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState, } from "react";
+import { useAgentElement } from "../../../agent-surface/index.js";
 import { client } from "../../../api/client.js";
+import { PageLayout } from "../../../layouts/page-layout/page-layout.js";
 import { useApp } from "../../../state/useApp.js";
+import { useRegisterViewChatBinding } from "../../../state/view-chat-binding.js";
+import { ChatSearchHint } from "../../composites/chat-search-hint.js";
+import { PagePanel } from "../../composites/page-panel/index.js";
 import { RelationshipsGraphPanel } from "../RelationshipsGraphPanel.js";
 import { RelationshipsActivityFeed } from "./RelationshipsActivityFeed.js";
 import { RelationshipsCandidateMergesPanel } from "./RelationshipsCandidateMergesPanel.js";
@@ -23,6 +27,11 @@ export function RelationshipsWorkspaceView({ contentHeader, embedded = false, on
     const [detail, setDetail] = useState(null);
     const graphRequestId = useRef(0);
     const deferredSearch = useDeferredValue(search);
+    const searchPlaceholder = t("relationships.searchPlaceholder", {
+        defaultValue: "Search people, aliases, handles…",
+    });
+    const chatBinding = useMemo(() => ({ placeholder: searchPlaceholder, onQuery: setSearch }), [searchPlaceholder]);
+    useRegisterViewChatBinding(chatBinding);
     const loadGraph = useCallback(async (query = buildRelationshipsGraphQuery("", "all")) => {
         const requestId = graphRequestId.current + 1;
         graphRequestId.current = requestId;
@@ -44,7 +53,9 @@ export function RelationshipsWorkspaceView({ contentHeader, embedded = false, on
             }
             setGraphError(error instanceof Error
                 ? error.message
-                : "Failed to load the relationships graph.");
+                : t("relationships.graphLoadError", {
+                    defaultValue: "Failed to load the relationships graph.",
+                }));
             setGraph(null);
         }
         finally {
@@ -52,7 +63,7 @@ export function RelationshipsWorkspaceView({ contentHeader, embedded = false, on
                 setGraphLoading(false);
             }
         }
-    }, []);
+    }, [t]);
     useEffect(() => {
         void loadGraph(buildRelationshipsGraphQuery(deferredSearch, platform));
     }, [deferredSearch, loadGraph, platform]);
@@ -88,7 +99,9 @@ export function RelationshipsWorkspaceView({ contentHeader, embedded = false, on
                 setDetail(null);
                 setDetailError(err instanceof Error
                     ? err.message
-                    : "Failed to load the selected person.");
+                    : t("relationships.personLoadError", {
+                        defaultValue: "Failed to load the selected person.",
+                    }));
             }
         })
             .finally(() => {
@@ -99,7 +112,7 @@ export function RelationshipsWorkspaceView({ contentHeader, embedded = false, on
         return () => {
             cancelled = true;
         };
-    }, [selectedPersonId]);
+    }, [selectedPersonId, t]);
     const platforms = platformOptions(graph);
     const selectedSummary = graph?.people.find((person) => person.primaryEntityId === selectedPersonId) ?? null;
     const selectedGroupId = selectedSummary?.groupId ?? null;
@@ -113,18 +126,65 @@ export function RelationshipsWorkspaceView({ contentHeader, embedded = false, on
     const refreshGraph = () => {
         void loadGraph(buildRelationshipsGraphQuery(deferredSearch, platform));
     };
-    const toolbar = (_jsx(PagePanel, { variant: "surface", className: "px-3 py-3", children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: embedded
-                    ? "grid min-w-0 gap-2 md:grid-cols-[minmax(16rem,1fr)_minmax(12rem,14rem)_auto]"
-                    : "flex min-w-0 flex-col gap-2 sm:flex-row sm:justify-end", children: [embedded ? (_jsxs(_Fragment, { children: [_jsx("label", { className: "sr-only", htmlFor: "relationships-search", children: "Search people, aliases, handles" }), _jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted" }), _jsx("input", { id: "relationships-search", value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search", "aria-label": "Search people, aliases, handles", className: "h-9 w-full rounded-lg border border-border/35 bg-card/45 pl-9 pr-10 text-sm text-txt outline-none transition focus:border-accent/55" }), search ? (_jsx("button", { type: "button", className: "absolute right-1.5 top-1.5 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted transition hover:bg-bg-hover hover:text-txt", onClick: () => setSearch(""), "aria-label": "Clear relationship search", children: _jsx(X, { className: "h-3.5 w-3.5" }) })) : null] })] })) : null, _jsxs("div", { className: "relative min-w-0", children: [_jsx("label", { className: "sr-only", htmlFor: "relationships-platform", children: "Platform filter" }), _jsx(Filter, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted" }), _jsxs("select", { id: "relationships-platform", value: platform, onChange: (event) => setPlatform(event.target.value), "aria-label": "Platform filter", className: "h-9 w-full rounded-lg border border-border/35 bg-card/45 pl-9 pr-8 text-sm text-txt outline-none transition focus:border-accent/55", children: [_jsx("option", { value: "all", children: "All" }), platforms.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }), _jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-9 w-9 shrink-0 rounded-lg p-0", onClick: refreshGraph, "aria-label": "Refresh relationships", children: _jsx(RefreshCw, { className: `h-4 w-4 ${graphLoading ? "animate-spin" : ""}` }) })] }) }) }));
-    const content = (_jsxs("div", { className: `flex min-h-0 flex-1 flex-col ${embedded ? "gap-3" : "gap-4"}`, "data-testid": embedded ? "relationships-embedded-view" : undefined, children: [toolbar, detailError ? (_jsx("div", { className: "rounded-xl border border-warning/30 bg-warning/10 px-4 py-3 text-sm text-warning", children: detailError })) : null, graphError && !graph ? (_jsx(PagePanel.Empty, { variant: "panel", className: embedded ? "min-h-[18rem]" : "min-h-[24rem]", title: "Relationships failed to load", description: graphError })) : !graph && graphLoading ? (_jsx(PagePanel.Loading, { heading: t("common.loading", { defaultValue: "Loading..." }) })) : !graph || graph.people.length === 0 ? (_jsx(PagePanel.Empty, { variant: "panel", className: embedded ? "min-h-[18rem]" : "min-h-[24rem]", description: search || platform !== "all"
-                    ? "No people match these filters."
-                    : "No relationship data yet.", title: search || platform !== "all"
-                    ? "No matching relationships"
-                    : "No relationships data available" })) : (_jsxs(_Fragment, { children: [graphError ? (_jsx("div", { className: "rounded-xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: graphError })) : null, _jsxs("div", { className: embedded
+    const platformAgent = useAgentElement({
+        id: "relationships-platform",
+        role: "select",
+        label: t("relationships.platformFilter", {
+            defaultValue: "Platform filter",
+        }),
+        group: "relationships-toolbar",
+        description: "Filter relationships by platform",
+        options: ["all", ...platforms],
+        getValue: () => platform,
+        onFill: (value) => setPlatform(value),
+    });
+    const toolbar = (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(ChatSearchHint, { noun: "people", query: search }), _jsx("div", { className: embedded
+                    ? "grid min-w-0 gap-2 md:grid-cols-[minmax(12rem,14rem)_auto]"
+                    : "flex min-w-0 flex-col gap-2 sm:flex-row sm:justify-end", children: _jsxs("div", { className: "relative min-w-0", children: [_jsx("label", { className: "sr-only", htmlFor: "relationships-platform", children: t("relationships.platformFilter", {
+                                defaultValue: "Platform filter",
+                            }) }), _jsx(Filter, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted" }), _jsxs("select", { ref: platformAgent.ref, id: "relationships-platform", value: platform, onChange: (event) => setPlatform(event.target.value), "aria-label": t("relationships.platformFilter", {
+                                defaultValue: "Platform filter",
+                            }), className: "h-9 w-full rounded-sm border border-border/35 bg-card/45 pl-9 pr-8 text-sm text-txt outline-none transition focus:border-accent/55", ...platformAgent.agentProps, children: [_jsx("option", { value: "all", children: t("relationships.platformAll", { defaultValue: "All" }) }), platforms.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }) })] }));
+    const content = (_jsxs("div", { className: `flex min-h-0 flex-1 flex-col ${embedded ? "gap-3" : "gap-4"}`, "data-testid": embedded ? "relationships-embedded-view" : undefined, children: [toolbar, detailError ? (_jsx("div", { className: "rounded-sm border border-warning/30 bg-warning/10 px-4 py-3 text-sm text-warning", children: detailError })) : null, graphError && !graph ? (_jsx(PagePanel.Empty, { variant: "panel", className: embedded ? "min-h-[18rem]" : "min-h-[24rem]", title: t("relationships.failedToLoad", {
+                    defaultValue: "Relationships failed to load",
+                }), description: graphError })) : !graph && graphLoading ? (_jsx(PagePanel.Loading, { heading: t("common.loading", { defaultValue: "Loading..." }) })) : !graph || graph.people.length === 0 ? (_jsx(PagePanel, { variant: "surface", className: `grid place-items-center ${embedded ? "min-h-[18rem]" : "min-h-[24rem]"}`, children: _jsxs("div", { className: "w-full max-w-xl px-4 text-center", children: [_jsx("div", { className: "mx-auto flex h-14 w-14 items-center justify-center rounded-sm border border-accent/25 bg-accent/12 text-accent", children: _jsx(Network, { className: "h-7 w-7" }) }), _jsx("h2", { className: "mt-4 text-base font-semibold text-txt", children: search || platform !== "all"
+                                ? t("relationships.noMatching", {
+                                    defaultValue: "No matching relationships",
+                                })
+                                : t("relationships.noneYet", {
+                                    defaultValue: "No relationships yet",
+                                }) }), _jsx("div", { className: "mt-5 flex items-start justify-center gap-8", children: [
+                                {
+                                    labelKey: "relationships.statPeople",
+                                    defaultLabel: "People",
+                                    icon: UserRound,
+                                },
+                                {
+                                    labelKey: "relationships.statFacts",
+                                    defaultLabel: "Facts",
+                                    icon: Sparkles,
+                                },
+                                {
+                                    labelKey: "relationships.statGraph",
+                                    defaultLabel: "Graph",
+                                    icon: Network,
+                                },
+                            ].map((item) => {
+                                const Icon = item.icon;
+                                return (_jsxs("div", { className: "text-center", children: [_jsx(Icon, { className: "mx-auto h-4 w-4 text-muted" }), _jsx("div", { className: "mt-2 text-xs font-semibold text-muted", children: t(item.labelKey, { defaultValue: item.defaultLabel }) })] }, item.labelKey));
+                            }) })] }) })) : (_jsxs(_Fragment, { children: [graphError ? (_jsx("div", { className: "rounded-sm border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: graphError })) : null, _jsxs("div", { className: embedded
                             ? "grid min-h-0 gap-3"
-                            : "grid min-h-0 gap-4 xl:grid-cols-[minmax(0,1.35fr)_minmax(22rem,0.65fr)]", children: [_jsx(PagePanel, { variant: "surface", className: "px-3 py-3 sm:px-4 sm:py-4", children: _jsx(RelationshipsGraphPanel, { snapshot: graph, selectedGroupId: selectedGroupId, compact: embedded, onSelectPersonId: setSelectedPersonId }) }), detail ? (_jsx("div", { className: "transition-opacity duration-200", children: _jsx(RelationshipsPersonSummaryPanel, { person: detail, compact: embedded, ownerGroupId: ownerGroupId, ownerDisplayName: ownerDisplayName, onViewMemories: handleViewMemories, onOwnerNameUpdated: () => refreshGraph() }) })) : detailLoading ? (_jsx(PagePanel.Loading, { heading: "Loading person..." })) : (_jsx(PagePanel.Empty, { variant: "panel", title: "Select a person", description: "Choose a person from the list or graph." }))] }), detail ? (_jsxs("div", { className: "grid gap-3 transition-opacity duration-200 xl:grid-cols-2", children: [_jsx(RelationshipsFactsPanel, { person: detail }), _jsx(RelationshipsConnectionsPanel, { person: detail }), _jsx("div", { className: "xl:col-span-2", children: _jsx(RelationshipsConversationsPanel, { person: detail }) }), _jsx(RelationshipsRelevantMemoriesPanel, { person: detail }), _jsx(RelationshipsUserPreferencesPanel, { person: detail }), _jsx("div", { className: "xl:col-span-2", children: _jsx(RelationshipsDocumentsPanel, { person: detail }) })] })) : null, !embedded ? (_jsxs(_Fragment, { children: [_jsx(RelationshipsCandidateMergesPanel, { graph: graph, onResolved: refreshGraph }), _jsx(PagePanel, { as: "section", variant: "surface", "aria-label": "Activity", className: "px-3 py-3", children: _jsx("div", { className: "max-h-[24rem] overflow-auto pr-1", children: _jsx(RelationshipsActivityFeed, {}) }) })] })) : null] }))] }));
+                            : "grid min-h-0 gap-4 xl:grid-cols-[minmax(0,1.35fr)_minmax(22rem,0.65fr)]", children: [_jsx(PagePanel, { variant: "surface", className: "px-3 py-3 sm:px-4 sm:py-4", children: _jsx(RelationshipsGraphPanel, { snapshot: graph, selectedGroupId: selectedGroupId, compact: embedded, onSelectPersonId: setSelectedPersonId }) }), detail ? (_jsx("div", { className: "transition-opacity duration-200", children: _jsx(RelationshipsPersonSummaryPanel, { person: detail, compact: embedded, ownerGroupId: ownerGroupId, ownerDisplayName: ownerDisplayName, onViewMemories: handleViewMemories, onOwnerNameUpdated: () => refreshGraph() }) })) : detailLoading ? (_jsx(PagePanel.Loading, { heading: t("relationships.loadingPerson", {
+                                    defaultValue: "Loading person...",
+                                }) })) : (_jsx(PagePanel.Empty, { variant: "panel", title: t("relationships.selectPerson", {
+                                    defaultValue: "Select a person",
+                                }), description: t("relationships.selectPersonDesc", {
+                                    defaultValue: "Choose a person from the list or graph.",
+                                }) }))] }), detail ? (_jsxs("div", { className: "grid gap-3 transition-opacity duration-200 xl:grid-cols-2", children: [_jsx(RelationshipsFactsPanel, { person: detail }), _jsx(RelationshipsConnectionsPanel, { person: detail }), _jsx("div", { className: "xl:col-span-2", children: _jsx(RelationshipsConversationsPanel, { person: detail }) }), _jsx(RelationshipsRelevantMemoriesPanel, { person: detail }), _jsx(RelationshipsUserPreferencesPanel, { person: detail }), _jsx("div", { className: "xl:col-span-2", children: _jsx(RelationshipsDocumentsPanel, { person: detail }) })] })) : null, !embedded ? (_jsxs(_Fragment, { children: [_jsx(RelationshipsCandidateMergesPanel, { graph: graph, onResolved: refreshGraph }), _jsx(PagePanel, { as: "section", variant: "surface", "aria-label": t("relationships.activity", {
+                                    defaultValue: "Activity",
+                                }), className: "px-3 py-3", children: _jsx("div", { className: "max-h-[24rem] overflow-auto pr-1", children: _jsx(RelationshipsActivityFeed, {}) }) })] })) : null] }))] }));
     if (embedded) {
         return content;
     }
-    return (_jsx(PageLayout, { sidebar: _jsx(RelationshipsSidebar, { search: search, graph: graph, selectedPersonId: selectedPersonId, onSearchChange: setSearch, onSearchClear: () => setSearch(""), onSelectPersonId: setSelectedPersonId }), contentHeader: contentHeader, "data-testid": "relationships-view", children: content }));
+    return (_jsx(PageLayout, { sidebar: _jsx(RelationshipsSidebar, { graph: graph, selectedPersonId: selectedPersonId, onSelectPersonId: setSelectedPersonId }), contentHeader: contentHeader, "data-testid": "relationships-view", children: content }));
 }

package/components/pages/skill-detail-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skill-detail-panel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/skill-detail-panel.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA8BH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,GACR,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAyKA;AAID,wBAAgB,eAAe,4CAsR9B"}
+{"version":3,"file":"skill-detail-panel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/skill-detail-panel.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AA+BH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,GACR,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAkNA;AAID,wBAAgB,eAAe,4CAoR9B"}

package/components/pages/skill-detail-panel.js

@@ -4,10 +4,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * Extracted from SkillsView.tsx to keep individual files under ~500 LOC.
  */
-import { AdminCodeEditor, AdminDialogContent, AdminDialogHeader, AdminMonoMeta, Button, Dialog, DialogDescription, DialogTitle, Input, } from "@elizaos/ui";
+import { Brain } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
 import { useApp } from "../../state/index.js";
+import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
+import { ChatSearchHint } from "../composites/chat-search-hint.js";
+import { AdminCodeEditor, AdminDialogContent, AdminDialogHeader, AdminMonoMeta, } from "../ui/admin-dialog.js";
+import { Button } from "../ui/button.js";
+import { Dialog, DialogDescription, DialogTitle } from "../ui/dialog.js";
 import { InstallModal } from "./skill-marketplace.js";
 const BINANCE_SKILL_IDS = new Set([
     "binance-crypto-market-rank",
@@ -26,6 +32,39 @@ export function EditSkillModal({ skillId, skillName, onClose, onSaved, }) {
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState("");
     const [saveSuccess, setSaveSuccess] = useState(false);
+    const editorControl = useAgentElement({
+        id: "skill-edit-source",
+        role: "textarea",
+        label: `${skillName} SKILL.md source`,
+        group: "skill-edit",
+        description: "Edit the Markdown source for this skill",
+        getValue: () => content,
+        onFill: (next) => setContent(next),
+    });
+    const retryControl = useAgentElement({
+        id: "skill-edit-retry",
+        role: "button",
+        label: "Retry loading skill source",
+        group: "skill-edit",
+        description: "Reload the skill source after a load error",
+        onActivate: () => void loadSource(),
+    });
+    const closeControl = useAgentElement({
+        id: "skill-edit-close",
+        role: "button",
+        label: "Close skill editor",
+        group: "skill-edit",
+        description: "Close the skill editor, discarding unsaved changes",
+        onActivate: () => onClose(),
+    });
+    const saveControl = useAgentElement({
+        id: "skill-edit-save",
+        role: "button",
+        label: `Save ${skillName}`,
+        group: "skill-edit",
+        description: "Save changes to the skill source",
+        onActivate: () => void handleSave(),
+    });
     const loadSource = useCallback(async () => {
         setLoading(true);
         setError("");
@@ -77,15 +116,15 @@ export function EditSkillModal({ skillId, skillName, onClose, onSaved, }) {
     return (_jsx(Dialog, { open: true, onOpenChange: (open) => {
             if (!open)
                 onClose();
-        }, children: _jsxs(AdminDialogContent, { container: typeof document !== "undefined" ? document.body : undefined, className: "h-[85vh] max-w-4xl", children: [_jsxs(AdminDialogHeader, { className: "flex-row items-center justify-between py-3 space-y-0", children: [_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsx(DialogTitle, { className: "font-semibold text-sm truncate", children: skillName }), _jsx(AdminMonoMeta, { className: "rounded-md border border-border bg-bg-hover px-1.5 py-0.5", children: t("skillsview.SKILLMd") }), _jsx(DialogDescription, { className: "sr-only", children: t("skillsview.editSkillSourceDescription", {
+        }, children: _jsxs(AdminDialogContent, { container: typeof document !== "undefined" ? document.body : undefined, className: "h-[85vh] max-w-4xl", children: [_jsxs(AdminDialogHeader, { className: "flex-row items-center justify-between py-3 space-y-0", children: [_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsx(DialogTitle, { className: "font-semibold text-sm truncate", children: skillName }), _jsx(AdminMonoMeta, { className: "rounded-sm border border-border bg-bg-hover px-1.5 py-0.5", children: t("skillsview.SKILLMd") }), _jsx(DialogDescription, { className: "sr-only", children: t("skillsview.editSkillSourceDescription", {
                                         defaultValue: "Edit the Markdown source for this skill and save your changes.",
-                                    }) }), hasChanges && (_jsx("span", { className: "text-2xs font-medium text-warn", children: t("skillsview.unsaved") }))] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: "text-2xs text-muted", children: [navigator.platform.includes("Mac") ? "\u2318S" : "Ctrl+S", " ", t("skillsview.toSave")] }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: loading ? (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted", children: t("skillsview.LoadingSkillSource") })) : error && !content ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-3", children: [_jsx("div", { className: "text-sm font-medium text-danger", children: error }), _jsx(Button, { variant: "outline", size: "sm", className: "text-xs", onClick: () => loadSource(), children: t("common.retry") })] })) : (_jsx(AdminCodeEditor, { value: content, onChange: (e) => setContent(e.target.value), onKeyDown: handleKeyDown, spellCheck: false })) }), _jsxs("div", { className: "flex shrink-0 items-center justify-between px-5 py-3", children: [_jsxs("div", { className: "text-xs-tight text-muted", children: [content
+                                    }) }), hasChanges && (_jsx("span", { className: "text-2xs font-medium text-warn", children: t("skillsview.unsaved") }))] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs("span", { className: "text-2xs text-muted", children: [navigator.platform.includes("Mac") ? "\u2318S" : "Ctrl+S", " ", t("skillsview.toSave")] }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: loading ? (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted", children: t("skillsview.LoadingSkillSource") })) : error && !content ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-3", children: [_jsx("div", { className: "text-sm font-medium text-danger", children: error }), _jsx(Button, { ref: retryControl.ref, variant: "outline", size: "sm", className: "text-xs", onClick: () => loadSource(), ...retryControl.agentProps, children: t("common.retry") })] })) : (_jsx(AdminCodeEditor, { value: content, onChange: (e) => setContent(e.target.value), onKeyDown: handleKeyDown, spellCheck: false, ...editorControl.agentProps })) }), _jsxs("div", { className: "flex shrink-0 items-center justify-between px-5 py-3", children: [_jsxs("div", { className: "text-xs-tight text-muted", children: [content
                                     ? `${content.split("\n").length} ${t("trajectorydetailview.lines")}`
-                                    : "", error && content ? (_jsx("span", { className: "ml-3 text-danger", children: error })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "text-xs", onClick: onClose, children: hasChanges
+                                    : "", error && content ? (_jsx("span", { className: "ml-3 text-danger", children: error })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { ref: closeControl.ref, variant: "outline", size: "sm", className: "text-xs", onClick: onClose, ...closeControl.agentProps, children: hasChanges
                                         ? t("skillsview.discard", { defaultValue: "Discard" })
-                                        : t("common.close") }), _jsx(Button, { variant: "default", size: "sm", className: `text-xs font-medium ${saveSuccess
+                                        : t("common.close") }), _jsx(Button, { ref: saveControl.ref, variant: "default", size: "sm", className: `text-xs font-medium ${saveSuccess
                                         ? "border-ok/40 bg-ok text-white hover:bg-ok/90"
-                                        : ""}`, onClick: () => handleSave(), disabled: saving || !hasChanges, children: saving
+                                        : ""}`, onClick: () => handleSave(), disabled: saving || !hasChanges, ...saveControl.agentProps, children: saving
                                         ? t("common.saving")
                                         : saveSuccess
                                             ? t("common.saved")
@@ -99,6 +138,11 @@ export function SkillsModalView() {
     const [filterTab, setFilterTab] = useState("all");
     const [editingSkill, setEditingSkill] = useState(null);
     const [installModalOpen, setInstallModalOpen] = useState(false);
+    const searchPlaceholder = t("skillsview.SearchSkills", {
+        defaultValue: "Search skills...",
+    });
+    const chatBinding = useMemo(() => ({ placeholder: searchPlaceholder, onQuery: setFilterText }), [searchPlaceholder]);
+    useRegisterViewChatBinding(chatBinding);
     useEffect(() => {
         void loadSkills();
     }, [loadSkills]);
@@ -138,11 +182,7 @@ export function SkillsModalView() {
             label: `${t("common.off")} (${skills.filter((s) => !s.enabled).length})`,
         },
     ];
-    return (_jsxs("div", { className: "plugins-game-modal", children: [_jsxs("div", { className: "plugins-game-list-panel", children: [_jsxs("div", { className: "plugins-game-list-head", children: [_jsx("div", { className: "plugins-game-section-title", children: t("skillsview.Talents", { defaultValue: "Talents" }) }), _jsxs("div", { className: "plugins-game-section-meta", children: [skills.length, " ", t("skillsview.installed", { defaultValue: "installed" })] })] }), _jsx("div", { className: "plugins-game-list-search", children: _jsxs("div", { className: "plugins-game-list-search-row", children: [_jsx(Input, { type: "text", placeholder: t("skillsview.SearchSkills", {
-                                        defaultValue: "Search skills...",
-                                    }), "aria-label": t("skillsview.SearchSkills", {
-                                        defaultValue: "Search skills",
-                                    }), value: filterText, onChange: (e) => setFilterText(e.target.value), className: "plugins-game-search-input" }), _jsxs(Button, { variant: "default", size: "sm", type: "button", className: "plugins-game-chip plugins-game-add-btn", onClick: () => setInstallModalOpen(true), children: [_jsx("span", { className: "plugins-game-add-symbol", children: "+" }), " ", t("common.install", { defaultValue: "Install" })] })] }) }), _jsx("div", { className: "plugins-game-chip-row", children: tabs.map((tab) => (_jsx(Button, { variant: "ghost", size: "sm", type: "button", className: `plugins-game-chip plugins-game-chip-small${filterTab === tab.key ? " is-active" : ""}`, onClick: () => setFilterTab(tab.key), children: tab.label }, tab.key))) }), _jsx("div", { className: "plugins-game-list-scroll", role: "listbox", "aria-label": t("skillsview.Talents", {
+    return (_jsxs("div", { className: "plugins-game-modal", children: [_jsxs("div", { className: "plugins-game-list-panel", children: [_jsxs("div", { className: "plugins-game-list-head", children: [_jsx("div", { className: "plugins-game-section-title", children: t("skillsview.Talents", { defaultValue: "Talents" }) }), _jsxs("div", { className: "plugins-game-section-meta", children: [skills.length, " ", t("skillsview.installed", { defaultValue: "installed" })] })] }), _jsxs("div", { className: "plugins-game-list-search", children: [_jsxs(Button, { variant: "default", size: "sm", type: "button", className: "plugins-game-chip plugins-game-add-btn", onClick: () => setInstallModalOpen(true), children: [_jsx("span", { className: "plugins-game-add-symbol", children: "+" }), " ", t("common.install", { defaultValue: "Install" })] }), _jsx(ChatSearchHint, { noun: "skills", query: filterText })] }), _jsx("div", { className: "plugins-game-chip-row", children: tabs.map((tab) => (_jsx(Button, { variant: "ghost", size: "sm", type: "button", className: `plugins-game-chip plugins-game-chip-small${filterTab === tab.key ? " is-active" : ""}`, onClick: () => setFilterTab(tab.key), children: tab.label }, tab.key))) }), _jsx("div", { className: "plugins-game-list-scroll", role: "listbox", "aria-label": t("skillsview.Talents", {
                             defaultValue: "Installed skills",
                         }), children: filtered.length === 0 ? (_jsx("div", { className: "plugins-game-list-empty", children: t("skillsview.NoSkillsFound", {
                                 defaultValue: "No skills found",
@@ -153,7 +193,7 @@ export function SkillsModalView() {
                                                 : t("common.off") })] }) }), _jsx("div", { className: "plugins-game-detail-description", children: selected.description ||
                                 t("skillsview.noDescriptionProvided", {
                                     defaultValue: "No description provided.",
-                                }) }), _jsxs("div", { className: "plugins-game-detail-actions", children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", className: "plugins-game-action-btn", onClick: () => setEditingSkill(selected), children: t("skillsview.EditSource", { defaultValue: "Edit Source" }) }), _jsx(Button, { variant: "destructive", size: "sm", type: "button", className: "plugins-game-action-btn", onClick: () => handleDeleteSkill(selected.id, selected.name), children: t("common.delete", { defaultValue: "Delete" }) })] })] })) : (_jsxs("div", { className: "plugins-game-detail-empty", children: [_jsx("span", { className: "plugins-game-detail-empty-icon", children: "\uD83E\uDDE0" }), _jsx("span", { className: "plugins-game-detail-empty-text", children: t("skillsview.SelectATalentToConf", {
+                                }) }), _jsxs("div", { className: "plugins-game-detail-actions", children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", className: "plugins-game-action-btn", onClick: () => setEditingSkill(selected), children: t("skillsview.EditSource", { defaultValue: "Edit Source" }) }), _jsx(Button, { variant: "destructive", size: "sm", type: "button", className: "plugins-game-action-btn", onClick: () => handleDeleteSkill(selected.id, selected.name), children: t("common.delete", { defaultValue: "Delete" }) })] })] })) : (_jsxs("div", { className: "plugins-game-detail-empty", children: [_jsx("span", { className: "plugins-game-detail-empty-icon", children: _jsx(Brain, { className: "h-5 w-5" }) }), _jsx("span", { className: "plugins-game-detail-empty-text", children: t("skillsview.SelectATalentToConf", {
                                 defaultValue: "Select a talent to configure",
                             }) })] })) }), editingSkill && (_jsx(EditSkillModal, { skillId: editingSkill.id, skillName: editingSkill.name, onClose: () => setEditingSkill(null), onSaved: () => void refreshSkills() })), installModalOpen && (_jsx(InstallModal, { skills: skills, skillsMarketplaceQuery: skillsMarketplaceQuery, skillsMarketplaceResults: skillsMarketplaceResults, skillsMarketplaceError: skillsMarketplaceError, skillsMarketplaceLoading: skillsMarketplaceLoading, skillsMarketplaceAction: skillsMarketplaceAction, skillsMarketplaceManualGithubUrl: skillsMarketplaceManualGithubUrl, searchSkillsMarketplace: searchSkillsMarketplace, installSkillFromMarketplace: installSkillFromMarketplace, uninstallMarketplaceSkill: uninstallMarketplaceSkill, installSkillFromGithubUrl: installSkillFromGithubUrl, enableSkill: enableMarketplaceSkill, disableSkill: disableMarketplaceSkill, copySkillSource: copyMarketplaceSkillSource, showSkillDetails: (_skillId) => {
                     setInstallModalOpen(false);

package/components/pages/skill-marketplace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skill-marketplace.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/skill-marketplace.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,OAAO,KAAK,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,cAAc,EACd,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE;IACD,IAAI,EAAE,sBAAsB,CAAC;IAC7B,cAAc,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,uBAAuB,EAAE,MAAM,CAAC;IAChC,SAAS,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,2CAqMA;AAMD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,gCAAgC,EAChC,uBAAuB,EACvB,2BAA2B,EAC3B,yBAAyB,EACzB,yBAAyB,EACzB,WAAW,EACX,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,sBAAsB,EAAE,CAAC;IACnD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,OAAO,CAAC;IAClC,uBAAuB,EAAE,MAAM,CAAC;IAChC,gCAAgC,EAAE,MAAM,CAAC;IACzC,uBAAuB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,2BAA2B,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,yBAAyB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,yBAAyB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAuNA"}
+{"version":3,"file":"skill-marketplace.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/skill-marketplace.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAoNrC,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,cAAc,EACd,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE;IACD,IAAI,EAAE,sBAAsB,CAAC;IAC7B,cAAc,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,uBAAuB,EAAE,MAAM,CAAC;IAChC,SAAS,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,2CAuNA;AAMD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,gCAAgC,EAChC,uBAAuB,EACvB,2BAA2B,EAC3B,yBAAyB,EACzB,yBAAyB,EACzB,WAAW,EACX,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,sBAAsB,EAAE,CAAC;IACnD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,OAAO,CAAC;IAClC,uBAAuB,EAAE,MAAM,CAAC;IAChC,gCAAgC,EAAE,MAAM,CAAC;IACzC,uBAAuB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,2BAA2B,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,yBAAyB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,yBAAyB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAoMA"}

package/components/pages/skill-marketplace.js

@@ -4,9 +4,76 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * Extracted from SkillsView.tsx to keep individual files under ~500 LOC.
  */
-import { AdminDialog, AdminDialogContent, AdminDialogHeader, AdminInput, Button, Dialog, DialogDescription, DialogTitle, } from "@elizaos/ui";
 import { useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { useApp } from "../../state/index.js";
+import { AdminDialog, AdminDialogContent, AdminDialogHeader, AdminInput, } from "../ui/admin-dialog.js";
+import { Button } from "../ui/button.js";
+import { Dialog, DialogDescription, DialogTitle } from "../ui/dialog.js";
+function MarketplaceActionButton({ id, label, description, variant, className, disabled, testId, children, onActivate, }) {
+    const { ref, agentProps } = useAgentElement({
+        id,
+        role: "button",
+        label,
+        group: "skill-marketplace",
+        description,
+        onActivate,
+    });
+    return (_jsx(Button, { ref: ref, variant: variant, size: "sm", className: className, onClick: onActivate, disabled: disabled, "data-testid": testId, ...agentProps, children: children }));
+}
+function InstallSourceTab({ id, label, active, onSelect, }) {
+    const { agentProps } = useAgentElement({
+        id: `skill-install-tab-${id}`,
+        role: "tab",
+        label,
+        group: "skill-install",
+        status: active ? "active" : "inactive",
+        description: `Switch to the ${label} install source`,
+        onActivate: () => onSelect(id),
+    });
+    return (_jsx(AdminDialog.SegmentedTab, { active: active, role: "tab", id: `skills-install-tab-${id}`, "aria-selected": active, "aria-controls": `skills-install-panel-${id}`, onClick: () => onSelect(id), ...agentProps, children: label }));
+}
+function SkillSearchField({ value, placeholder, ariaLabel, onChange, onSubmit, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: "skill-install-search-input",
+        role: "text-input",
+        label: "Search skills marketplace",
+        group: "skill-install",
+        description: "Search the skills marketplace by keyword",
+        getValue: () => value,
+        onFill: (next) => onChange(next),
+    });
+    return (_jsx(AdminInput, { ref: ref, type: "text", style: { flex: 1, minWidth: 200 }, placeholder: placeholder, "aria-label": ariaLabel, value: value, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
+            if (e.key === "Enter")
+                onSubmit();
+        }, ...agentProps }));
+}
+function SkillUrlField({ value, ariaLabel, onChange, onSubmit, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: "skill-install-url-input",
+        role: "text-input",
+        label: "GitHub repository URL",
+        group: "skill-install",
+        description: "Paste a GitHub repository URL to install a skill",
+        getValue: () => value,
+        onFill: (next) => onChange(next),
+    });
+    return (_jsx(AdminInput, { ref: ref, type: "text", style: { flex: 1 }, placeholder: "https://github.com/org/repo", "aria-label": ariaLabel, value: value, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
+            if (e.key === "Enter")
+                onSubmit();
+        }, ...agentProps }));
+}
+function SkillInstallSubmitButton({ id, label, description, disabled, children, onActivate, }) {
+    const { ref, agentProps } = useAgentElement({
+        id,
+        role: "button",
+        label,
+        group: "skill-install",
+        description,
+        onActivate,
+    });
+    return (_jsx(Button, { ref: ref, variant: "default", size: "sm", type: "button", className: "plugins-game-chip", style: { minHeight: 36, padding: "0 16px", fontWeight: 700 }, onClick: onActivate, disabled: disabled, ...agentProps, children: children }));
+}
 /* ── Marketplace Result Card ────────────────────────────────────────── */
 export function MarketplaceCard({ item, installedSkill, skillsMarketplaceAction, onInstall, onUninstall, onEnable, onDisable, onCopy, onDetails, }) {
     const { t } = useApp();
@@ -34,25 +101,25 @@ export function MarketplaceCard({ item, installedSkill, skillsMarketplaceAction,
                 label: t("common.inactive", { defaultValue: "Disabled" }),
                 tone: "warning",
             };
-    return (_jsxs("div", { className: "flex items-start gap-4 p-4 border border-border bg-card hover:border-accent/50 transition-colors", "data-testid": `skill-result-card-${item.id}`, children: [_jsx("div", { className: "w-10 h-10 shrink-0 flex items-center justify-center bg-accent/10 text-accent text-sm font-bold rounded", children: item.name.charAt(0).toUpperCase() }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "font-semibold text-sm text-txt", children: item.name }), _jsx("span", { className: `px-1.5 py-px text-2xs font-bold uppercase tracking-wider rounded ${stateBadge.tone === "success"
+    return (_jsxs("div", { className: "flex items-start gap-4 p-4 border border-border bg-card hover:border-accent/50 transition-colors", "data-testid": `skill-result-card-${item.id}`, children: [_jsx("div", { className: "w-10 h-10 shrink-0 flex items-center justify-center bg-accent/10 text-accent text-sm font-bold rounded-sm", children: item.name.charAt(0).toUpperCase() }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "font-semibold text-sm text-txt", children: item.name }), _jsx("span", { className: `px-1.5 py-px text-2xs font-bold uppercase tracking-wider rounded-sm ${stateBadge.tone === "success"
                                     ? "bg-success/15 text-success"
                                     : stateBadge.tone === "warning"
                                         ? "bg-warning/15 text-warning"
-                                        : "bg-muted/15 text-muted"}`, children: stateBadge.label })] }), _jsx("div", { className: "text-xs-tight text-muted mt-0.5 line-clamp-2", children: item.description || t("skillsview.noDescription") }), _jsxs("div", { className: "flex items-center gap-2 mt-1.5 text-2xs text-muted", children: [_jsx("span", { className: "font-mono", children: sourceLabel }), item.score != null && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-border", children: "/" }), _jsxs("span", { children: [t("skillsview.score"), " ", item.score.toFixed(2)] })] })), item.tags && item.tags.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-border", children: "/" }), item.tags.slice(0, 3).map((tag) => (_jsx("span", { className: "px-1.5 py-px bg-accent/10 text-accent", children: tag }, tag)))] }))] })] }), _jsx("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-2 max-w-[18rem]", children: !installed ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "default", size: "sm", className: "h-8 px-3 text-xs-tight font-bold tracking-wide shadow-sm", onClick: () => onInstall(item), disabled: isInstalling, "data-testid": `skill-action-install-${item.id}`, children: isInstalling
+                                        : "bg-muted/15 text-muted"}`, children: stateBadge.label })] }), _jsx("div", { className: "text-xs-tight text-muted mt-0.5 line-clamp-2", children: item.description || t("skillsview.noDescription") }), _jsxs("div", { className: "flex items-center gap-2 mt-1.5 text-2xs text-muted", children: [_jsx("span", { className: "font-mono", children: sourceLabel }), item.score != null && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-border", children: "/" }), _jsxs("span", { children: [t("skillsview.score"), " ", item.score.toFixed(2)] })] })), item.tags && item.tags.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-border", children: "/" }), item.tags.slice(0, 3).map((tag) => (_jsx("span", { className: "px-1.5 py-px bg-accent/10 text-accent", children: tag }, tag)))] }))] })] }), _jsx("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-2 max-w-[18rem]", children: !installed ? (_jsxs(_Fragment, { children: [_jsx(MarketplaceActionButton, { id: `skill-${item.id}-install`, label: `Install ${item.name}`, description: `Install the ${item.name} skill`, variant: "default", className: "h-8 px-3 text-xs-tight font-bold tracking-wide ", disabled: isInstalling, testId: `skill-action-install-${item.id}`, onActivate: () => onInstall(item), children: isInstalling
                                 ? t("common.installing", { defaultValue: "Installing..." })
-                                : t("common.install") }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", onClick: () => onDetails(item.id), "data-testid": `skill-action-details-${item.id}`, children: t("skillsview.details", { defaultValue: "Details" }) })] })) : enabled ? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", onClick: () => onDisable(item.id, item.name), disabled: isToggling, "data-testid": `skill-action-disable-${item.id}`, children: isToggling
+                                : t("common.install") }), _jsx(MarketplaceActionButton, { id: `skill-${item.id}-details`, label: `${item.name} details`, description: `Show details for ${item.name}`, variant: "ghost", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", testId: `skill-action-details-${item.id}`, onActivate: () => onDetails(item.id), children: t("skillsview.details", { defaultValue: "Details" }) })] })) : enabled ? (_jsxs(_Fragment, { children: [_jsx(MarketplaceActionButton, { id: `skill-${item.id}-disable`, label: `Disable ${item.name}`, description: `Disable the ${item.name} skill`, variant: "outline", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", disabled: isToggling, testId: `skill-action-disable-${item.id}`, onActivate: () => onDisable(item.id, item.name), children: isToggling
                                 ? t("skillsview.updating", { defaultValue: "Updating..." })
-                                : t("skillsview.Disable", { defaultValue: "Disable" }) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", onClick: () => onCopy(item.id, item.name), disabled: isCopying, "data-testid": `skill-action-copy-${item.id}`, children: isCopying
+                                : t("skillsview.Disable", { defaultValue: "Disable" }) }), _jsx(MarketplaceActionButton, { id: `skill-${item.id}-copy`, label: `Copy ${item.name} SKILL.md`, description: `Copy the SKILL.md source for ${item.name}`, variant: "ghost", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", disabled: isCopying, testId: `skill-action-copy-${item.id}`, onActivate: () => onCopy(item.id, item.name), children: isCopying
                                 ? t("skillsview.copying", { defaultValue: "Copying..." })
                                 : t("skillsview.copySkillMd", {
                                     defaultValue: "Copy SKILL.md",
-                                }) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", onClick: () => onDetails(item.id), "data-testid": `skill-action-details-${item.id}`, children: t("skillsview.details", { defaultValue: "Details" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "default", size: "sm", className: "h-8 px-3 text-xs-tight font-bold tracking-wide shadow-sm", onClick: () => onEnable(item.id, item.name), disabled: isToggling, "data-testid": `skill-action-enable-${item.id}`, children: isToggling
+                                }) }), _jsx(MarketplaceActionButton, { id: `skill-${item.id}-details`, label: `${item.name} details`, description: `Show details for ${item.name}`, variant: "ghost", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", testId: `skill-action-details-${item.id}`, onActivate: () => onDetails(item.id), children: t("skillsview.details", { defaultValue: "Details" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(MarketplaceActionButton, { id: `skill-${item.id}-enable`, label: `Enable ${item.name}`, description: `Enable the ${item.name} skill`, variant: "default", className: "h-8 px-3 text-xs-tight font-bold tracking-wide ", disabled: isToggling, testId: `skill-action-enable-${item.id}`, onActivate: () => onEnable(item.id, item.name), children: isToggling
                                 ? t("skillsview.updating", { defaultValue: "Updating..." })
-                                : t("skillsview.Enable", { defaultValue: "Enable" }) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", onClick: () => onCopy(item.id, item.name), disabled: isCopying, "data-testid": `skill-action-copy-${item.id}`, children: isCopying
+                                : t("skillsview.Enable", { defaultValue: "Enable" }) }), _jsx(MarketplaceActionButton, { id: `skill-${item.id}-copy`, label: `Copy ${item.name} SKILL.md`, description: `Copy the SKILL.md source for ${item.name}`, variant: "ghost", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", disabled: isCopying, testId: `skill-action-copy-${item.id}`, onActivate: () => onCopy(item.id, item.name), children: isCopying
                                 ? t("skillsview.copying", { defaultValue: "Copying..." })
                                 : t("skillsview.copySkillMd", {
                                     defaultValue: "Copy SKILL.md",
-                                }) }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", onClick: () => onDetails(item.id), "data-testid": `skill-action-details-${item.id}`, children: t("skillsview.details", { defaultValue: "Details" }) }), _jsx(Button, { variant: "destructive", size: "sm", className: "h-8 px-3 text-xs-tight font-bold tracking-wide shadow-sm", onClick: () => onUninstall(item.id, item.name), disabled: isUninstalling, "data-testid": `skill-action-uninstall-${item.id}`, children: isUninstalling
+                                }) }), _jsx(MarketplaceActionButton, { id: `skill-${item.id}-details`, label: `${item.name} details`, description: `Show details for ${item.name}`, variant: "ghost", className: "h-8 px-3 text-xs-tight font-bold tracking-wide", testId: `skill-action-details-${item.id}`, onActivate: () => onDetails(item.id), children: t("skillsview.details", { defaultValue: "Details" }) }), _jsx(MarketplaceActionButton, { id: `skill-${item.id}-uninstall`, label: `Uninstall ${item.name}`, description: `Uninstall the ${item.name} skill`, variant: "destructive", className: "h-8 px-3 text-xs-tight font-bold tracking-wide ", disabled: isUninstalling, testId: `skill-action-uninstall-${item.id}`, onActivate: () => onUninstall(item.id, item.name), children: isUninstalling
                                 ? t("skillsview.removing", { defaultValue: "Removing..." })
                                 : t("common.uninstall", { defaultValue: "Uninstall" }) })] })) })] }));
 }
@@ -82,16 +149,13 @@ export function InstallModal({ skills, skillsMarketplaceQuery, skillsMarketplace
                                 defaultValue: "Add skills from the marketplace or a GitHub repository.",
                             }) })] }), _jsx(AdminDialog.SegmentedTabList, { role: "tablist", "aria-label": t("skillsview.installSkillSource", {
                         defaultValue: "Install skill source",
-                    }), children: installTabs.map((t) => (_jsx(AdminDialog.SegmentedTab, { active: tab === t.id, role: "tab", id: `skills-install-tab-${t.id}`, "aria-selected": tab === t.id, "aria-controls": `skills-install-panel-${t.id}`, onClick: () => setTab(t.id), children: t.label }, t.id))) }), _jsxs("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: [tab === "search" && (_jsxs("div", { id: "skills-install-panel-search", role: "tabpanel", "aria-labelledby": "skills-install-tab-search", children: [_jsxs("div", { className: "flex gap-2 items-center mb-4", children: [_jsx(AdminInput, { type: "text", style: { flex: 1, minWidth: 200 }, placeholder: t("skillsview.searchByKeyword"), "aria-label": t("skillsview.searchByKeyword", {
+                    }), children: installTabs.map((installTab) => (_jsx(InstallSourceTab, { id: installTab.id, label: installTab.label, active: tab === installTab.id, onSelect: setTab }, installTab.id))) }), _jsxs("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: [tab === "search" && (_jsxs("div", { id: "skills-install-panel-search", role: "tabpanel", "aria-labelledby": "skills-install-tab-search", children: [_jsxs("div", { className: "flex gap-2 items-center mb-4", children: [_jsx(SkillSearchField, { value: skillsMarketplaceQuery, placeholder: t("skillsview.searchByKeyword"), ariaLabel: t("skillsview.searchByKeyword", {
                                                 defaultValue: "Search skills marketplace",
-                                            }), value: skillsMarketplaceQuery, onChange: (e) => setState("skillsMarketplaceQuery", e.target.value), onKeyDown: (e) => {
-                                                if (e.key === "Enter")
-                                                    void searchSkillsMarketplace();
-                                            } }), _jsx(Button, { variant: "default", size: "sm", type: "button", className: "plugins-game-chip", style: { minHeight: 36, padding: "0 16px", fontWeight: 700 }, onClick: () => searchSkillsMarketplace(), disabled: skillsMarketplaceLoading, children: skillsMarketplaceLoading
+                                            }), onChange: (next) => setState("skillsMarketplaceQuery", next), onSubmit: () => void searchSkillsMarketplace() }), _jsx(SkillInstallSubmitButton, { id: "skill-install-search-submit", label: "Search skills", description: "Search the skills marketplace", disabled: skillsMarketplaceLoading, onActivate: () => void searchSkillsMarketplace(), children: skillsMarketplaceLoading
                                                 ? t("common.searching", {
                                                     defaultValue: "Searching...",
                                                 })
-                                                : t("common.search", { defaultValue: "Search" }) })] }), skillsMarketplaceError && (_jsx("div", { role: "alert", className: "mb-3 rounded-lg border border-danger/35 bg-danger/10 p-2.5 text-xs text-danger", children: skillsMarketplaceError })), skillsMarketplaceResults.length === 0 ? (_jsx("div", { className: "text-center py-12", children: _jsx("div", { className: "text-xs uppercase tracking-[0.1em] text-muted", children: t("skillsview.searchAboveToDiscoverSkills", {
+                                                : t("common.search", { defaultValue: "Search" }) })] }), skillsMarketplaceError && (_jsx("div", { role: "alert", className: "mb-3 rounded-sm border border-danger/35 bg-danger/10 p-2.5 text-xs text-danger", children: skillsMarketplaceError })), skillsMarketplaceResults.length === 0 ? (_jsx("div", { className: "text-center py-12", children: _jsx("div", { className: "text-xs uppercase tracking-[0.1em] text-muted", children: t("skillsview.searchAboveToDiscoverSkills", {
                                             defaultValue: "Search above to discover skills.",
                                         }) }) })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "text-xs-tight text-muted mb-1", children: [skillsMarketplaceResults.length, " ", t("skillsview.result"), skillsMarketplaceResults.length !== 1 ? "s" : ""] }), skillsMarketplaceResults.map((item) => {
                                             const installedSkill = skills.find((s) => s.id === item.id) ?? null;
@@ -100,15 +164,12 @@ export function InstallModal({ skills, skillsMarketplaceQuery, skillsMarketplace
                                         defaultValue: "GitHub Repository URL",
                                     }) }), _jsx("div", { className: "mb-3 text-xs-tight text-muted", children: t("skillsview.githubRepositoryDesc", {
                                         defaultValue: "Paste a full GitHub repository URL to install a skill directly.",
-                                    }) }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(AdminInput, { type: "text", style: { flex: 1 }, placeholder: "https://github.com/org/repo", "aria-label": t("skillsview.githubRepositoryUrl", {
+                                    }) }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(SkillUrlField, { value: skillsMarketplaceManualGithubUrl, ariaLabel: t("skillsview.githubRepositoryUrl", {
                                                 defaultValue: "GitHub Repository URL",
-                                            }), value: skillsMarketplaceManualGithubUrl, onChange: (e) => setState("skillsMarketplaceManualGithubUrl", e.target.value), onKeyDown: (e) => {
-                                                if (e.key === "Enter")
-                                                    void installSkillFromGithubUrl();
-                                            } }), _jsx(Button, { variant: "default", size: "sm", type: "button", className: "plugins-game-chip", style: { minHeight: 36, padding: "0 16px", fontWeight: 700 }, onClick: () => installSkillFromGithubUrl(), disabled: skillsMarketplaceAction === "install:manual" ||
-                                                !skillsMarketplaceManualGithubUrl.trim(), children: skillsMarketplaceAction === "install:manual"
+                                            }), onChange: (next) => setState("skillsMarketplaceManualGithubUrl", next), onSubmit: () => void installSkillFromGithubUrl() }), _jsx(SkillInstallSubmitButton, { id: "skill-install-url-submit", label: "Install from GitHub URL", description: "Install a skill from the entered GitHub repository URL", disabled: skillsMarketplaceAction === "install:manual" ||
+                                                !skillsMarketplaceManualGithubUrl.trim(), onActivate: () => void installSkillFromGithubUrl(), children: skillsMarketplaceAction === "install:manual"
                                                 ? t("common.installing", {
                                                     defaultValue: "Installing...",
                                                 })
-                                                : t("common.install") })] }), skillsMarketplaceError && (_jsx("div", { role: "alert", className: "mt-3 rounded-lg border border-danger/35 bg-danger/10 p-2.5 text-xs text-danger", children: skillsMarketplaceError }))] }))] })] }) }));
+                                                : t("common.install") })] }), skillsMarketplaceError && (_jsx("div", { role: "alert", className: "mt-3 rounded-sm border border-danger/35 bg-danger/10 p-2.5 text-xs text-danger", children: skillsMarketplaceError }))] }))] })] }) }));
 }

package/components/pages/tutorial/TutorialNarrator.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Speaks the current tour frame aloud through the app's REAL voice pipeline
+ * (the same {@link useVoiceChat} engine that voices assistant replies — cloud /
+ * local TTS, with the browser voice as its fallback), not a separate browser
+ * hack. Mounted only while the tour is active, so the engine isn't spun up when
+ * idle. Renders nothing; `utteranceId` changing (re)speaks `text`.
+ */
+export declare function TutorialNarrator({ utteranceId, text, muted, }: {
+    utteranceId: string;
+    text: string;
+    muted: boolean;
+}): null;
+//# sourceMappingURL=TutorialNarrator.d.ts.map

package/components/pages/tutorial/TutorialNarrator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TutorialNarrator.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/tutorial/TutorialNarrator.tsx"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,IAAI,EACJ,KAAK,GACN,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB,GAAG,IAAI,CA+BP"}

package/components/pages/tutorial/TutorialNarrator.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { useVoiceChat } from "../../../hooks/useVoiceChat.js";
+import { useApp } from "../../../state/index.js";
+import { useVoiceConfig } from "../../../voice/useVoiceConfig.js";
+/**
+ * Speaks the current tour frame aloud through the app's REAL voice pipeline
+ * (the same {@link useVoiceChat} engine that voices assistant replies — cloud /
+ * local TTS, with the browser voice as its fallback), not a separate browser
+ * hack. Mounted only while the tour is active, so the engine isn't spun up when
+ * idle. Renders nothing; `utteranceId` changing (re)speaks `text`.
+ */
+export function TutorialNarrator({ utteranceId, text, muted, }) {
+    const { uiLanguage, elizaCloudVoiceProxyAvailable } = useApp();
+    const { voiceConfig, voiceBootstrapTick } = useVoiceConfig(uiLanguage);
+    const { queueAssistantSpeech, stopSpeaking, unlockAudio } = useVoiceChat({
+        voiceConfig,
+        cloudConnected: elizaCloudVoiceProxyAvailable,
+        // Output-only: the chat overlay's own capture owns the mic.
+        interruptOnSpeech: false,
+        onTranscript: () => { },
+    });
+    React.useEffect(() => {
+        if (muted || !text) {
+            stopSpeaking();
+            return;
+        }
+        if (voiceBootstrapTick === 0)
+            return; // voice config not loaded yet
+        unlockAudio?.();
+        queueAssistantSpeech(utteranceId, text, true, { replace: true });
+        return () => stopSpeaking();
+    }, [
+        utteranceId,
+        text,
+        muted,
+        voiceBootstrapTick,
+        queueAssistantSpeech,
+        stopSpeaking,
+        unlockAudio,
+    ]);
+    return null;
+}

package/components/pages/tutorial/TutorialOverlay.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export declare function TutorialOverlay(): React.ReactElement | null;
+//# sourceMappingURL=TutorialOverlay.d.ts.map

package/components/pages/tutorial/TutorialOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TutorialOverlay.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/tutorial/TutorialOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6C/B,wBAAgB,eAAe,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAwK3D"}