@elizaos/app-core 2.0.0-alpha.37

package/dist/components/SkillsView.js

@@ -0,0 +1,358 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Skills management view — create, enable/disable, and install skills.
+ *
+ * Professional card-grid layout with search, stats, polished toggle switches,
+ * and a structured install modal. Follows the CSS variable design system used
+ * throughout the app (--bg, --card, --border, --accent, --muted, --txt, etc.).
+ */
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { client } from "../api";
+import { useTimeout } from "../hooks";
+import { useApp } from "../state";
+import { ConfirmDeleteControl } from "./confirm-delete-control";
+import { StatusBadge } from "./ui-badges";
+import { Switch } from "./ui-switch";
+/* ── Skill Card ─────────────────────────────────────────────────────── */
+function SkillCard({ skill, skillToggleAction, skillReviewId, skillReviewReport, skillReviewLoading, onToggle, onEdit, onDelete, onReview, onAcknowledge, onDismissReview, }) {
+    const { t } = useApp();
+    const isQuarantined = skill.scanStatus === "warning" || skill.scanStatus === "critical";
+    const isBlocked = skill.scanStatus === "blocked";
+    const isReviewing = skillReviewId === skill.id;
+    return (_jsxs("div", { className: `flex flex-col border bg-[var(--card)] transition-colors ${isQuarantined || isBlocked
+            ? "border-[#e74c3c]/40"
+            : "border-[var(--border)] hover:border-[var(--accent)]/50"}`, "data-skill-id": skill.id, children: [_jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2.5", children: [_jsx(StatusBadge, { label: skill.scanStatus === "blocked" || skill.scanStatus === "critical"
+                                    ? "Blocked"
+                                    : skill.scanStatus === "warning"
+                                        ? "Warning"
+                                        : skill.enabled
+                                            ? "Active"
+                                            : "Inactive", tone: skill.scanStatus === "blocked" ||
+                                    skill.scanStatus === "critical" ||
+                                    skill.scanStatus === "warning"
+                                    ? skill.scanStatus === "warning"
+                                        ? "warning"
+                                        : "danger"
+                                    : skill.enabled
+                                        ? "success"
+                                        : "muted", withDot: true }), !isBlocked && !isQuarantined && (_jsx(Switch, { checked: skill.enabled, disabled: skillToggleAction === skill.id, onChange: (val) => onToggle(skill.id, val), size: "compact", trackOnClass: "bg-[var(--accent)]", trackOffClass: "bg-[var(--border)]", knobClass: "bg-white shadow-sm" })), isQuarantined && !isReviewing && (_jsx(Button, { variant: "outline", size: "sm", className: "h-6 px-2 text-[10px] font-bold bg-[#f39c12]/15 text-[#f39c12] border-[#f39c12]/30 hover:bg-[#f39c12]/25 hover:text-[#f39c12] transition-colors", onClick: () => onReview(skill.id), children: t("skillsview.ReviewFindings") }))] }), _jsx("div", { className: "font-semibold text-sm text-[var(--txt)] mb-1 truncate", title: skill.name, children: skill.name }), _jsx("div", { className: "text-[11px] text-[var(--muted)] line-clamp-2 min-h-[2em]", children: skill.description || "No description provided" })] }), _jsxs("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border/40 bg-black/5 mt-auto", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-3 text-[11px] font-bold text-muted hover:text-txt transition-colors", onClick: () => onEdit(skill), children: t("triggersview.Edit") }), _jsx(ConfirmDeleteControl, { triggerClassName: "h-7 px-3 text-[11px] font-bold text-danger hover:bg-danger/10 hover:text-danger-foreground transition-colors rounded-md", confirmClassName: "px-3 py-1 text-[11px] font-bold bg-danger text-danger-foreground hover:bg-danger/90 transition-colors rounded-md shadow-sm", cancelClassName: "px-3 py-1 text-[11px] font-bold text-muted border border-border/40 hover:text-txt transition-colors rounded-md", confirmLabel: "Yes", cancelLabel: "No", onConfirm: () => onDelete(skill.id, skill.name) }), _jsx("span", { className: "flex-1" }), _jsx("span", { className: "text-[10px] text-[var(--muted)] font-mono truncate max-w-[120px]", title: skill.id, children: skill.id.length > 16 ? `${skill.id.slice(0, 16)}...` : skill.id })] }), isReviewing && skillReviewReport ? (_jsxs("div", { className: "border-t border-[var(--border)] p-4 bg-[var(--bg)]", children: [_jsxs("div", { className: "flex items-center gap-3 mb-3", children: [_jsx("span", { className: "text-xs font-semibold text-[var(--txt)]", children: t("skillsview.ScanReport") }), _jsxs("span", { className: "text-[11px] text-[#e74c3c] font-mono", children: [skillReviewReport.summary.critical, " ", t("skillsview.critical")] }), _jsxs("span", { className: "text-[11px] text-[#f39c12] font-mono", children: [skillReviewReport.summary.warn, " ", t("skillsview.warnings")] })] }), skillReviewReport.findings.length > 0 && (_jsx("div", { className: "max-h-40 overflow-y-auto mb-3 border border-[var(--border)] bg-[var(--card)]", children: skillReviewReport.findings.map((f, idx) => (_jsxs("div", { className: `flex items-start gap-2 px-3 py-1.5 text-[11px] font-mono ${idx > 0 ? "border-t border-[var(--border)]" : ""}`, children: [_jsx("span", { className: `shrink-0 px-1.5 py-px font-bold text-[10px] uppercase ${f.severity === "critical"
+                                        ? "bg-[#e74c3c]/15 text-[#e74c3c]"
+                                        : "bg-[#f39c12]/15 text-[#f39c12]"}`, children: f.severity }), _jsx("span", { className: "text-[var(--txt)] flex-1 min-w-0", children: f.message }), _jsxs("span", { className: "text-[var(--muted)] shrink-0", children: [f.file, ":", f.line] })] }, `${f.file}:${f.line}:${f.message}`))) })), _jsxs("div", { className: "flex gap-2.5 mt-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-7 px-3 text-[11px] font-bold tracking-wide shadow-sm", onClick: () => onAcknowledge(skill.id), children: t("skillsview.AcknowledgeAmpEn") }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-3 text-[11px] font-bold text-muted hover:text-txt transition-colors", onClick: onDismissReview, children: t("skillsview.Dismiss") })] })] })) : isReviewing && skillReviewLoading ? (_jsx("div", { className: "border-t border-[var(--border)] p-4 text-xs text-[var(--muted)] italic", children: t("skillsview.LoadingScanReport") })) : null] }));
+}
+/* ── Marketplace Result Card ────────────────────────────────────────── */
+function MarketplaceCard({ item, isInstalled, skillsMarketplaceAction, onInstall, onUninstall, }) {
+    const { t } = useApp();
+    const isInstalling = skillsMarketplaceAction === `install:${item.id}`;
+    const isUninstalling = skillsMarketplaceAction === `uninstall:${item.id}`;
+    const sourceLabel = item.repository || item.slug || item.id;
+    return (_jsxs("div", { className: "flex items-start gap-4 p-4 border border-[var(--border)] bg-[var(--card)] hover:border-[var(--accent)]/50 transition-colors", children: [_jsx("div", { className: "w-10 h-10 shrink-0 flex items-center justify-center bg-[var(--accent)]/10 text-[var(--accent)] text-sm font-bold rounded", children: item.name.charAt(0).toUpperCase() }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-semibold text-sm text-[var(--txt)]", children: item.name }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mt-0.5 line-clamp-2", children: item.description || "No description." }), _jsxs("div", { className: "flex items-center gap-2 mt-1.5 text-[10px] text-[var(--muted)]", children: [_jsx("span", { className: "font-mono", children: sourceLabel }), item.score != null && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[var(--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-[var(--border)]", children: "/" }), item.tags.slice(0, 3).map((tag) => (_jsx("span", { className: "px-1.5 py-px bg-[var(--accent)]/10 text-[var(--accent)]", children: tag }, tag)))] }))] })] }), isInstalled ? (_jsx(Button, { variant: "destructive", size: "sm", className: "h-8 px-4 text-[11px] font-bold tracking-wide shadow-sm shrink-0", onClick: () => onUninstall(item.id, item.name), disabled: isUninstalling, children: isUninstalling ? "Removing..." : "Uninstall" })) : (_jsx(Button, { variant: "default", size: "sm", className: "h-8 px-4 text-[11px] font-bold tracking-wide shadow-sm shrink-0", onClick: () => onInstall(item), disabled: isInstalling, children: isInstalling ? "Installing..." : "Install" }))] }));
+}
+function InstallModal({ skills, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, setState, onClose, }) {
+    const { t } = useApp();
+    const [tab, setTab] = useState("search");
+    return (_jsx("div", { className: "fixed inset-0 z-[70] flex items-center justify-center bg-black/70", onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClose();
+            }
+        }, role: "dialog", "aria-modal": "true", children: _jsxs("div", { className: "w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden mx-4", style: {
+                background: "var(--card)",
+                border: "1px solid var(--border)",
+                borderRadius: 16,
+                backdropFilter: "blur(20px) saturate(115%)",
+                boxShadow: "var(--shadow-lg)",
+                color: "var(--text)",
+            }, children: [_jsxs("div", { className: "flex items-center justify-between px-5 py-4", style: { borderBottom: "1px solid var(--border)" }, children: [_jsxs("div", { children: [_jsx("div", { style: {
+                                        fontSize: 13,
+                                        fontWeight: 800,
+                                        letterSpacing: "0.14em",
+                                        textTransform: "uppercase",
+                                        color: "var(--text)",
+                                    }, children: "Install Skill" }), _jsx("div", { style: {
+                                        fontSize: 11,
+                                        color: "var(--muted)",
+                                        marginTop: 2,
+                                    }, children: "Add skills from the marketplace or a GitHub repository." })] }), _jsx("button", { type: "button", style: {
+                                width: 28,
+                                height: 28,
+                                borderRadius: "50%",
+                                border: "1px solid var(--border)",
+                                background: "transparent",
+                                color: "var(--muted)",
+                                cursor: "pointer",
+                                fontSize: 14,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                            }, onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "flex", style: { borderBottom: "1px solid var(--border)" }, children: [
+                        { id: "search", label: "MARKETPLACE" },
+                        { id: "url", label: "GITHUB URL" },
+                    ].map((t) => (_jsx("button", { type: "button", style: {
+                            flex: 1,
+                            padding: "10px 16px",
+                            fontSize: 11,
+                            fontWeight: 700,
+                            letterSpacing: "0.1em",
+                            background: "transparent",
+                            border: "none",
+                            cursor: "pointer",
+                            borderBottom: tab === t.id ? "2px solid #f0b232" : "2px solid transparent",
+                            color: tab === t.id ? "#f0b232" : "var(--muted)",
+                            transition: "color 0.2s, border-color 0.2s",
+                        }, 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(_Fragment, { children: [_jsxs("div", { className: "flex gap-2 items-center mb-4", children: [_jsx("input", { type: "text", className: "plugins-game-search-input", style: { flex: 1, minWidth: 200 }, placeholder: "Search skills by keyword...", value: skillsMarketplaceQuery, onChange: (e) => setState("skillsMarketplaceQuery", e.target.value), onKeyDown: (e) => {
+                                                if (e.key === "Enter")
+                                                    void searchSkillsMarketplace();
+                                            } }), _jsx("button", { type: "button", className: "plugins-game-chip", style: { minHeight: 36, padding: "0 16px", fontWeight: 700 }, onClick: () => searchSkillsMarketplace(), disabled: skillsMarketplaceLoading, children: skillsMarketplaceLoading ? "Searching..." : "Search" })] }), skillsMarketplaceError && (_jsx("div", { className: "p-2.5 text-xs mb-3", style: { border: "1px solid #e74c3c", color: "#e74c3c" }, children: skillsMarketplaceError })), skillsMarketplaceResults.length === 0 ? (_jsx("div", { className: "text-center py-12", children: _jsx("div", { style: {
+                                            color: "var(--muted)",
+                                            fontSize: 12,
+                                            letterSpacing: "0.1em",
+                                            textTransform: "uppercase",
+                                        }, children: "Search above to discover skills." }) })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "text-[11px] text-[var(--muted)] mb-1", children: [skillsMarketplaceResults.length, " ", t("skillsview.result"), skillsMarketplaceResults.length !== 1 ? "s" : ""] }), skillsMarketplaceResults.map((item) => (_jsx(MarketplaceCard, { item: item, isInstalled: skills.some((s) => s.id === item.id), skillsMarketplaceAction: skillsMarketplaceAction, onInstall: installSkillFromMarketplace, onUninstall: uninstallMarketplaceSkill }, item.id)))] }))] })), tab === "url" && (_jsxs("div", { children: [_jsx("div", { style: {
+                                        fontSize: 12,
+                                        fontWeight: 600,
+                                        color: "var(--text)",
+                                        marginBottom: 4,
+                                    }, children: "GitHub Repository URL" }), _jsx("div", { style: {
+                                        fontSize: 11,
+                                        color: "var(--muted)",
+                                        marginBottom: 12,
+                                    }, children: "Paste a full GitHub repository URL to install a skill directly." }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("input", { type: "text", className: "plugins-game-search-input", style: { flex: 1 }, placeholder: "https://github.com/org/repo", value: skillsMarketplaceManualGithubUrl, onChange: (e) => setState("skillsMarketplaceManualGithubUrl", e.target.value), onKeyDown: (e) => {
+                                                if (e.key === "Enter")
+                                                    void installSkillFromGithubUrl();
+                                            } }), _jsx("button", { 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"
+                                                ? "Installing..."
+                                                : "Install" })] }), skillsMarketplaceError && (_jsx("div", { className: "p-2.5 text-xs mt-3", style: { border: "1px solid #e74c3c", color: "#e74c3c" }, children: skillsMarketplaceError }))] }))] })] }) }));
+}
+/* ── Create Skill Inline Form ───────────────────────────────────────── */
+function CreateSkillForm({ skillCreateName, skillCreateDescription, skillCreating, setState, onCancel, onCreate, }) {
+    const { t } = useApp();
+    return (_jsxs("div", { className: "border border-[var(--accent)]/40 bg-[var(--card)] mb-4", children: [_jsx("div", { className: "px-4 py-3 border-b border-[var(--border)]", children: _jsx("div", { className: "text-xs font-semibold text-[var(--txt)]", children: t("skillsview.CreateNewSkill") }) }), _jsxs("div", { className: "p-4 flex flex-col gap-3", children: [_jsxs("div", { children: [_jsxs("span", { className: "block text-[11px] text-[var(--muted)] mb-1 font-medium", children: [t("skillsview.SkillName"), " ", _jsx("span", { className: "text-[#e74c3c]", children: "*" })] }), _jsx(Input, { className: "w-full bg-bg/50 border-border/50 focus-visible:ring-accent", placeholder: t("skillsview.eGMyAwesomeSkil"), value: skillCreateName, onChange: (e) => setState("skillCreateName", e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter" && skillCreateName.trim())
+                                        onCreate();
+                                } })] }), _jsxs("div", { children: [_jsx("span", { className: "block text-[11px] text-[var(--muted)] mb-1 font-medium", children: t("skillsview.Description") }), _jsx(Input, { className: "w-full bg-bg/50 border-border/50 focus-visible:ring-accent", placeholder: t("skillsview.BriefDescriptionOf"), value: skillCreateDescription, onChange: (e) => setState("skillCreateDescription", e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter" && skillCreateName.trim())
+                                        onCreate();
+                                } })] }), _jsxs("div", { className: "flex gap-2 justify-end pt-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: onCancel, children: t("onboarding.cancel") }), _jsx(Button, { variant: "default", size: "sm", onClick: onCreate, disabled: skillCreating || !skillCreateName.trim(), children: skillCreating ? "Creating..." : "Create Skill" })] })] })] }));
+}
+/* ── Edit Skill Modal ──────────────────────────────────────────────── */
+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 : "Failed to load skill source");
+        }
+        setLoading(false);
+    }, [skillId]);
+    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 : "Failed to save");
+        }
+        setSaving(false);
+    };
+    const handleKeyDown = (e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+            e.preventDefault();
+            if (hasChanges && !saving)
+                void handleSave();
+        }
+        // Allow tab to insert spaces
+        if (e.key === "Tab") {
+            e.preventDefault();
+            const target = e.target;
+            const start = target.selectionStart;
+            const end = target.selectionEnd;
+            const val = target.value;
+            setContent(`${val.substring(0, start)}  ${val.substring(end)}`);
+            requestAnimationFrame(() => {
+                target.selectionStart = target.selectionEnd = start + 2;
+            });
+        }
+    };
+    return (_jsx("div", { className: "fixed inset-0 z-[70] flex items-center justify-center bg-black/70", onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClose();
+            }
+        }, role: "dialog", "aria-modal": "true", children: _jsxs("div", { className: "w-full max-w-4xl h-[85vh] flex flex-col overflow-hidden mx-4 rounded-xl", style: {
+                background: "color-mix(in srgb, var(--bg) 96%, transparent)",
+                border: "1px solid color-mix(in srgb, var(--accent) 18%, transparent)",
+                backdropFilter: "blur(24px)",
+                boxShadow: "var(--shadow-lg)",
+            }, children: [_jsxs("div", { className: "flex items-center justify-between px-5 py-3 shrink-0", style: { borderBottom: "1px solid var(--border)" }, children: [_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsx("div", { className: "font-semibold text-sm truncate", style: { color: "var(--text)" }, children: skillName }), _jsx("span", { className: "text-[10px] font-mono px-1.5 py-0.5", style: {
+                                        color: "var(--muted)",
+                                        background: "var(--bg-hover)",
+                                        border: "1px solid var(--border)",
+                                        borderRadius: 4,
+                                    }, children: t("skillsview.SKILLMd") }), hasChanges && (_jsx("span", { className: "text-[10px] font-medium", style: { color: "#f0b232" }, children: t("skillsview.unsaved") }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-[10px]", style: { color: "var(--muted)" }, children: [navigator.platform.includes("Mac") ? "⌘S" : "Ctrl+S", " ", t("skillsview.toSave")] }), _jsx("button", { type: "button", className: "bg-transparent border-0 cursor-pointer text-lg px-2 transition-colors", style: { color: "var(--muted)" }, onMouseEnter: (e) => {
+                                        e.currentTarget.style.color = "var(--text)";
+                                    }, onMouseLeave: (e) => {
+                                        e.currentTarget.style.color = "var(--muted)";
+                                    }, onClick: onClose, children: "\u00D7" })] })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: loading ? (_jsx("div", { className: "flex items-center justify-center h-full text-sm", style: { color: "var(--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", style: { color: "#ef4444" }, children: error }), _jsx("button", { type: "button", className: "px-3 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors", style: {
+                                    background: "var(--bg-hover)",
+                                    border: "1px solid var(--border)",
+                                    color: "var(--text)",
+                                }, onClick: () => loadSource(), children: t("common.retry") })] })) : (_jsx("textarea", { className: "w-full h-full resize-none border-0 text-[13px] leading-relaxed font-mono p-5 focus:outline-none", style: {
+                            background: "var(--bg-hover)",
+                            color: "var(--text)",
+                        }, value: content, onChange: (e) => setContent(e.target.value), onKeyDown: handleKeyDown, spellCheck: false })) }), _jsxs("div", { className: "flex items-center justify-between px-5 py-3 shrink-0", style: { borderTop: "1px solid var(--border)" }, children: [_jsxs("div", { className: "text-[11px]", style: { color: "var(--muted)" }, children: [content ? `${content.split("\n").length} lines` : "", error && content ? (_jsx("span", { className: "ml-3", style: { color: "#ef4444" }, children: error })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", className: "px-3 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors", style: {
+                                        background: "transparent",
+                                        border: "1px solid var(--border)",
+                                        color: "var(--muted)",
+                                    }, onClick: onClose, children: hasChanges ? "Discard" : "Close" }), _jsx("button", { type: "button", className: "px-3 py-1.5 text-xs font-medium rounded cursor-pointer transition-colors", style: {
+                                        background: saveSuccess ? "#22c55e" : "#f0b232",
+                                        border: "none",
+                                        color: saveSuccess ? "#fff" : "#000",
+                                        opacity: saving || !hasChanges ? 0.5 : 1,
+                                    }, onClick: () => handleSave(), disabled: saving || !hasChanges, children: saving ? "Saving..." : saveSuccess ? "Saved" : "Save" })] })] })] }) }));
+}
+/* ── Main Skills View ───────────────────────────────────────────────── */
+export function SkillsView({ inModal } = {}) {
+    if (inModal)
+        return _jsx(SkillsModalView, {});
+    return _jsx(SkillsFullView, {});
+}
+/* ── Companion Modal View (sidebar + detail, reuses plugins-game-* CSS) ── */
+function SkillsModalView() {
+    const { skills, skillToggleAction, loadSkills, handleSkillToggle, handleDeleteSkill, refreshSkills, setState, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, } = 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 (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: `ALL (${skills.length})` },
+        { key: "on", label: `ON (${skills.filter((s) => s.enabled).length})` },
+        { key: "off", label: `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: "Talents" }), _jsxs("div", { className: "plugins-game-section-meta", children: [skills.length, " installed"] })] }), _jsx("div", { className: "plugins-game-list-search", children: _jsxs("div", { className: "plugins-game-list-search-row", children: [_jsx("input", { type: "text", placeholder: "Search skills...", value: filterText, onChange: (e) => setFilterText(e.target.value), className: "plugins-game-search-input" }), _jsxs("button", { type: "button", className: "plugins-game-chip plugins-game-add-btn", onClick: () => setInstallModalOpen(true), children: [_jsx("span", { className: "plugins-game-add-symbol", children: "+" }), " Install"] })] }) }), _jsx("div", { className: "plugins-game-chip-row", children: tabs.map((tab) => (_jsx("button", { 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", children: filtered.length === 0 ? (_jsx("div", { className: "plugins-game-list-empty", children: "No skills found" })) : (filtered.map((skill) => (_jsxs("button", { type: "button", className: `plugins-game-card${effectiveSelectedId === skill.id ? " is-selected" : ""}${!skill.enabled ? " is-disabled" : ""}`, 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 ? "ON" : "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", { 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
+                                                ? "ON"
+                                                : "OFF" })] }) }), _jsx("div", { className: "plugins-game-detail-description", children: selected.description || "No description provided." }), _jsxs("div", { className: "plugins-game-detail-actions", children: [_jsx("button", { type: "button", className: "plugins-game-action-btn", onClick: () => setEditingSkill(selected), children: "Edit Source" }), _jsx("button", { type: "button", className: "plugins-game-action-btn", onClick: () => handleDeleteSkill(selected.id, selected.name), children: "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: "Select a talent to configure" })] })) }), editingSkill &&
+                createPortal(_jsx(EditSkillModal, { skillId: editingSkill.id, skillName: editingSkill.name, onClose: () => setEditingSkill(null), onSaved: () => void refreshSkills() }), document.body), installModalOpen &&
+                createPortal(_jsx(InstallModal, { skills: skills, skillsMarketplaceQuery: skillsMarketplaceQuery, skillsMarketplaceResults: skillsMarketplaceResults, skillsMarketplaceError: skillsMarketplaceError, skillsMarketplaceLoading: skillsMarketplaceLoading, skillsMarketplaceAction: skillsMarketplaceAction, skillsMarketplaceManualGithubUrl: skillsMarketplaceManualGithubUrl, searchSkillsMarketplace: searchSkillsMarketplace, installSkillFromMarketplace: installSkillFromMarketplace, uninstallMarketplaceSkill: uninstallMarketplaceSkill, installSkillFromGithubUrl: installSkillFromGithubUrl, setState: setState, onClose: () => setInstallModalOpen(false) }), document.body)] }));
+}
+/* ── Full-Page Skills View ─────────────────────────────────────────── */
+function SkillsFullView() {
+    const { setTimeout: _setTimeout } = useTimeout();
+    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, setState, } = useApp();
+    const [installModalOpen, setInstallModalOpen] = useState(false);
+    const [filterText, setFilterText] = useState("");
+    const [editingSkill, setEditingSkill] = useState(null);
+    useEffect(() => {
+        void loadSkills();
+    }, [loadSkills]);
+    // Group into: needs attention, active, inactive — with text filter
+    const { attention, active, inactive, activeCount, totalCount } = useMemo(() => {
+        const attention = [];
+        const active = [];
+        const inactive = [];
+        let activeCount = 0;
+        const query = filterText.toLowerCase();
+        for (const skill of skills) {
+            if (query &&
+                !skill.name.toLowerCase().includes(query) &&
+                !skill.description?.toLowerCase().includes(query)) {
+                continue;
+            }
+            if (skill.enabled)
+                activeCount++;
+            if (skill.scanStatus === "warning" ||
+                skill.scanStatus === "critical" ||
+                skill.scanStatus === "blocked") {
+                attention.push(skill);
+            }
+            else if (skill.enabled) {
+                active.push(skill);
+            }
+            else {
+                inactive.push(skill);
+            }
+        }
+        return {
+            attention,
+            active,
+            inactive,
+            activeCount,
+            totalCount: skills.length,
+        };
+    }, [skills, filterText]);
+    const handleDismissReview = () => {
+        setState("skillReviewId", "");
+        setState("skillReviewReport", null);
+    };
+    const handleCancelCreate = () => {
+        setState("skillCreateFormOpen", false);
+        setState("skillCreateName", "");
+        setState("skillCreateDescription", "");
+    };
+    const allVisible = [...attention, ...active, ...inactive];
+    /** Render a group of skill cards in a grid with a section header. */
+    const renderGroup = (label, items, accent) => {
+        if (items.length === 0)
+            return null;
+        return (_jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "text-xs uppercase tracking-wider font-semibold mb-2 flex items-center gap-2", style: accent ? { color: accent } : { color: "var(--muted)" }, children: [label, _jsxs("span", { className: "text-[10px] font-mono opacity-60", children: ["(", items.length, ")"] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: items.map((skill) => (_jsx(SkillCard, { skill: skill, skillToggleAction: skillToggleAction, skillReviewId: skillReviewId, skillReviewReport: skillReviewReport, skillReviewLoading: skillReviewLoading, onToggle: handleSkillToggle, onEdit: setEditingSkill, onDelete: handleDeleteSkill, onReview: handleReviewSkill, onAcknowledge: handleAcknowledgeSkill, onDismissReview: handleDismissReview }, skill.id))) })] }));
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-4 mb-4 text-[11px] text-[var(--muted)]", children: [_jsxs("span", { children: [totalCount, " skill", totalCount !== 1 ? "s" : ""] }), _jsxs("span", { children: [activeCount, " active"] }), _jsxs("span", { children: [inactive.length, " inactive"] }), attention.length > 0 && (_jsxs("span", { className: "text-[#f39c12]", children: [attention.length, " need", attention.length === 1 ? "s" : "", " attention"] }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3 mb-6 p-3 border border-border/40 bg-card/60 backdrop-blur-md rounded-2xl shadow-sm", children: [_jsx(Input, { type: "text", placeholder: "Filter skills...", value: filterText, onChange: (e) => setFilterText(e.target.value), className: "w-[240px] h-9 bg-bg/50 border-border/50 focus-visible:ring-accent rounded-xl text-xs" }), _jsx("span", { className: "flex-1" }), _jsx(Button, { variant: skillCreateFormOpen ? "ghost" : "default", size: "sm", className: skillCreateFormOpen
+                            ? "h-9 px-4 font-bold text-muted hover:text-txt"
+                            : "h-9 px-4 font-bold tracking-wide shadow-sm", onClick: () => setState("skillCreateFormOpen", !skillCreateFormOpen), children: skillCreateFormOpen ? "Cancel" : "+ New Skill" }), _jsx(Button, { variant: "default", size: "sm", className: "h-9 px-4 font-bold tracking-wide shadow-sm", onClick: () => setInstallModalOpen(true), children: "Browse Marketplace" }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-9 px-4 font-bold text-muted hover:text-txt", onClick: () => refreshSkills(), title: "Refresh Skills List", children: "Refresh" })] }), skillCreateFormOpen && (_jsx(CreateSkillForm, { skillCreateName: skillCreateName, skillCreateDescription: skillCreateDescription, skillCreating: skillCreating, setState: setState, onCancel: handleCancelCreate, onCreate: handleCreateSkill })), skills.length === 0 ? (_jsxs("div", { className: "text-center py-16", children: [_jsx("div", { className: "text-[var(--muted)] text-sm mb-2", children: "No Skills Installed" }), _jsx("div", { className: "text-[var(--muted)] text-[11px] mb-4", children: "Install skills from the marketplace or create your own." }), _jsxs("div", { className: "flex justify-center gap-3", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-10 px-6 font-bold tracking-wide shadow-sm", onClick: () => setInstallModalOpen(true), children: "Browse Marketplace" }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-10 px-6 font-bold text-muted hover:text-txt", onClick: () => setState("skillCreateFormOpen", true), children: "Create Skill" })] })] })) : allVisible.length === 0 ? (_jsxs("div", { className: "text-center py-12 text-[var(--muted)] text-xs", children: ["No skills match filtering \"", filterText, "\""] })) : (_jsxs("div", { children: [renderGroup("Needs Attention", attention, "#f39c12"), renderGroup("Active", active, "var(--ok, #16a34a)"), renderGroup("Inactive", inactive)] })), 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, setState: setState, onClose: () => setInstallModalOpen(false) }))] }));
+}

package/dist/components/StartupFailureView.d.ts

@@ -0,0 +1,8 @@
+import type { StartupErrorState } from "../state";
+interface StartupFailureViewProps {
+    error: StartupErrorState;
+    onRetry: () => void;
+}
+export declare function StartupFailureView({ error, onRetry, }: StartupFailureViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StartupFailureView.d.ts.map

package/dist/components/StartupFailureView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartupFailureView.d.ts","sourceRoot":"","sources":["../../src/components/StartupFailureView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAalD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,GACR,EAAE,uBAAuB,2CAyCzB"}

package/dist/components/StartupFailureView.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useApp } from "../state";
+const REASON_LABELS = {
+    "backend-timeout": "Backend Timeout",
+    "backend-unreachable": "Backend Unreachable",
+    "agent-timeout": "Agent Timeout",
+    "agent-error": "Agent Error",
+    "asset-missing": "Asset Missing",
+};
+const APP_ORIGIN_URL = "https://app.milady.ai";
+export function StartupFailureView({ error, onRetry, }) {
+    const { t } = useApp();
+    const isBackendUnreachable = error.reason === "backend-unreachable";
+    return (_jsxs("div", { className: "max-w-[680px] mx-auto mt-15 p-6 border border-border bg-card rounded-[10px]", children: [_jsxs("h1", { className: "text-lg font-semibold mb-2 text-danger", children: [t("startupfailureview.StartupFailed"), " ", REASON_LABELS[error.reason]] }), _jsx("p", { className: "text-txt-strong mb-3 leading-relaxed", children: error.message }), isBackendUnreachable && (_jsx("p", { className: "text-muted mb-3 leading-relaxed", children: t("startupfailureview.ThisOriginDoesNot") })), error.detail && (_jsx("pre", { className: "mb-4 p-3 border border-border rounded bg-bg-muted text-xs text-muted whitespace-pre-wrap break-words", children: error.detail })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", className: "px-4 py-2 border border-accent bg-accent text-accent-fg text-sm cursor-pointer hover:bg-accent-hover", onClick: onRetry, children: t("startupfailureview.RetryStartup") }), isBackendUnreachable && (_jsx("a", { href: APP_ORIGIN_URL, target: "_blank", rel: "noreferrer", className: "px-4 py-2 border border-border bg-card text-txt text-sm hover:border-accent hover:text-txt", children: t("startupfailureview.OpenApp") }))] })] }));
+}

package/dist/components/StreamView.d.ts

@@ -0,0 +1,16 @@
+/**
+ * StreamView — Dynamic agent activity screen for live streaming.
+ *
+ * Shows what the agent is actively doing as the primary content:
+ * - Terminal output when running commands
+ * - Game iframe when playing a game
+ * - Chat exchanges when conversing
+ * - Activity dashboard when idle
+ *
+ * VRM avatar floats as a small picture-in-picture overlay (bottom-left).
+ * Activity feed runs along the right sidebar. Chat ticker at the bottom.
+ */
+export declare function StreamView({ inModal }?: {
+    inModal?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StreamView.d.ts.map

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

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