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

package/components/pages/relationships/relationships-utils.js

@@ -0,0 +1,105 @@
+function toTimestamp(value) {
+    if (!value)
+        return 0;
+    const timestamp = Date.parse(value);
+    return Number.isFinite(timestamp) ? timestamp : 0;
+}
+export function buildRelationshipsGraphQuery(search, platform, limit = 200) {
+    return {
+        search: search.trim() || undefined,
+        platform: platform === "all" ? undefined : platform,
+        limit,
+    };
+}
+export function sortPeople(people) {
+    return [...people].sort((left, right) => {
+        if (left.isOwner !== right.isOwner) {
+            return left.isOwner ? -1 : 1;
+        }
+        const timeDiff = toTimestamp(right.lastInteractionAt) -
+            toTimestamp(left.lastInteractionAt);
+        if (timeDiff !== 0)
+            return timeDiff;
+        const relationshipDiff = right.relationshipCount - left.relationshipCount;
+        if (relationshipDiff !== 0)
+            return relationshipDiff;
+        return left.displayName.localeCompare(right.displayName);
+    });
+}
+export function summarizeHandles(person) {
+    const handles = person.identities.flatMap((identity) => identity.handles.map((handle) => `@${handle.handle}`));
+    return handles.slice(0, 3).join(", ");
+}
+export function platformOptions(snapshot) {
+    if (!snapshot)
+        return [];
+    return [...new Set(snapshot.people.flatMap((person) => person.platforms))]
+        .filter((platform) => platform.trim().length > 0)
+        .sort((left, right) => left.localeCompare(right));
+}
+export function topContacts(person) {
+    const rows = [];
+    if (person.emails[0])
+        rows.push({ label: "Email", value: person.emails[0] });
+    if (person.phones[0])
+        rows.push({ label: "Phone", value: person.phones[0] });
+    if (person.websites[0])
+        rows.push({ label: "Website", value: person.websites[0] });
+    if (person.preferredCommunicationChannel) {
+        rows.push({
+            label: "Preferred channel",
+            value: person.preferredCommunicationChannel,
+        });
+    }
+    return rows;
+}
+export function profileSourceLabel(source) {
+    switch (source) {
+        case "client_chat":
+            return "App chat";
+        case "elizacloud":
+            return "Eliza Cloud";
+        case "twitter":
+            return "X / Twitter";
+        default:
+            return source
+                .replace(/_/g, " ")
+                .replace(/\b\w/g, (match) => match.toUpperCase());
+    }
+}
+export function profilePrimaryValue(person, source) {
+    const profile = person.profiles.find((entry) => entry.source === source);
+    if (!profile) {
+        return null;
+    }
+    return (profile.displayName ??
+        profile.handle ??
+        profile.userId ??
+        person.displayName);
+}
+export function personLabel(graph, entityId) {
+    if (!graph)
+        return entityId;
+    for (const person of graph.people) {
+        if (person.memberEntityIds.includes(entityId)) {
+            return person.displayName;
+        }
+    }
+    return entityId;
+}
+export function evidenceSummary(candidate) {
+    const parts = [];
+    const { platform, handle, notes, identityIds } = candidate.evidence;
+    if (platform && handle) {
+        parts.push(`${platform}:${handle}`);
+    }
+    else if (platform) {
+        parts.push(platform);
+    }
+    if (notes)
+        parts.push(notes);
+    if (identityIds && identityIds.length > 0) {
+        parts.push(`${identityIds.length} identities`);
+    }
+    return parts.join(" · ") || "No evidence";
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Skill detail panel — edit modal and companion modal view.
+ *
+ * Extracted from SkillsView.tsx to keep individual files under ~500 LOC.
+ */
+export declare function EditSkillModal({ skillId, skillName, onClose, onSaved, }: {
+    skillId: string;
+    skillName: string;
+    onClose: () => void;
+    onSaved: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SkillsModalView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skill-detail-panel.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Skill detail panel — edit modal and companion modal view.
+ *
+ * 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 { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../api/index.js";
+import { useApp } from "../../state/index.js";
+import { InstallModal } from "./skill-marketplace.js";
+const BINANCE_SKILL_IDS = new Set([
+    "binance-crypto-market-rank",
+    "binance-meme-rush",
+    "binance-query-address-info",
+    "binance-query-token-audit",
+    "binance-query-token-info",
+    "binance-trading-signal",
+]);
+/* ── Edit Skill Modal ──────────────────────────────────────────────── */
+export function EditSkillModal({ skillId, skillName, onClose, onSaved, }) {
+    const { t } = useApp();
+    const [content, setContent] = useState("");
+    const [originalContent, setOriginalContent] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState("");
+    const [saveSuccess, setSaveSuccess] = useState(false);
+    const loadSource = useCallback(async () => {
+        setLoading(true);
+        setError("");
+        try {
+            const res = await client.getSkillSource(skillId);
+            setContent(res.content);
+            setOriginalContent(res.content);
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t("skillsview.failedToLoadSkillSource", {
+                    defaultValue: "Failed to load skill source",
+                }));
+        }
+        setLoading(false);
+    }, [skillId, t]);
+    useEffect(() => {
+        void loadSource();
+    }, [loadSource]);
+    const hasChanges = content !== originalContent;
+    const handleSave = async () => {
+        setSaving(true);
+        setError("");
+        setSaveSuccess(false);
+        try {
+            await client.saveSkillSource(skillId, content);
+            setOriginalContent(content);
+            setSaveSuccess(true);
+            onSaved();
+            setTimeout(() => setSaveSuccess(false), 2000);
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t("skillsview.failedToSave", {
+                    defaultValue: "Failed to save",
+                }));
+        }
+        setSaving(false);
+    };
+    const handleKeyDown = (e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+            e.preventDefault();
+            if (hasChanges && !saving)
+                void handleSave();
+        }
+    };
+    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", {
+                                        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
+                                    ? `${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
+                                        ? t("skillsview.discard", { defaultValue: "Discard" })
+                                        : t("common.close") }), _jsx(Button, { 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
+                                        ? t("common.saving")
+                                        : saveSuccess
+                                            ? t("common.saved")
+                                            : t("common.save") })] })] })] }) }));
+}
+/* ── Companion Modal View (sidebar + detail, reuses plugins-game-* CSS) ── */
+export function SkillsModalView() {
+    const { skills, skillToggleAction, loadSkills, handleSkillToggle, handleDeleteSkill, refreshSkills, setState, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableMarketplaceSkill, disableMarketplaceSkill, copyMarketplaceSkillSource, t, } = useApp();
+    const [selectedId, setSelectedId] = useState(null);
+    const [filterText, setFilterText] = useState("");
+    const [filterTab, setFilterTab] = useState("all");
+    const [editingSkill, setEditingSkill] = useState(null);
+    const [installModalOpen, setInstallModalOpen] = useState(false);
+    useEffect(() => {
+        void loadSkills();
+    }, [loadSkills]);
+    const filtered = useMemo(() => {
+        const searchLower = filterText.toLowerCase();
+        return skills.filter((s) => {
+            if (filterTab === "on" && !s.enabled)
+                return false;
+            if (filterTab === "off" && s.enabled)
+                return false;
+            if (filterTab === "binance" && !BINANCE_SKILL_IDS.has(s.id))
+                return false;
+            if (searchLower &&
+                !s.name.toLowerCase().includes(searchLower) &&
+                !(s.description ?? "").toLowerCase().includes(searchLower))
+                return false;
+            return true;
+        });
+    }, [skills, filterText, filterTab]);
+    const effectiveSelectedId = selectedId && filtered.find((s) => s.id === selectedId)
+        ? selectedId
+        : (filtered[0]?.id ?? null);
+    const selected = effectiveSelectedId
+        ? (skills.find((s) => s.id === effectiveSelectedId) ?? null)
+        : null;
+    const tabs = [
+        {
+            key: "all",
+            label: `${t("common.all", { defaultValue: "All" })} (${skills.length})`,
+        },
+        {
+            key: "on",
+            label: `${t("common.on")} (${skills.filter((s) => s.enabled).length})`,
+        },
+        {
+            key: "off",
+            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", {
+                            defaultValue: "Installed skills",
+                        }), children: filtered.length === 0 ? (_jsx("div", { className: "plugins-game-list-empty", children: t("skillsview.NoSkillsFound", {
+                                defaultValue: "No skills found",
+                            }) })) : (filtered.map((skill) => (_jsxs(Button, { variant: "ghost", type: "button", role: "option", "aria-selected": effectiveSelectedId === skill.id, className: `plugins-game-card${effectiveSelectedId === skill.id ? " is-selected" : ""}${!skill.enabled ? " is-disabled" : ""} h-auto`, onClick: () => setSelectedId(skill.id), children: [_jsx("div", { className: "plugins-game-card-icon-shell", children: _jsx("span", { className: "plugins-game-card-icon", children: skill.name.charAt(0).toUpperCase() }) }), _jsxs("div", { className: "plugins-game-card-body", children: [_jsx("div", { className: "plugins-game-card-name", children: skill.name }), _jsx("div", { className: "plugins-game-card-meta", children: _jsx("span", { className: `plugins-game-badge ${skill.enabled ? "is-on" : "is-off"}`, children: skill.enabled ? t("common.on") : t("common.off") }) })] })] }, skill.id)))) })] }), _jsx("div", { className: "plugins-game-detail-panel", children: selected ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "plugins-game-detail-head", children: _jsxs("div", { className: "plugins-game-detail-title-row", children: [_jsx("div", { className: "plugins-game-detail-icon-shell", children: _jsx("span", { className: "plugins-game-detail-icon", children: selected.name.charAt(0).toUpperCase() }) }), _jsx("div", { className: "plugins-game-detail-main", children: _jsx("div", { className: "plugins-game-detail-name", children: selected.name }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", className: `plugins-game-toggle ${selected.enabled ? "is-on" : "is-off"}`, onClick: () => handleSkillToggle(selected.id, !selected.enabled), disabled: skillToggleAction === selected.id, children: skillToggleAction === selected.id
+                                            ? "..."
+                                            : selected.enabled
+                                                ? t("common.on")
+                                                : 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", {
+                                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);
+                }, setState: setState, onClose: () => setInstallModalOpen(false) }))] }));
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Skill marketplace — search/install modal and marketplace result cards.
+ *
+ * Extracted from SkillsView.tsx to keep individual files under ~500 LOC.
+ */
+import type { SkillInfo, SkillMarketplaceResult } from "../../api";
+import { useApp } from "../../state";
+export declare function MarketplaceCard({ item, installedSkill, skillsMarketplaceAction, onInstall, onUninstall, onEnable, onDisable, onCopy, onDetails, }: {
+    item: SkillMarketplaceResult;
+    installedSkill: SkillInfo | null;
+    skillsMarketplaceAction: string;
+    onInstall: (item: SkillMarketplaceResult) => void;
+    onUninstall: (skillId: string, name: string) => void;
+    onEnable: (skillId: string, name: string) => void;
+    onDisable: (skillId: string, name: string) => void;
+    onCopy: (skillId: string, name: string) => void;
+    onDetails: (skillId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InstallModal({ skills, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableSkill, disableSkill, copySkillSource, showSkillDetails, setState, onClose, }: {
+    skills: SkillInfo[];
+    skillsMarketplaceQuery: string;
+    skillsMarketplaceResults: SkillMarketplaceResult[];
+    skillsMarketplaceError: string;
+    skillsMarketplaceLoading: boolean;
+    skillsMarketplaceAction: string;
+    skillsMarketplaceManualGithubUrl: string;
+    searchSkillsMarketplace: () => Promise<void>;
+    installSkillFromMarketplace: (item: SkillMarketplaceResult) => Promise<void>;
+    uninstallMarketplaceSkill: (skillId: string, name: string) => Promise<void>;
+    installSkillFromGithubUrl: () => Promise<void>;
+    enableSkill: (skillId: string, name: string) => Promise<void>;
+    disableSkill: (skillId: string, name: string) => Promise<void>;
+    copySkillSource: (skillId: string, name: string) => Promise<void>;
+    showSkillDetails: (skillId: string) => void;
+    setState: ReturnType<typeof useApp>["setState"];
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skill-marketplace.d.ts.map

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

@@ -0,0 +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"}

package/components/pages/skill-marketplace.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Skill marketplace — search/install modal and marketplace result cards.
+ *
+ * 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 { useApp } from "../../state/index.js";
+/* ── Marketplace Result Card ────────────────────────────────────────── */
+export function MarketplaceCard({ item, installedSkill, skillsMarketplaceAction, onInstall, onUninstall, onEnable, onDisable, onCopy, onDetails, }) {
+    const { t } = useApp();
+    const isInstalling = skillsMarketplaceAction === `install:${item.id}`;
+    const isUninstalling = skillsMarketplaceAction === `uninstall:${item.id}`;
+    const isToggling = skillsMarketplaceAction === `enable:${item.id}` ||
+        skillsMarketplaceAction === `disable:${item.id}`;
+    const isCopying = skillsMarketplaceAction === `copy:${item.id}`;
+    const sourceLabel = item.repository || item.slug || item.id;
+    const installed = Boolean(installedSkill);
+    const enabled = installed && installedSkill?.enabled === true;
+    const stateBadge = !installed
+        ? {
+            label: t("skillsview.statusNotInstalled", {
+                defaultValue: "Not installed",
+            }),
+            tone: "muted",
+        }
+        : enabled
+            ? {
+                label: t("common.active", { defaultValue: "Enabled" }),
+                tone: "success",
+            }
+            : {
+                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"
+                                    ? "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
+                                ? 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("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.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
+                                ? 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.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
+                                ? t("skillsview.removing", { defaultValue: "Removing..." })
+                                : t("common.uninstall", { defaultValue: "Uninstall" }) })] })) })] }));
+}
+export function InstallModal({ skills, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableSkill, disableSkill, copySkillSource, showSkillDetails, setState, onClose, }) {
+    const { t } = useApp();
+    const [tab, setTab] = useState("search");
+    const installTabs = [
+        {
+            id: "search",
+            label: t("skillsview.marketplaceTab", {
+                defaultValue: "Marketplace",
+            }),
+        },
+        {
+            id: "url",
+            label: t("skillsview.githubUrlTab", {
+                defaultValue: "GitHub URL",
+            }),
+        },
+    ];
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, children: _jsxs(AdminDialogContent, { container: typeof document !== "undefined" ? document.body : undefined, className: "max-h-[80vh] max-w-2xl", children: [_jsxs(AdminDialogHeader, { children: [_jsx(DialogTitle, { className: "text-sm font-extrabold uppercase tracking-[0.14em]", children: t("skillsview.installSkillTitle", {
+                                defaultValue: "Install Skill",
+                            }) }), _jsx(DialogDescription, { className: "mt-0.5 text-xs-tight text-muted", children: t("skillsview.installSkillDescription", {
+                                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", {
+                                                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
+                                                ? 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", {
+                                            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;
+                                            return (_jsx(MarketplaceCard, { item: item, installedSkill: installedSkill, skillsMarketplaceAction: skillsMarketplaceAction, onInstall: installSkillFromMarketplace, onUninstall: uninstallMarketplaceSkill, onEnable: enableSkill, onDisable: disableSkill, onCopy: copySkillSource, onDetails: showSkillDetails }, item.id));
+                                        })] }))] })), tab === "url" && (_jsxs("div", { id: "skills-install-panel-url", role: "tabpanel", "aria-labelledby": "skills-install-tab-url", children: [_jsx("div", { className: "mb-1 text-xs font-semibold text-txt", children: t("skillsview.githubRepositoryUrl", {
+                                        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", {
+                                                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"
+                                                ? 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 }))] }))] })] }) }));
+}

package/components/pages/useBrowserWorkspaceWalletBridge.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Browser workspace wallet bridge — hook + pure helpers.
+ *
+ * Iframes embedded by the browser workspace use window.postMessage to ask the
+ * host for wallet state and to request signing / transactions. This hook owns
+ * the origin verification, per-tab chain state, request dispatch, and the
+ * "ready" broadcast when state changes or an iframe loads.
+ *
+ * The caller passes in iframe refs, current tabs, and the wallet state it
+ * maintains; the hook returns a single `postBrowserWalletReady` function used
+ * for per-iframe onLoad and any other point-in-time broadcasts.
+ */
+import { type RefObject } from "react";
+import { type BrowserWorkspaceTab } from "../../api";
+import { type BrowserWorkspaceWalletState } from "./browser-workspace-wallet";
+/**
+ * Verify a postMessage origin against the tab's known URL.
+ *
+ * With `allow-same-origin` in the iframe sandbox a malicious page could
+ * present the parent's origin. We mitigate by checking the message origin
+ * against the URL the user or agent explicitly navigated to; if they don't
+ * match we refuse to respond.
+ */
+export declare function resolveBrowserWorkspaceMessageOrigin(origin: string, tabUrl?: string): string | null;
+export declare function normalizeBrowserWorkspaceTxRequest(params: unknown, fallbackChainId: number): {
+    broadcast: boolean;
+    chainId: number;
+    data?: string;
+    description?: string;
+    to: string;
+    value: string;
+} | null;
+interface UseBrowserWorkspaceWalletBridgeOptions {
+    iframeRefs: RefObject<Map<string, HTMLIFrameElement | null>>;
+    workspaceTabs: BrowserWorkspaceTab[];
+    walletState: BrowserWorkspaceWalletState;
+    loadWalletState: () => Promise<BrowserWorkspaceWalletState>;
+}
+export declare function useBrowserWorkspaceWalletBridge({ iframeRefs, workspaceTabs, walletState, loadWalletState, }: UseBrowserWorkspaceWalletBridgeOptions): {
+    postBrowserWalletReady: (tab: BrowserWorkspaceTab, state: BrowserWorkspaceWalletState) => void;
+};
+export {};
+//# sourceMappingURL=useBrowserWorkspaceWalletBridge.d.ts.map

package/components/pages/useBrowserWorkspaceWalletBridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBrowserWorkspaceWalletBridge.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/useBrowserWorkspaceWalletBridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,mBAAmB,EAAU,MAAM,WAAW,CAAC;AAC7D,OAAO,EAKL,KAAK,2BAA2B,EAEjC,MAAM,4BAA4B,CAAC;AAepC;;;;;;;GAOG;AACH,wBAAgB,oCAAoC,CAClD,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GACd,MAAM,GAAG,IAAI,CAUf;AAuBD,wBAAgB,kCAAkC,CAChD,MAAM,EAAE,OAAO,EACf,eAAe,EAAE,MAAM,GACtB;IACD,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAuBP;AAqRD,UAAU,sCAAsC;IAC9C,UAAU,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC,CAAC,CAAC;IAC7D,aAAa,EAAE,mBAAmB,EAAE,CAAC;IACrC,WAAW,EAAE,2BAA2B,CAAC;IACzC,eAAe,EAAE,MAAM,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC7D;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,UAAU,EACV,aAAa,EACb,WAAW,EACX,eAAe,GAChB,EAAE,sCAAsC,GAAG;IAC1C,sBAAsB,EAAE,CACtB,GAAG,EAAE,mBAAmB,EACxB,KAAK,EAAE,2BAA2B,KAC/B,IAAI,CAAC;CACX,CAwFA"}