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

package/components/pages/SettingsView.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+// Importing the cloud settings barrel registers the Cloud group + the cloud
+// settings sections (side effect), then exposes the extra-group list the
+// grouping below reads — so the cloud sections render whenever Settings mounts.
+import { listExtraSettingsGroups } from "../../cloud/settings/index.js";
+import { useMediaQuery } from "../../hooks/useMediaQuery.js";
+import { ContentLayout } from "../../layouts/content-layout/index.js";
+import { cn } from "../../lib/utils.js";
+import { useApp } from "../../state/index.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { SettingsGroup, SettingsRow, SettingsStack, } from "../settings/settings-layout.js";
+import { getAllSettingsSections, readSettingsHashSection, replaceSettingsHash, SECTION_HUE_MEDALLION_CLASS, SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER, settingsSectionLabel, settingsSectionTitle, } from "../settings/settings-sections.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
+/**
+ * Group sections for display. Built-in groups keep their pinned order + labels;
+ * any extra group a section declares (e.g. the `cloud` group) is interleaved by
+ * its registered order with a registered label. A section whose group is neither
+ * built-in nor registered falls into an "Other" bucket so it is never dropped.
+ */
+function groupSections(sections) {
+    const extra = listExtraSettingsGroups();
+    // Built-in groups order by their position in the pinned list (0,1,2). Extra
+    // groups slot between them by their declared order (e.g. cloud at 1.5 between
+    // System=1 and Security=2).
+    const orderOf = new Map();
+    const labels = new Map();
+    SETTINGS_GROUP_ORDER.forEach((group, index) => {
+        orderOf.set(group, index);
+        labels.set(group, SETTINGS_GROUP_LABEL[group]);
+    });
+    for (const group of extra) {
+        orderOf.set(group.id, group.order);
+        labels.set(group.id, group.label);
+    }
+    const buckets = new Map();
+    for (const section of sections) {
+        const bucket = buckets.get(section.group);
+        if (bucket)
+            bucket.push(section);
+        else
+            buckets.set(section.group, [section]);
+    }
+    const FALLBACK_ORDER = Number.MAX_SAFE_INTEGER;
+    return [...buckets.entries()]
+        .map(([group, items]) => ({
+        group,
+        label: labels.get(group) ?? "Other",
+        items,
+        order: orderOf.get(group) ?? FALLBACK_ORDER,
+    }))
+        .filter((entry) => entry.items.length > 0)
+        .sort((a, b) => a.order - b.order)
+        .map(({ group, label, items }) => ({ group, label, items }));
+}
+/** Status chip shown on a nav row when cheap to derive. */
+function sectionChip(section, walletEnabled) {
+    if (section.id === "wallet-rpc")
+        return walletEnabled ? "On" : null;
+    return null;
+}
+function Chip({ children }) {
+    return (_jsx("span", { className: "inline-flex items-center rounded-full bg-accent/12 px-2 py-0.5 text-[11px] font-medium text-accent ring-1 ring-accent/20", children: children }));
+}
+/**
+ * One navigation entry. Renders as a tappable list row on mobile and a compact
+ * rail item on desktop, sharing a single agent-surface registration so the
+ * agent can open any section by id from chat.
+ */
+function SettingsNavItem({ section, label, chip, active, variant, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `section-${section.id}`,
+        role: "card",
+        label,
+        group: "settings-sections",
+        description: `Open the ${label} settings section`,
+        onActivate: () => onSelect(section.id),
+    });
+    const Icon = section.icon;
+    if (variant === "list") {
+        return (_jsx(SettingsRow, { icon: Icon, iconClassName: SECTION_HUE_MEDALLION_CLASS[section.hue], label: label, onClick: () => onSelect(section.id), buttonRef: ref, buttonProps: agentProps, trailing: chip ? _jsx(Chip, { children: chip }) : undefined, chevron: !chip }));
+    }
+    return (_jsxs("button", { ref: ref, type: "button", onClick: () => onSelect(section.id), "aria-current": active ? "page" : undefined, className: cn("flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm transition-colors", active
+            ? "bg-accent/12 font-medium text-accent"
+            : "text-txt hover:bg-surface"), ...agentProps, children: [_jsx("span", { className: cn("flex h-7 w-7 shrink-0 items-center justify-center rounded-md", active
+                    ? "bg-accent/15 text-accent"
+                    : SECTION_HUE_MEDALLION_CLASS[section.hue]), children: _jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), chip ? _jsx(Chip, { children: chip }) : null] }));
+}
+function SectionBackButton({ onBack }) {
+    const { ref, agentProps } = useAgentElement({
+        id: "section-back",
+        role: "button",
+        label: "Back to Settings",
+        description: "Return to the settings hub",
+        onActivate: onBack,
+    });
+    return (_jsxs("button", { ref: ref, type: "button", onClick: onBack, className: "-mx-2 inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-muted transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40", ...agentProps, children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Settings"] }));
+}
+/** The active section's body: optional back, header (icon + title), content. */
+function SettingsSectionContent({ section, t, onBack, }) {
+    const Component = section.Component;
+    const Icon = section.icon;
+    const title = settingsSectionTitle(section, t);
+    return (_jsxs("div", { id: section.id, children: [onBack ? (_jsx("div", { className: "mb-2.5", children: _jsx(SectionBackButton, { onBack: onBack }) })) : null, _jsxs("div", { className: "mb-3 flex items-center gap-3", children: [_jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-md", SECTION_HUE_MEDALLION_CLASS[section.hue]), children: _jsx(Icon, { className: "h-5 w-5", "aria-hidden": true }) }), _jsx("h1", { className: "text-xl font-semibold tracking-tight text-txt-strong", children: title })] }), _jsx(PagePanel, { variant: "section", children: _jsx("div", { className: cn("p-4 sm:p-5", section.bodyClassName), children: _jsx(Component, {}) }) })] }));
+}
+function MobileHub({ grouped, t, walletEnabled, onSelect, }) {
+    return (_jsxs("div", { className: "w-full pb-32", children: [_jsx("h1", { className: "mb-4 text-2xl font-semibold tracking-tight text-txt-strong", children: t("nav.settings", { defaultValue: "Settings" }) }), _jsx(SettingsStack, { children: grouped.map(({ group, label, items }) => (_jsx(SettingsGroup, { title: label, children: items.map((section) => (_jsx(SettingsNavItem, { section: section, label: settingsSectionLabel(section, t), chip: sectionChip(section, walletEnabled), active: false, variant: "list", onSelect: onSelect }, section.id))) }, group))) })] }));
+}
+function DesktopLayout({ grouped, t, walletEnabled, activeId, activeSection, onSelect, }) {
+    return (_jsxs("div", { className: "flex w-full gap-7 pb-32", children: [_jsx("nav", { className: "w-60 shrink-0", "aria-label": "Settings sections", children: _jsxs("div", { className: "sticky top-2 space-y-5", children: [_jsx("h1", { className: "px-2.5 text-lg font-semibold tracking-tight text-txt-strong", children: t("nav.settings", { defaultValue: "Settings" }) }), grouped.map(({ group, label, items }) => (_jsxs("div", { children: [_jsx("h2", { className: "mb-1 px-2.5 text-xs font-medium text-muted", children: label }), _jsx("div", { className: "space-y-0.5", children: items.map((section) => (_jsx(SettingsNavItem, { section: section, label: settingsSectionLabel(section, t), chip: sectionChip(section, walletEnabled), active: section.id === activeId, variant: "rail", onSelect: onSelect }, section.id))) })] }, group)))] }) }), _jsx("div", { className: "min-w-0 flex-1", children: activeSection ? (_jsx(SettingsSectionContent, { section: activeSection, t: t })) : null })] }));
+}
+export function SettingsView({ inModal, initialSection, } = {}) {
+    const { t, loadPlugins, walletEnabled } = useApp();
+    const isDesktop = useMediaQuery("(min-width: 1024px)");
+    const [activeSection, setActiveSection] = useState(() => initialSection ?? readSettingsHashSection());
+    const visibleSections = useMemo(() => {
+        return getAllSettingsSections().filter((section) => {
+            if (section.id === "wallet-rpc" && walletEnabled === false)
+                return false;
+            return true;
+        });
+    }, [walletEnabled]);
+    const visibleSectionIds = useMemo(() => new Set(visibleSections.map((section) => section.id)), [visibleSections]);
+    const grouped = useMemo(() => groupSections(visibleSections), [visibleSections]);
+    useEffect(() => {
+        void loadPlugins();
+    }, [loadPlugins]);
+    const openSection = useCallback((sectionId) => {
+        setActiveSection(sectionId);
+        replaceSettingsHash(sectionId);
+    }, []);
+    const backToHub = useCallback(() => {
+        setActiveSection(null);
+        if (typeof window !== "undefined") {
+            window.history.replaceState(null, "", "#");
+        }
+    }, []);
+    useEffect(() => {
+        if (!initialSection)
+            return;
+        openSection(initialSection);
+    }, [initialSection, openSection]);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handleHashChange = () => {
+            const nextSection = readSettingsHashSection();
+            if (nextSection && visibleSectionIds.has(nextSection)) {
+                setActiveSection(nextSection);
+            }
+            else {
+                setActiveSection(null);
+            }
+        };
+        window.addEventListener("hashchange", handleHashChange);
+        return () => window.removeEventListener("hashchange", handleHashChange);
+    }, [visibleSectionIds]);
+    const activeSectionDef = activeSection && visibleSectionIds.has(activeSection)
+        ? (visibleSections.find((section) => section.id === activeSection) ??
+            null)
+        : null;
+    // Desktop keeps a section selected in the detail pane; mobile shows the
+    // grouped list until a row is tapped.
+    const desktopSection = activeSectionDef ?? visibleSections[0] ?? null;
+    return (_jsx(ShellViewAgentSurface, { viewId: "settings", children: _jsx(ContentLayout, { inModal: inModal, children: _jsx("div", { "data-testid": "settings-shell", children: isDesktop ? (_jsx(DesktopLayout, { grouped: grouped, t: t, walletEnabled: walletEnabled, activeId: desktopSection?.id ?? null, activeSection: desktopSection, onSelect: openSection })) : activeSectionDef ? (_jsx("div", { className: "w-full pb-32", children: _jsx(SettingsSectionContent, { section: activeSectionDef, t: t, onBack: backToHub }) })) : (_jsx(MobileHub, { grouped: grouped, t: t, walletEnabled: walletEnabled, onSelect: openSection })) }) }) }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkillsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SkillsView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAkHrE,wBAAgB,UAAU,CAAC,EACzB,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAGL"}

package/components/pages/SkillsView.js

@@ -0,0 +1,311 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Brain, Store } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { PageLayout } from "../../layouts/page-layout/page-layout.js";
+import { useApp } from "../../state/index.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 { SidebarContent } from "../composites/sidebar/sidebar-content.js";
+import { SidebarPanel } from "../composites/sidebar/sidebar-panel.js";
+import { SidebarScrollRegion } from "../composites/sidebar/sidebar-scroll-region.js";
+import { SkillSidebarItem } from "../composites/skills/skill-sidebar-item.js";
+import { AppPageSidebar } from "../shared/AppPageSidebar.js";
+import { Button } from "../ui/button.js";
+import { ConfirmDelete } from "../ui/confirm-delete.js";
+import { Input } from "../ui/input.js";
+import { StatusBadge } from "../ui/status-badge.js";
+import { Switch } from "../ui/switch.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
+import { EditSkillModal, SkillsModalView } from "./skill-detail-panel.js";
+import { InstallModal } from "./skill-marketplace.js";
+/* ── Agent-controllable child controls (hooks must stay at top level) ── */
+function SkillFilterTab({ tabKey, label, isActive, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `filter-${tabKey}`,
+        role: "tab",
+        label,
+        group: "skills-filter",
+        status: isActive ? "active" : "inactive",
+        description: `Filter the skills list to ${label}`,
+        onActivate: onSelect,
+    });
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "sm", type: "button", "aria-current": isActive ? "true" : undefined, className: `h-8 rounded-full border px-3 text-2xs font-bold tracking-[0.14em] ${isActive
+            ? "border-accent/30 bg-accent/10 text-txt"
+            : "border-border/45 text-muted hover:border-border/70 hover:bg-bg/35 hover:text-txt"}`, onClick: onSelect, ...agentProps, children: label }));
+}
+function SkillRowButton({ skill, active, enabled, icon, description, onLabel, offLabel, attentionLabel, onSelect, }) {
+    const { agentProps } = useAgentElement({
+        id: `skill-${skill.id}`,
+        role: "button",
+        label: skill.name,
+        group: "skills-list",
+        status: active ? "active" : enabled ? "enabled" : "disabled",
+        description: `Select the ${skill.name} skill`,
+        onActivate: onSelect,
+    });
+    return (_jsx("div", { ...agentProps, children: _jsx(SkillSidebarItem, { active: active, testId: `skill-row-${skill.id}`, enabled: enabled, icon: icon, name: skill.name, description: description, onLabel: onLabel, offLabel: offLabel, onSelect: onSelect, attentionLabel: attentionLabel }) }));
+}
+/* ── Main Skills View ───────────────────────────────────────────────── */
+export function SkillsView({ contentHeader, inModal, } = {}) {
+    if (inModal)
+        return _jsx(SkillsModalView, {});
+    return _jsx(SkillsFullView, { contentHeader: contentHeader });
+}
+/* ── Full-Page Skills View ─────────────────────────────────────────── */
+function SkillsFullView({ contentHeader } = {}) {
+    const { skills, skillCreateFormOpen, skillCreateName, skillCreateDescription, skillCreating, skillReviewReport, skillReviewId, skillReviewLoading, skillToggleAction, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, loadSkills, refreshSkills, handleSkillToggle, handleCreateSkill, handleDeleteSkill, handleReviewSkill, handleAcknowledgeSkill, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableMarketplaceSkill, disableMarketplaceSkill, copyMarketplaceSkillSource, setState, t, } = useApp();
+    const [installModalOpen, setInstallModalOpen] = useState(false);
+    const [filterText, setFilterText] = useState("");
+    const [filterTab, setFilterTab] = useState("all");
+    const [selectedId, setSelectedId] = useState(null);
+    const [editingSkill, setEditingSkill] = useState(null);
+    // The floating chat composer is this view's search box. While Skills is the
+    // active view it takes over the composer (placeholder + live draft) and feeds
+    // each keystroke into the `filterText` filter — there's no in-page search input.
+    const searchPlaceholder = t("skillsview.SearchSkills", {
+        defaultValue: "Search skills…",
+    });
+    const chatBinding = useMemo(() => ({ placeholder: searchPlaceholder, onQuery: setFilterText }), [searchPlaceholder]);
+    useRegisterViewChatBinding(chatBinding);
+    useEffect(() => {
+        void loadSkills();
+    }, [loadSkills]);
+    // The skills list polls itself in the background instead of exposing a manual
+    // refresh control — silently revalidate on a slow interval and on window focus.
+    useEffect(() => {
+        const poll = () => void refreshSkills();
+        window.addEventListener("focus", poll);
+        const interval = window.setInterval(poll, 20_000);
+        return () => {
+            window.removeEventListener("focus", poll);
+            window.clearInterval(interval);
+        };
+    }, [refreshSkills]);
+    const filteredSkills = useMemo(() => {
+        const query = filterText.toLowerCase();
+        return skills.filter((skill) => {
+            if (filterTab === "on" && !skill.enabled)
+                return false;
+            if (filterTab === "off" && skill.enabled)
+                return false;
+            if (filterTab === "binance" && !BINANCE_SKILL_IDS.has(skill.id))
+                return false;
+            if (query &&
+                !skill.name.toLowerCase().includes(query) &&
+                !skill.description?.toLowerCase().includes(query)) {
+                return false;
+            }
+            return true;
+        });
+    }, [skills, filterText, filterTab]);
+    const selectedSkillId = selectedId && filteredSkills.some((skill) => skill.id === selectedId)
+        ? selectedId
+        : (filteredSkills[0]?.id ?? null);
+    const selectedSkill = selectedSkillId
+        ? (skills.find((skill) => skill.id === selectedSkillId) ?? null)
+        : null;
+    const filterTabs = [
+        {
+            key: "all",
+            label: `${t("common.all", { defaultValue: "All" })} (${skills.length})`,
+        },
+        {
+            key: "on",
+            label: `${t("common.on")} (${skills.filter((skill) => skill.enabled).length})`,
+        },
+        {
+            key: "off",
+            label: `${t("common.off")} (${skills.filter((skill) => !skill.enabled).length})`,
+        },
+    ];
+    const handleDismissReview = () => {
+        setState("skillReviewId", "");
+        setState("skillReviewReport", null);
+    };
+    const handleCancelCreate = () => {
+        setState("skillCreateFormOpen", false);
+        setState("skillCreateName", "");
+        setState("skillCreateDescription", "");
+    };
+    const selectedSkillReviewOpen = skillReviewId === selectedSkill?.id;
+    const selectedNeedsAttention = selectedSkill?.scanStatus === "warning" ||
+        selectedSkill?.scanStatus === "critical" ||
+        selectedSkill?.scanStatus === "blocked";
+    const newSkillButton = useAgentElement({
+        id: "new-skill",
+        role: "button",
+        label: skillCreateFormOpen
+            ? t("common.cancel")
+            : t("skillsview.NewSkill", { defaultValue: "New Skill" }),
+        group: "skills-toolbar",
+        status: skillCreateFormOpen ? "active" : "inactive",
+        description: "Open or close the new skill builder form",
+        onActivate: () => {
+            setState("skillCreateFormOpen", !skillCreateFormOpen);
+            if (skillCreateFormOpen)
+                handleCancelCreate();
+        },
+    });
+    const installButton = useAgentElement({
+        id: "install-skill",
+        role: "button",
+        label: t("common.install", { defaultValue: "Install" }),
+        group: "skills-toolbar",
+        description: "Open the skill marketplace install dialog",
+        onActivate: () => setInstallModalOpen(true),
+    });
+    const createNameInput = useAgentElement({
+        id: "create-skill-name",
+        role: "text-input",
+        label: t("skillsview.SkillName"),
+        group: "skills-create",
+        description: "Name for the new skill being created",
+        getValue: () => skillCreateName,
+        onFill: (value) => setState("skillCreateName", value),
+    });
+    const createDescriptionInput = useAgentElement({
+        id: "create-skill-description",
+        role: "text-input",
+        label: t("common.description"),
+        group: "skills-create",
+        description: "Description for the new skill being created",
+        getValue: () => skillCreateDescription,
+        onFill: (value) => setState("skillCreateDescription", value),
+    });
+    const createSubmitButton = useAgentElement({
+        id: "create-skill-submit",
+        role: "button",
+        label: t("skillsview.createSkill", { defaultValue: "Create Skill" }),
+        group: "skills-create",
+        description: "Create the new skill with the entered name and description",
+        onActivate: () => {
+            if (skillCreateName.trim() && !skillCreating)
+                handleCreateSkill();
+        },
+    });
+    const toggleSelectedSwitch = useAgentElement({
+        id: "toggle-selected-skill",
+        role: "toggle",
+        label: selectedSkill
+            ? `${selectedSkill.name} ${selectedSkill.enabled ? t("common.on") : t("common.off")}`
+            : t("common.off"),
+        group: "skills-detail",
+        status: selectedSkill?.enabled ? "active" : "inactive",
+        description: "Enable or disable the selected skill",
+        onActivate: () => {
+            if (selectedSkill) {
+                handleSkillToggle(selectedSkill.id, !selectedSkill.enabled);
+            }
+        },
+    });
+    const editSourceButton = useAgentElement({
+        id: "edit-skill-source",
+        role: "button",
+        label: t("skillsview.EditSource", { defaultValue: "Edit Source" }),
+        group: "skills-detail",
+        description: "Open the source editor for the selected skill",
+        onActivate: () => {
+            if (selectedSkill)
+                setEditingSkill(selectedSkill);
+        },
+    });
+    const skillsSidebar = (_jsx(AppPageSidebar, { testId: "skills-sidebar", collapsible: true, contentIdentity: "skills", "aria-label": t("skillsview.filterSkills", {
+            defaultValue: "Skills list",
+        }), collapsedRailItems: filteredSkills.map((skill) => {
+            const selected = selectedSkillId === skill.id;
+            return (_jsx(SidebarContent.RailItem, { "aria-label": skill.name, title: skill.name, active: selected, indicatorTone: skill.enabled ? "accent" : undefined, onClick: () => {
+                    setSelectedId(skill.id);
+                    setState("skillCreateFormOpen", false);
+                }, children: skill.name.charAt(0).toUpperCase() }, skill.id));
+        }), children: _jsx(SidebarScrollRegion, { children: _jsxs(SidebarPanel, { children: [_jsxs(SidebarContent.Toolbar, { className: "mb-3", children: [_jsx(SidebarContent.ToolbarPrimary, { children: _jsx(Button, { ref: newSkillButton.ref, variant: skillCreateFormOpen ? "outline" : "default", size: "sm", type: "button", className: `h-9 w-full rounded-full px-4 text-xs-tight font-bold tracking-[0.12em] ${skillCreateFormOpen
+                                        ? "border-border/50 bg-bg/25 text-txt"
+                                        : "text-txt-strong"}`, onClick: () => {
+                                        setState("skillCreateFormOpen", !skillCreateFormOpen);
+                                        if (skillCreateFormOpen) {
+                                            handleCancelCreate();
+                                        }
+                                    }, ...newSkillButton.agentProps, children: skillCreateFormOpen
+                                        ? t("common.cancel")
+                                        : `+ ${t("skillsview.NewSkill", { defaultValue: "New Skill" })}` }) }), _jsx(SidebarContent.ToolbarActions, { children: _jsx(Button, { ref: installButton.ref, variant: "outline", size: "sm", type: "button", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: () => setInstallModalOpen(true), ...installButton.agentProps, children: t("common.install", { defaultValue: "Install" }) }) })] }), _jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: filterTabs.map((tab) => (_jsx(SkillFilterTab, { tabKey: tab.key, label: tab.label, isActive: filterTab === tab.key, onSelect: () => setFilterTab(tab.key) }, tab.key))) }), filteredSkills.length === 0 ? (_jsx(SidebarContent.EmptyState, { children: skills.length === 0
+                            ? t("skillsview.noSkillsInstalled", {
+                                defaultValue: "No Skills Installed",
+                            })
+                            : t("skillsview.noSkillsMatchFilter", {
+                                defaultValue: 'No skills match "{{filter}}"',
+                                filter: filterText,
+                            }) })) : (_jsx("div", { className: "space-y-1.5", children: filteredSkills.map((skill) => {
+                            const needsAttention = skill.scanStatus === "warning" ||
+                                skill.scanStatus === "critical" ||
+                                skill.scanStatus === "blocked";
+                            const selected = selectedSkillId === skill.id;
+                            return (_jsx(SkillRowButton, { skill: skill, active: selected, enabled: skill.enabled, icon: skill.name.charAt(0).toUpperCase(), description: skill.description || t("skillsview.noDescription"), onLabel: t("common.on"), offLabel: t("common.off"), onSelect: () => {
+                                    setSelectedId(skill.id);
+                                    setState("skillCreateFormOpen", false);
+                                }, attentionLabel: needsAttention
+                                    ? skill.scanStatus === "blocked"
+                                        ? t("skillsview.statusBlocked")
+                                        : t("skillsview.statusWarning")
+                                    : undefined }, skill.id));
+                        }) }))] }) }) }));
+    return (_jsxs(ShellViewAgentSurface, { viewId: "skills", children: [_jsx(PageLayout, { "data-testid": "skills-shell", sidebar: skillsSidebar, contentHeader: contentHeader, contentInnerClassName: "mx-auto w-full max-w-[76rem]", children: _jsx("div", { "data-testid": "skills-detail", children: _jsxs(PagePanel, { variant: "section", children: [_jsx(PagePanel.Header, { heading: t("advancedpageview.Skills", {
+                                    defaultValue: "Skills",
+                                }), className: "border-border/35", actions: _jsx(PagePanel.Meta, { className: "border-border/45 px-2.5 py-1 font-bold tracking-[0.16em] text-muted", children: t("skillsview.VisibleCount", {
+                                        defaultValue: "{{count}} shown",
+                                        count: filteredSkills.length,
+                                    }) }) }), _jsx("div", { className: "border-b border-border/35 px-4 py-2.5 sm:px-5", children: _jsx(ChatSearchHint, { noun: "skills", query: filterText }) }), _jsx("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: skills.length === 0 && !skillCreateFormOpen ? (_jsx("div", { "data-testid": "skills-empty-state", className: "grid min-h-[20rem] place-items-center px-6 py-10", children: _jsxs("div", { className: "w-full max-w-2xl text-center", children: [_jsx("div", { className: "mx-auto flex h-14 w-14 items-center justify-center rounded-sm bg-accent/12 text-accent", children: _jsx(Brain, { className: "h-7 w-7" }) }), _jsx("h2", { className: "mt-4 text-base font-semibold text-txt", children: t("skillsview.noSkillsInstalled", {
+                                                    defaultValue: "No Skills Installed",
+                                                }) }), _jsx("div", { className: "mt-6 flex w-full flex-col justify-center gap-2 sm:w-auto sm:flex-row sm:gap-3", children: _jsxs(Button, { variant: "default", size: "sm", className: "h-10 w-full justify-center rounded-full px-5 font-bold tracking-[0.12em] sm:w-auto", onClick: () => setInstallModalOpen(true), children: [_jsx(Store, { className: "mr-2 h-4 w-4" }), t("skillsview.BrowseMarketplace")] }) })] }) })) : filteredSkills.length === 0 && !skillCreateFormOpen ? (_jsx(PagePanel.Empty, { "data-testid": "skills-filter-empty", variant: "surface", className: "min-h-[16rem] rounded-sm px-6 py-12", title: t("skillsview.noMatchingSkills", {
+                                        defaultValue: "No matching skills",
+                                    }), description: t("skillsview.noSkillsMatchFilter", {
+                                        defaultValue: 'No skills match "{{filter}}"',
+                                        filter: filterText,
+                                    }) })) : skillCreateFormOpen ? (_jsxs(PagePanel, { variant: "surface", className: "overflow-hidden", children: [_jsx(PagePanel.Header, { heading: t("skillsview.CreateNewSkill") }), _jsx("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsxs("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: [t("skillsview.SkillName"), " ", _jsx("span", { className: "text-danger", children: "*" })] }), _jsx(Input, { ref: createNameInput.ref, className: "w-full border-border/50 bg-bg/50 focus-visible:ring-accent", placeholder: t("skillsview.eGMyAwesomeSkil"), value: skillCreateName, onChange: (event) => setState("skillCreateName", event.target.value), ...createNameInput.agentProps, onKeyDown: (event) => {
+                                                                    if (event.key === "Enter" &&
+                                                                        skillCreateName.trim() &&
+                                                                        !skillCreating) {
+                                                                        handleCreateSkill();
+                                                                    }
+                                                                } })] }), _jsxs("div", { children: [_jsx("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: t("common.description") }), _jsx(Input, { ref: createDescriptionInput.ref, className: "w-full border-border/50 bg-bg/50 focus-visible:ring-accent", placeholder: t("skillsview.BriefDescriptionOf"), value: skillCreateDescription, onChange: (event) => setState("skillCreateDescription", event.target.value), ...createDescriptionInput.agentProps, onKeyDown: (event) => {
+                                                                    if (event.key === "Enter" &&
+                                                                        skillCreateName.trim() &&
+                                                                        !skillCreating) {
+                                                                        handleCreateSkill();
+                                                                    }
+                                                                } })] }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelCreate, children: t("common.cancel") }), _jsx(Button, { ref: createSubmitButton.ref, variant: "default", size: "sm", onClick: handleCreateSkill, disabled: !skillCreateName.trim() || skillCreating, ...createSubmitButton.agentProps, children: skillCreating
+                                                                    ? t("skillsview.creating", {
+                                                                        defaultValue: "Creating...",
+                                                                    })
+                                                                    : t("skillsview.createSkill", {
+                                                                        defaultValue: "Create Skill",
+                                                                    }) })] })] }) })] })) : selectedSkill ? (_jsxs(PagePanel, { variant: "surface", className: "overflow-hidden", "data-skill-id": selectedSkill.id, children: [_jsxs("div", { className: "flex items-start gap-3 px-4 py-4 sm:px-5", children: [_jsx("div", { className: "mt-0.5 shrink-0", children: _jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-sm border border-accent/30 bg-accent/18 p-2.5 text-base font-bold text-txt-strong", children: selectedSkill.name.charAt(0).toUpperCase() }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("div", { "data-testid": "skills-detail-name", className: "whitespace-normal break-words [overflow-wrap:anywhere] text-sm font-semibold leading-snug text-txt", children: selectedSkill.name }), selectedNeedsAttention ? (_jsx(StatusBadge, { label: selectedSkill.scanStatus === "warning"
+                                                                        ? t("skillsview.statusWarning")
+                                                                        : t("skillsview.statusBlocked"), variant: selectedSkill.scanStatus === "warning"
+                                                                        ? "warning"
+                                                                        : "danger", withDot: true })) : null, _jsx("span", { className: "min-w-0 break-all text-xs-tight font-mono text-muted/80", children: selectedSkill.id })] }), _jsx("div", { className: "mt-3 max-w-3xl text-sm leading-relaxed text-muted", children: selectedSkill.description ||
+                                                                t("skillsview.noDescriptionProvided", {
+                                                                    defaultValue: "No description provided.",
+                                                                }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [selectedNeedsAttention && !selectedSkillReviewOpen && (_jsx(Button, { variant: "outline", size: "sm", className: "h-auto rounded-full border-warn/35 bg-warn/12 px-3 py-1.5 text-2xs font-bold tracking-[0.14em] text-warn", onClick: () => handleReviewSkill(selectedSkill.id), children: t("skillsview.ReviewFindings") })), selectedNeedsAttention && selectedSkillReviewOpen && (_jsx(Button, { variant: "outline", size: "sm", className: "h-auto rounded-full border-border/50 px-3 py-1.5 text-xs-tight font-semibold text-muted hover:text-txt", onClick: handleDismissReview, children: t("common.dismiss") })), _jsx(Switch, { ref: toggleSelectedSwitch.ref, checked: selectedSkill.enabled, disabled: skillToggleAction === selectedSkill.id, onCheckedChange: (next) => handleSkillToggle(selectedSkill.id, next === true), ...toggleSelectedSwitch.agentProps })] })] }), _jsxs("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: [_jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-2", children: [_jsx(Button, { ref: editSourceButton.ref, variant: "outline", size: "sm", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: () => setEditingSkill(selectedSkill), ...editSourceButton.agentProps, children: t("skillsview.EditSource", {
+                                                                defaultValue: "Edit Source",
+                                                            }) }), _jsx(ConfirmDelete, { triggerClassName: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em] !bg-transparent text-danger hover:!bg-danger/15 hover:text-danger-foreground transition-colors border border-danger/30", confirmClassName: "px-3 py-1 text-xs-tight font-bold bg-danger text-danger-foreground hover:bg-danger/90 transition-colors rounded-sm ", cancelClassName: "px-3 py-1 text-xs-tight font-bold text-muted border border-border/40 hover:text-txt transition-colors rounded-sm", confirmLabel: t("common.yes"), cancelLabel: t("common.no"), onConfirm: () => handleDeleteSkill(selectedSkill.id, selectedSkill.name) })] }), selectedSkillReviewOpen && skillReviewReport ? (_jsxs(PagePanel, { variant: "inset", className: "p-4 sm:p-5", children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "text-xs font-semibold text-txt", children: t("skillsview.ScanReport") }), _jsxs("span", { className: "text-xs-tight font-mono text-danger", children: [skillReviewReport.summary.critical, " ", t("skillsview.critical")] }), _jsxs("span", { className: "text-xs-tight font-mono text-warn", children: [skillReviewReport.summary.warn, " ", t("skillsview.warnings")] })] }), skillReviewReport.findings.length > 0 && (_jsx("div", { className: "custom-scrollbar max-h-64 overflow-y-auto rounded-sm border border-border/35 bg-card/30", children: skillReviewReport.findings.map((finding, _idx) => (_jsxs("div", { className: `flex flex-col gap-1 px-3 py-2 text-xs-tight sm:flex-row sm:items-start sm:gap-2`, children: [_jsx("span", { className: `shrink-0 rounded-full px-2 py-0.5 text-3xs font-bold uppercase tracking-[0.12em] ${finding.severity === "critical"
+                                                                            ? "bg-danger/12 text-danger"
+                                                                            : "bg-warn/12 text-warn"}`, children: finding.severity === "critical"
+                                                                            ? t("skillsview.critical")
+                                                                            : t("skillsview.statusWarning") }), _jsx("span", { className: "min-w-0 flex-1 text-txt", children: finding.message }), _jsxs("span", { className: "min-w-0 break-all font-mono text-muted sm:shrink-0", children: [finding.file, ":", finding.line] })] }, `${finding.file}:${finding.line}:${finding.message}`))) })), _jsxs("div", { className: "mt-4 flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em]", onClick: () => handleAcknowledgeSkill(selectedSkill.id), children: t("skillsview.AcknowledgeAmpEn") }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-9 rounded-full px-4 text-xs-tight font-bold tracking-[0.12em] text-muted hover:text-txt", onClick: handleDismissReview, children: t("common.dismiss") })] })] })) : selectedSkillReviewOpen && skillReviewLoading ? (_jsx(PagePanel.Notice, { tone: "accent", children: t("skillsview.LoadingScanReport") })) : (_jsx(PagePanel, { variant: "inset", className: "p-4 sm:p-5", children: _jsx("div", { className: "text-sm leading-relaxed text-muted", children: t("skillsview.SkillSourceEditorDescription", {
+                                                            defaultValue: "Open the skill source editor to inspect or modify `SKILL.md`, or review findings here when a skill needs attention.",
+                                                        }) }) }))] })] })) : (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[16rem] rounded-sm px-6 py-12", title: 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) => {
+                    setSelectedId(skillId);
+                    setInstallModalOpen(false);
+                }, setState: setState, onClose: () => setInstallModalOpen(false) }))] }));
+}
+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",
+]);

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

@@ -0,0 +1 @@
+{"version":3,"file":"SqlEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SqlEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAO7C,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,WAAW,GACZ,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,+EAA+E;IAC/E,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,2CA2GA"}

package/components/pages/SqlEditorPanel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useApp } from "../../state/index.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { Button } from "../ui/button.js";
+import { Textarea } from "../ui/textarea.js";
+import { ResultsGrid } from "./database-utils.js";
+export function SqlEditorPanel({ queryText, setQueryText, queryResult, queryLoading, runQuery, queryHistory, showHistory, onCellClick, }) {
+    const { t } = useApp();
+    return (_jsxs(_Fragment, { children: [_jsxs(PagePanel, { variant: "surface", as: "section", className: "px-5 py-5 sm:px-6", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted", children: t("common.database") }), _jsx("h1", { className: "mt-1 text-2xl font-semibold text-txt-strong", children: t("databaseview.SQLEditor") })] }), _jsxs(PagePanel, { variant: "surface", className: "mt-4 flex flex-col p-4", children: [_jsxs("div", { className: "relative group", children: [_jsx("div", { className: "absolute -inset-[1px] bg-gradient-to-r from-accent/0 via-accent/30 to-accent/0 rounded-sm opacity-0 group-focus-within:opacity-100 blur transition-opacity duration-500" }), _jsx(Textarea, { value: queryText, onChange: (e) => setQueryText(e.target.value), onKeyDown: (e) => {
+                                    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                                        e.preventDefault();
+                                        runQuery();
+                                    }
+                                }, placeholder: t("databaseview.SELECTFROMMemori"), rows: 6, className: "w-full relative bg-bg/80 backdrop-blur-md border-border/50 text-txt text-sm font-mono resize-y leading-relaxed rounded-sm focus-visible:ring-accent focus-visible:border-accent custom-scrollbar ", spellCheck: false })] }), _jsxs("div", { className: "flex items-center gap-3 mt-3", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-auto min-h-[2.25rem] whitespace-normal break-words rounded-sm bg-accent px-6 py-1.5 text-left text-xs font-bold text-accent-fg transition-[opacity,transform,box-shadow] hover:scale-[1.02] hover:opacity-90 disabled:opacity-40", disabled: queryLoading || !queryText.trim(), onClick: runQuery, children: queryLoading
+                                    ? t("common.running", { defaultValue: "Running..." })
+                                    : t("databaseview.runQuery", {
+                                        defaultValue: "Run Query",
+                                    }) }), _jsxs("kbd", { className: "text-2xs text-muted font-mono bg-bg/50 px-2 py-1 rounded-sm border border-border/30 tracking-wider", children: [navigator.platform.includes("Mac") ? "⌘" : "Ctrl", " ", t("common.enter")] }), queryResult && (_jsxs("div", { className: "text-xs text-muted ml-auto bg-bg/50 px-3 py-1.5 rounded-sm border border-border/30 font-medium tracking-wide", children: [_jsx("span", { className: "text-txt", children: queryResult.rowCount }), " ", queryResult.rowCount === 1
+                                        ? t("databaseview.row")
+                                        : t("common.rows"), " ", "\u00B7 ", _jsxs("span", { className: "text-txt", children: [queryResult.durationMs, "ms"] })] }))] })] }), showHistory && queryHistory.length > 0 && !queryResult && (_jsxs("div", { className: "border border-border/40 bg-card/40 backdrop-blur-xl rounded-sm overflow-hidden", children: [_jsx("div", { className: "px-4 py-2.5 text-2xs text-muted uppercase font-bold tracking-widest bg-bg/60 ", children: t("databaseview.RecentQueries") }), _jsx("div", { className: "flex flex-col", children: queryHistory.slice(0, 5).map((q) => (_jsx(Button, { variant: "ghost", className: "w-full px-4 py-3 h-auto justify-start text-xs-tight font-mono text-txt text-left rounded-none hover:bg-bg-hover hover:text-txt transition-colors truncate", onClick: () => setQueryText(q), children: _jsx("span", { className: "truncate opacity-80 group-hover:opacity-100", children: q }) }, q))) })] })), queryResult && queryResult.rows.length > 0 ? (_jsx(PagePanel, { variant: "surface", className: "mt-4 flex flex-1 min-h-0 flex-col overflow-hidden p-3", children: _jsx(ResultsGrid, { columns: queryResult.columns, rows: queryResult.rows, onCellClick: onCellClick }) })) : null, queryResult && queryResult.rows.length === 0 ? (_jsx(PagePanel.Empty, { className: "mt-4 min-h-[12rem]", title: t("databaseview.QueryReturnedNoRo"), description: t("databaseview.QueryReturnedNoRo") })) : null] }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/StreamView.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,2CAoLjE"}