@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/PluginsView.js

@@ -0,0 +1,1534 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Plugins view — tag-filtered plugin management.
+ *
+ * Renders a unified plugin list with searchable/filterable cards and per-plugin settings.
+ */
+import { Button, Input } from "@elizaos/ui";
+import { Binary, BookOpen, Bot, Brain, BrickWall, Briefcase, Calendar, ChevronRight, Chrome, Circle, CircleDashed, CircleDot, ClipboardList, Clock, Cloud, Command, Construction, CreditCard, Diamond, Dna, Droplets, Eye, Feather, FileKey, FileText, Fingerprint, Gamepad, Gamepad2, Github, Handshake, Hash, Layers, Leaf, Link, Lock, LockKeyhole, Mail, MessageCircle, MessageSquare, MessagesSquare, Mic, Monitor, MousePointer2, Package, PenTool, Phone, Pickaxe, Puzzle, RefreshCw, Rss, ScrollText, Send, Server, Settings, Shell, Shuffle, Smartphone, Sparkle, Sparkles, Square, Star, StickyNote, Target, Tornado, TrendingDown, Triangle, Twitter, Video, Volume2, Wallet, Webhook, Wrench, Zap, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { client } from "../api";
+import { ConfigRenderer, defaultRegistry, } from "../config";
+import { useApp } from "../state";
+import { openExternalUrl, resolveAppAssetUrl } from "../utils";
+import { autoLabel } from "./labels";
+import { SHOWCASE_PLUGIN } from "./plugins/showcase-data";
+import { WhatsAppQrOverlay } from "./WhatsAppQrOverlay";
+/* ── Always-on plugins (hidden from all views) ────────────────────────── */
+/**
+ * Plugin IDs hidden from Features/Connectors views.
+ * Core plugins are visible in Admin > Plugins instead.
+ */
+const ALWAYS_ON_PLUGIN_IDS = new Set([
+    // Core (always loaded)
+    "sql",
+    "local-embedding",
+    "knowledge",
+    "agent-skills",
+    "directives",
+    "commands",
+    "personality",
+    "experience",
+    // Optional core (shown in admin)
+    "agent-orchestrator",
+    "shell",
+    "plugin-manager",
+    "cli",
+    "code",
+    "edge-tts",
+    "pdf",
+    "scratchpad",
+    "secrets-manager",
+    "todo",
+    "trust",
+    "form",
+    "goals",
+    "scheduling",
+    // Internal / infrastructure
+    "elizacloud",
+    "evm",
+    "memory",
+    "rolodex",
+    "tts",
+    "elevenlabs",
+    "cron",
+    "webhooks",
+    "browser",
+    "vision",
+    "computeruse",
+]);
+/* ── Helpers ────────────────────────────────────────────────────────── */
+/** Detect advanced / debug parameters that should be collapsed by default. */
+function isAdvancedParam(param) {
+    const k = param.key.toUpperCase();
+    const d = (param.description ?? "").toLowerCase();
+    return (k.includes("EXPERIMENTAL") ||
+        k.includes("DEBUG") ||
+        k.includes("VERBOSE") ||
+        k.includes("TELEMETRY") ||
+        k.includes("BROWSER_BASE") ||
+        d.includes("experimental") ||
+        d.includes("advanced") ||
+        d.includes("debug"));
+}
+/** Convert PluginParamDef[] to a JSON Schema + ConfigUiHints for ConfigRenderer. */
+export function paramsToSchema(params, pluginId) {
+    const properties = {};
+    const required = [];
+    const hints = {};
+    for (const p of params) {
+        // Build JSON Schema property
+        const prop = {};
+        if (p.type === "boolean") {
+            prop.type = "boolean";
+        }
+        else if (p.type === "number") {
+            prop.type = "number";
+        }
+        else {
+            prop.type = "string";
+        }
+        if (p.description)
+            prop.description = p.description;
+        if (p.default != null)
+            prop.default = p.default;
+        if (p.options?.length) {
+            prop.enum = p.options;
+        }
+        // Auto-detect format from key name
+        const keyUpper = p.key.toUpperCase();
+        if (keyUpper.includes("URL") ||
+            keyUpper.includes("ENDPOINT") ||
+            keyUpper.includes("BASE_URL")) {
+            prop.format = "uri";
+        }
+        else if (keyUpper.includes("EMAIL")) {
+            prop.format = "email";
+        }
+        else if (keyUpper.includes("_DATE") ||
+            keyUpper.includes("_SINCE") ||
+            keyUpper.includes("_UNTIL")) {
+            prop.format = "date";
+        }
+        // Auto-detect number types from key patterns
+        if (keyUpper.includes("PORT") && prop.type === "string") {
+            prop.type = "number";
+        }
+        else if ((keyUpper.includes("TIMEOUT") ||
+            keyUpper.includes("INTERVAL") ||
+            keyUpper.includes("_MS")) &&
+            prop.type === "string") {
+            prop.type = "number";
+        }
+        else if ((keyUpper.includes("COUNT") ||
+            keyUpper.includes("LIMIT") ||
+            keyUpper.startsWith("MAX_")) &&
+            prop.type === "string") {
+            prop.type = "number";
+        }
+        else if ((keyUpper.includes("RETRY") || keyUpper.includes("RETRIES")) &&
+            prop.type === "string") {
+            prop.type = "number";
+        }
+        // Auto-detect boolean from key patterns
+        if (prop.type === "string" &&
+            (keyUpper.includes("SHOULD_") ||
+                keyUpper.endsWith("_ENABLED") ||
+                keyUpper.endsWith("_DISABLED") ||
+                keyUpper.startsWith("USE_") ||
+                keyUpper.startsWith("ALLOW_") ||
+                keyUpper.startsWith("IS_") ||
+                keyUpper.startsWith("ENABLE_") ||
+                keyUpper.startsWith("DISABLE_") ||
+                keyUpper.startsWith("FORCE_") ||
+                keyUpper.endsWith("_AUTONOMOUS_MODE"))) {
+            prop.type = "boolean";
+        }
+        // Auto-detect number from key patterns (RATE, DELAY, THRESHOLD, SIZE, TEMPERATURE)
+        if (prop.type === "string" &&
+            (keyUpper.includes("_RATE") ||
+                keyUpper.includes("DELAY") ||
+                keyUpper.includes("THRESHOLD") ||
+                keyUpper.includes("_SIZE") ||
+                keyUpper.includes("TEMPERATURE") ||
+                keyUpper.includes("_DEPTH") ||
+                keyUpper.includes("_PERCENT") ||
+                keyUpper.includes("_RATIO"))) {
+            prop.type = "number";
+        }
+        // Auto-detect comma-separated lists → array renderer
+        if (prop.type === "string" && !prop.enum) {
+            const descLower = (p.description || "").toLowerCase();
+            const isCommaSep = descLower.includes("comma-separated") ||
+                descLower.includes("comma separated");
+            const isListSuffix = keyUpper.endsWith("_IDS") ||
+                keyUpper.endsWith("_CHANNELS") ||
+                keyUpper.endsWith("_ROOMS") ||
+                keyUpper.endsWith("_RELAYS") ||
+                keyUpper.endsWith("_FEEDS") ||
+                keyUpper.endsWith("_DEXES") ||
+                keyUpper.endsWith("_WHITELIST") ||
+                keyUpper.endsWith("_BLACKLIST") ||
+                keyUpper.endsWith("_ALLOWLIST") ||
+                keyUpper.endsWith("_SPACES") ||
+                keyUpper.endsWith("_THREADS") ||
+                keyUpper.endsWith("_ROLES") ||
+                keyUpper.endsWith("_TENANTS") ||
+                keyUpper.endsWith("_DIRS");
+            if (isCommaSep || isListSuffix) {
+                prop.type = "array";
+                prop.items = { type: "string" };
+            }
+        }
+        // Auto-detect textarea (prompts, instructions, templates, greetings)
+        if (prop.type === "string" && !prop.enum && !keyUpper.includes("MODEL")) {
+            if (keyUpper.includes("INSTRUCTIONS") ||
+                keyUpper.includes("_GREETING") ||
+                keyUpper.endsWith("_PROMPT") ||
+                keyUpper.endsWith("_TEMPLATE") ||
+                keyUpper.includes("SYSTEM_MESSAGE")) {
+                prop.maxLength = 999;
+            }
+        }
+        // Auto-detect JSON fields (json-encoded or serialized values)
+        if (prop.type === "string" && !p.sensitive) {
+            const descLower = (p.description || "").toLowerCase();
+            if (descLower.includes("json-encoded") ||
+                descLower.includes("json array") ||
+                descLower.includes("serialized") ||
+                descLower.includes("json format")) {
+                prop.__jsonHint = true;
+            }
+        }
+        // Auto-detect file/directory paths → file renderer
+        if (prop.type === "string") {
+            if ((keyUpper.endsWith("_PATH") && !keyUpper.includes("WEBHOOK")) ||
+                keyUpper.endsWith("_DIR") ||
+                keyUpper.endsWith("_DIRECTORY") ||
+                keyUpper.endsWith("_FOLDER") ||
+                keyUpper.endsWith("_FILE")) {
+                prop.__fileHint = true;
+            }
+        }
+        // Auto-detect textarea from long descriptions
+        if (p.description && p.description.length > 200) {
+            prop.maxLength = 999;
+        }
+        properties[p.key] = prop;
+        if (p.required)
+            required.push(p.key);
+        // Build UI hint
+        const hint = {
+            label: autoLabel(p.key, pluginId),
+            sensitive: p.sensitive ?? false,
+            advanced: isAdvancedParam(p),
+        };
+        // Port numbers — constrain range
+        if (keyUpper.includes("PORT")) {
+            hint.min = 1;
+            hint.max = 65535;
+            prop.minimum = 1;
+            prop.maximum = 65535;
+        }
+        // Timeout/interval — show unit
+        if (keyUpper.includes("TIMEOUT") ||
+            keyUpper.includes("INTERVAL") ||
+            keyUpper.includes("_MS")) {
+            hint.unit = "ms";
+            prop.minimum = 0;
+            hint.min = 0;
+        }
+        // Count/limit — non-negative
+        if (keyUpper.includes("COUNT") ||
+            keyUpper.includes("LIMIT") ||
+            keyUpper.startsWith("MAX_")) {
+            hint.min = 0;
+            prop.minimum = 0;
+        }
+        // Retry — bounded range
+        if (keyUpper.includes("RETRY") || keyUpper.includes("RETRIES")) {
+            hint.min = 0;
+            hint.max = 100;
+            prop.minimum = 0;
+            prop.maximum = 100;
+        }
+        // Debug/verbose/enabled — mark as advanced
+        if (keyUpper.includes("DEBUG") ||
+            keyUpper.includes("VERBOSE") ||
+            keyUpper.includes("ENABLED")) {
+            hint.advanced = true;
+        }
+        // Model selection — NOT advanced (important user-facing choice)
+        if (keyUpper.includes("MODEL") && p.options?.length) {
+            hint.advanced = false;
+        }
+        // Region/zone — suggest common cloud regions when no options provided
+        if ((keyUpper.includes("REGION") || keyUpper.includes("ZONE")) &&
+            !p.options?.length) {
+            hint.type = "select";
+            hint.options = [
+                { value: "us-east-1", label: "US East (N. Virginia)" },
+                { value: "us-west-2", label: "US West (Oregon)" },
+                { value: "eu-west-1", label: "EU (Ireland)" },
+                { value: "eu-central-1", label: "EU (Frankfurt)" },
+                { value: "ap-southeast-1", label: "Asia Pacific (Singapore)" },
+                { value: "ap-northeast-1", label: "Asia Pacific (Tokyo)" },
+            ];
+        }
+        // File/directory path → file renderer
+        if (prop.__fileHint) {
+            hint.type = "file";
+            delete prop.__fileHint;
+        }
+        // JSON-encoded value → json renderer
+        if (prop.__jsonHint) {
+            hint.type = "json";
+            delete prop.__jsonHint;
+        }
+        // Model name fields — helpful placeholder (overridden by server-provided model options via configUiHints)
+        if (keyUpper.includes("MODEL") &&
+            prop.type === "string" &&
+            !p.options?.length) {
+            if (!hint.placeholder) {
+                if (keyUpper.includes("EMBEDDING")) {
+                    hint.placeholder = "e.g., text-embedding-3-small";
+                }
+                else if (keyUpper.includes("TTS")) {
+                    hint.placeholder = "e.g., tts-1, eleven_multilingual_v2";
+                }
+                else if (keyUpper.includes("STT")) {
+                    hint.placeholder = "e.g., whisper-1";
+                }
+                else if (keyUpper.includes("IMAGE")) {
+                    hint.placeholder = "e.g., dall-e-3, gpt-4o";
+                }
+                else {
+                    hint.placeholder = "e.g., gpt-4o, claude-sonnet-4-20250514";
+                }
+            }
+        }
+        // Mode/strategy fields — extract options from description if available
+        if (prop.type === "string" &&
+            !prop.enum &&
+            !p.sensitive &&
+            (keyUpper.endsWith("_MODE") || keyUpper.endsWith("_STRATEGY"))) {
+            const desc = p.description ?? "";
+            // Match "auto | local | mcp" or "filesystem|in-context|sqlite"
+            const pipeMatch = desc.match(/:\s*([a-z0-9_-]+(?:\s*[|/]\s*[a-z0-9_-]+)+)/i) ??
+                desc.match(/\(([a-z0-9_-]+(?:\s*[|/,]\s*[a-z0-9_-]+)+)\)/i);
+            if (pipeMatch) {
+                const opts = pipeMatch[1]
+                    .split(/[|/,]/)
+                    .map((s) => s.trim())
+                    .filter(Boolean);
+                const safeOpts = opts.filter((v) => /^[a-z0-9_-]+$/i.test(v));
+                if (safeOpts.length >= 2 && safeOpts.length <= 10) {
+                    hint.type = "select";
+                    hint.options = safeOpts.map((v) => ({ value: v, label: v }));
+                }
+            }
+            else {
+                // Match 'polling' or 'webhook' -or- 'env', 'oauth', or 'bearer' style
+                const quotedOpts = [...desc.matchAll(/'([a-z0-9_-]+)'/gi)].map((m) => m[1]);
+                const safeQuoted = quotedOpts.filter((v) => /^[a-z0-9_-]+$/i.test(v));
+                if (safeQuoted.length >= 2 && safeQuoted.length <= 10) {
+                    // Radio for 2 options, select for 3+
+                    hint.type = safeQuoted.length === 2 ? "radio" : "select";
+                    hint.options = safeQuoted.map((v) => ({ value: v, label: v }));
+                }
+            }
+        }
+        if (p.description) {
+            hint.help = p.description;
+            if (p.default != null)
+                hint.help += ` (default: ${String(p.default)})`;
+        }
+        if (p.sensitive)
+            hint.placeholder = p.isSet ? "********  (already set)" : "Enter value...";
+        else if (p.default)
+            hint.placeholder = `Default: ${String(p.default)}`;
+        hints[p.key] = hint;
+    }
+    return {
+        schema: { type: "object", properties, required },
+        hints,
+    };
+}
+/* ── PluginConfigForm bridge ─────────────────────────────────────────── */
+function PluginConfigForm({ plugin, pluginConfigs, onParamChange, }) {
+    const params = plugin.parameters ?? [];
+    const { schema, hints: autoHints } = useMemo(() => paramsToSchema(params, plugin.id), [params, plugin.id]);
+    // Merge server-provided configUiHints over auto-generated hints.
+    // Server hints take priority (override auto-generated ones).
+    const hints = useMemo(() => {
+        const serverHints = plugin.configUiHints;
+        if (!serverHints || Object.keys(serverHints).length === 0)
+            return autoHints;
+        const merged = { ...autoHints };
+        for (const [key, serverHint] of Object.entries(serverHints)) {
+            merged[key] = { ...merged[key], ...serverHint };
+        }
+        return merged;
+    }, [autoHints, plugin.configUiHints]);
+    // Build values from current config state + existing server values.
+    // Array-typed fields need comma-separated strings parsed into arrays.
+    const values = useMemo(() => {
+        const v = {};
+        const props = (schema.properties ?? {});
+        for (const p of params) {
+            const isArrayField = props[p.key]?.type === "array";
+            const configValue = pluginConfigs[plugin.id]?.[p.key];
+            if (configValue !== undefined) {
+                if (isArrayField && typeof configValue === "string") {
+                    v[p.key] = configValue
+                        ? configValue
+                            .split(",")
+                            .map((s) => s.trim())
+                            .filter(Boolean)
+                        : [];
+                }
+                else {
+                    v[p.key] = configValue;
+                }
+            }
+            else if (p.isSet && !p.sensitive && p.currentValue != null) {
+                if (isArrayField && typeof p.currentValue === "string") {
+                    v[p.key] = String(p.currentValue)
+                        ? String(p.currentValue)
+                            .split(",")
+                            .map((s) => s.trim())
+                            .filter(Boolean)
+                        : [];
+                }
+                else {
+                    v[p.key] = p.currentValue;
+                }
+            }
+        }
+        return v;
+    }, [params, plugin.id, pluginConfigs, schema]);
+    const setKeys = useMemo(() => new Set(params
+        .filter((p) => p.isSet)
+        .map((p) => p.key)), [params]);
+    const handleChange = useCallback((key, value) => {
+        // Join array values back to comma-separated strings for env var storage
+        const stringValue = Array.isArray(value)
+            ? value.join(", ")
+            : String(value ?? "");
+        onParamChange(plugin.id, key, stringValue);
+    }, [plugin.id, onParamChange]);
+    return (_jsx(ConfigRenderer, { schema: schema, hints: hints, values: values, setKeys: setKeys, registry: defaultRegistry, pluginId: plugin.id, onChange: handleChange }));
+}
+/* ── Default Icons ─────────────────────────────────────────────────── */
+const DEFAULT_ICONS = {
+    // AI Providers
+    anthropic: Brain,
+    "google-genai": Sparkles,
+    groq: Zap,
+    "local-ai": Monitor,
+    ollama: Bot,
+    openai: CircleDashed,
+    openrouter: Shuffle,
+    "vercel-ai-gateway": Triangle,
+    xai: Hash,
+    // Connectors — chat & social
+    discord: MessageCircle,
+    telegram: Send,
+    slack: Briefcase,
+    twitter: Twitter,
+    whatsapp: Smartphone,
+    signal: Lock,
+    imessage: MessageSquare,
+    bluebubbles: Droplets,
+    bluesky: Leaf,
+    farcaster: Circle,
+    instagram: Video,
+    nostr: Fingerprint,
+    twitch: Gamepad2,
+    matrix: Link,
+    mattermost: Diamond,
+    msteams: Square,
+    "google-chat": MessagesSquare,
+    feishu: Feather,
+    line: Circle,
+    "nextcloud-talk": Cloud,
+    tlon: Tornado,
+    zalo: Circle,
+    zalouser: Circle,
+    // Features — voice & audio
+    "edge-tts": Volume2,
+    elevenlabs: Mic,
+    tts: Volume2,
+    "simple-voice": Mic,
+    "robot-voice": Bot,
+    // Features — blockchain & finance
+    evm: Link,
+    solana: CircleDot,
+    "auto-trader": TrendingDown,
+    "lp-manager": Wallet,
+    "social-alpha": Layers,
+    polymarket: Gamepad2,
+    x402: CreditCard,
+    trust: Handshake,
+    iq: Puzzle,
+    // Features — dev tools & infra
+    cli: Hash,
+    code: Puzzle,
+    shell: Shell,
+    github: Github,
+    linear: Square,
+    mcp: Puzzle,
+    browser: Chrome,
+    computeruse: MousePointer2,
+    n8n: Settings,
+    webhooks: Webhook,
+    // Features — knowledge & memory
+    knowledge: BookOpen,
+    memory: Dna,
+    "local-embedding": Binary,
+    pdf: FileText,
+    "secrets-manager": FileKey,
+    scratchpad: StickyNote,
+    rlm: RefreshCw,
+    // Features — agents & orchestration
+    "agent-orchestrator": Target,
+    "agent-skills": Wrench,
+    "plugin-manager": Package,
+    "copilot-proxy": Handshake,
+    directives: ClipboardList,
+    goals: Target,
+    "eliza-classic": Bot,
+    // Features — media & content
+    vision: Eye,
+    rss: Rss,
+    "gmail-watch": Mail,
+    prose: PenTool,
+    form: ClipboardList,
+    // Features — scheduling & automation
+    cron: Clock,
+    scheduling: Calendar,
+    todo: ClipboardList,
+    commands: Command,
+    // Features — storage & logging
+    "s3-storage": Server,
+    "trajectory-logger": TrendingDown,
+    experience: Star,
+    // Features — gaming & misc
+    minecraft: Pickaxe,
+    roblox: BrickWall,
+    babylon: Gamepad,
+    mysticism: Sparkle,
+    personality: Target,
+    moltbook: ScrollText,
+    tee: LockKeyhole,
+    blooio: Circle,
+    acp: Construction,
+    elizacloud: Cloud,
+    twilio: Phone,
+};
+/** Resolve display icon: explicit plugin.icon, fallback to default map, or null. */
+function resolveIcon(p) {
+    if (p.icon)
+        return p.icon;
+    return DEFAULT_ICONS[p.id] ?? null;
+}
+function iconImageSource(icon) {
+    const value = icon.trim();
+    if (!value)
+        return null;
+    if (/^(https?:|data:image\/|blob:|file:|capacitor:|electrobun:|app:|\/|\.\/|\.\.\/)/i.test(value)) {
+        return resolveAppAssetUrl(value);
+    }
+    return null;
+}
+function getPluginResourceLinks(plugin) {
+    const seen = new Set();
+    const ordered = [
+        { key: "guide", label: "Setup guide", url: plugin.setupGuideUrl },
+        { key: "official", label: "Official", url: plugin.homepage },
+        { key: "source", label: "Source", url: plugin.repository },
+    ];
+    return ordered.flatMap((item) => {
+        const url = item.url?.trim();
+        if (!url || seen.has(url))
+            return [];
+        seen.add(url);
+        return [{ key: item.key, label: item.label, url }];
+    });
+}
+/* ── Sub-group Classification ──────────────────────────────────────── */
+/** Map plugin IDs to fine-grained sub-groups for the "Feature" category. */
+const FEATURE_SUBGROUP = {
+    // Voice & Audio
+    "edge-tts": "voice",
+    elevenlabs: "voice",
+    tts: "voice",
+    "simple-voice": "voice",
+    "robot-voice": "voice",
+    // Blockchain & Finance
+    evm: "blockchain",
+    solana: "blockchain",
+    "auto-trader": "blockchain",
+    "lp-manager": "blockchain",
+    "social-alpha": "blockchain",
+    polymarket: "blockchain",
+    x402: "blockchain",
+    trust: "blockchain",
+    iq: "blockchain",
+    // Dev Tools & Infrastructure
+    cli: "devtools",
+    code: "devtools",
+    shell: "devtools",
+    github: "devtools",
+    linear: "devtools",
+    mcp: "devtools",
+    browser: "devtools",
+    computeruse: "devtools",
+    n8n: "devtools",
+    webhooks: "devtools",
+    // Knowledge & Memory
+    knowledge: "knowledge",
+    memory: "knowledge",
+    "local-embedding": "knowledge",
+    pdf: "knowledge",
+    "secrets-manager": "knowledge",
+    scratchpad: "knowledge",
+    rlm: "knowledge",
+    // Agents & Orchestration
+    "agent-orchestrator": "agents",
+    "agent-skills": "agents",
+    "plugin-manager": "agents",
+    "copilot-proxy": "agents",
+    directives: "agents",
+    goals: "agents",
+    "eliza-classic": "agents",
+    // Media & Content
+    vision: "media",
+    rss: "media",
+    "gmail-watch": "media",
+    prose: "media",
+    form: "media",
+    // Scheduling & Automation
+    cron: "automation",
+    scheduling: "automation",
+    todo: "automation",
+    commands: "automation",
+    // Storage & Logging
+    "s3-storage": "storage",
+    "trajectory-logger": "storage",
+    experience: "storage",
+    // Gaming & Creative
+    minecraft: "gaming",
+    roblox: "gaming",
+    babylon: "gaming",
+    mysticism: "gaming",
+    personality: "gaming",
+    moltbook: "gaming",
+};
+const SUBGROUP_DISPLAY_ORDER = [
+    "ai-provider",
+    "connector",
+    "streaming",
+    "voice",
+    "blockchain",
+    "devtools",
+    "knowledge",
+    "agents",
+    "media",
+    "automation",
+    "storage",
+    "gaming",
+    "feature-other",
+    "showcase",
+];
+const SUBGROUP_LABELS = {
+    "ai-provider": "AI Providers",
+    connector: "Connectors",
+    voice: "Voice & Audio",
+    blockchain: "Blockchain & Finance",
+    devtools: "Dev Tools & Infrastructure",
+    knowledge: "Knowledge & Memory",
+    agents: "Agents & Orchestration",
+    media: "Media & Content",
+    automation: "Scheduling & Automation",
+    storage: "Storage & Logging",
+    gaming: "Gaming & Creative",
+    "feature-other": "Other Features",
+    streaming: "Streaming Destinations",
+    showcase: "Showcase",
+};
+const SUBGROUP_NAV_ICONS = {
+    all: Package,
+    "ai-provider": Brain,
+    connector: MessageCircle,
+    streaming: Video,
+    voice: Mic,
+    blockchain: Wallet,
+    devtools: Shell,
+    knowledge: BookOpen,
+    agents: Target,
+    media: Eye,
+    automation: Calendar,
+    storage: Server,
+    gaming: Gamepad2,
+    "feature-other": Puzzle,
+    showcase: Sparkles,
+};
+function subgroupForPlugin(plugin) {
+    if (plugin.id === "__ui-showcase__")
+        return "showcase";
+    if (plugin.category === "ai-provider")
+        return "ai-provider";
+    if (plugin.category === "connector")
+        return "connector";
+    if (plugin.category === "streaming")
+        return "streaming";
+    return FEATURE_SUBGROUP[plugin.id] ?? "feature-other";
+}
+function comparePlugins(left, right) {
+    if (left.enabled !== right.enabled)
+        return left.enabled ? -1 : 1;
+    if (left.enabled && right.enabled) {
+        const leftNeedsConfig = left.parameters?.some((param) => param.required && !param.isSet) ?? false;
+        const rightNeedsConfig = right.parameters?.some((param) => param.required && !param.isSet) ?? false;
+        if (leftNeedsConfig !== rightNeedsConfig) {
+            return leftNeedsConfig ? -1 : 1;
+        }
+    }
+    return (left.name ?? "").localeCompare(right.name ?? "");
+}
+function matchesPluginFilters(plugin, searchLower, statusFilter) {
+    const matchesStatus = statusFilter === "all" ||
+        (statusFilter === "enabled" && plugin.enabled) ||
+        (statusFilter === "disabled" && !plugin.enabled);
+    const matchesSearch = !searchLower ||
+        (plugin.name ?? "").toLowerCase().includes(searchLower) ||
+        (plugin.description ?? "").toLowerCase().includes(searchLower) ||
+        (plugin.tags ?? []).some((tag) => (tag ?? "").toLowerCase().includes(searchLower)) ||
+        plugin.id.toLowerCase().includes(searchLower);
+    return matchesStatus && matchesSearch;
+}
+function sortPlugins(filteredPlugins, pluginOrder, allowCustomOrder) {
+    if (!allowCustomOrder || pluginOrder.length === 0) {
+        return [...filteredPlugins].sort(comparePlugins);
+    }
+    const orderMap = new Map(pluginOrder.map((id, index) => [id, index]));
+    return [...filteredPlugins].sort((left, right) => {
+        const leftIndex = orderMap.get(left.id);
+        const rightIndex = orderMap.get(right.id);
+        if (leftIndex != null && rightIndex != null)
+            return leftIndex - rightIndex;
+        if (leftIndex != null)
+            return -1;
+        if (rightIndex != null)
+            return 1;
+        return comparePlugins(left, right);
+    });
+}
+function buildPluginListState(options) {
+    const { allowCustomOrder, effectiveSearch, effectiveStatusFilter, isConnectorLikeMode, mode, pluginOrder, plugins, showSubgroupFilters, subgroupFilter, } = options;
+    const categoryPlugins = plugins.filter((plugin) => plugin.category !== "database" &&
+        !ALWAYS_ON_PLUGIN_IDS.has(plugin.id) &&
+        (!isConnectorLikeMode || plugin.category === "connector") &&
+        (mode !== "streaming" || plugin.category === "streaming"));
+    const nonDbPlugins = [SHOWCASE_PLUGIN, ...categoryPlugins];
+    const searchLower = effectiveSearch.toLowerCase();
+    const sorted = sortPlugins(categoryPlugins.filter((plugin) => matchesPluginFilters(plugin, searchLower, effectiveStatusFilter)), pluginOrder, allowCustomOrder);
+    const enabledCount = categoryPlugins.filter((plugin) => plugin.enabled).length;
+    const subgroupCounts = {};
+    const visiblePlugins = [];
+    for (const plugin of sorted) {
+        const subgroup = subgroupForPlugin(plugin);
+        subgroupCounts[subgroup] = (subgroupCounts[subgroup] ?? 0) + 1;
+        if (!showSubgroupFilters ||
+            subgroupFilter === "all" ||
+            subgroup === subgroupFilter) {
+            visiblePlugins.push(plugin);
+        }
+    }
+    const subgroupTags = [
+        { id: "all", label: "All", count: sorted.length },
+        ...SUBGROUP_DISPLAY_ORDER.filter((subgroupId) => (subgroupCounts[subgroupId] ?? 0) > 0).map((subgroupId) => ({
+            id: subgroupId,
+            label: SUBGROUP_LABELS[subgroupId],
+            count: subgroupCounts[subgroupId] ?? 0,
+        })),
+    ];
+    return {
+        categoryPlugins,
+        enabledCount,
+        nonDbPlugins,
+        sorted,
+        subgroupTags,
+        visiblePlugins,
+    };
+}
+function PluginListView({ label, mode = "all", inModal }) {
+    const { plugins, pluginStatusFilter, pluginSearch, pluginSettingsOpen, pluginSaving, pluginSaveSuccess, loadPlugins, handlePluginToggle, handlePluginConfigSave, setActionNotice, setState, t, } = useApp();
+    const [pluginConfigs, setPluginConfigs] = useState({});
+    const [testResults, setTestResults] = useState(new Map());
+    const [addDirOpen, setAddDirOpen] = useState(false);
+    const [addDirPath, setAddDirPath] = useState("");
+    const [addDirLoading, setAddDirLoading] = useState(false);
+    const [installingPlugins, setInstallingPlugins] = useState(new Set());
+    const [installProgress, setInstallProgress] = useState(new Map());
+    const [togglingPlugins, setTogglingPlugins] = useState(new Set());
+    const hasPluginToggleInFlight = togglingPlugins.size > 0;
+    // ── Drag-to-reorder state ────────────────────────────────────────
+    const [pluginOrder, setPluginOrder] = useState(() => {
+        try {
+            const stored = localStorage.getItem("pluginOrder");
+            return stored ? JSON.parse(stored) : [];
+        }
+        catch {
+            return [];
+        }
+    });
+    const [draggingId, setDraggingId] = useState(null);
+    const [dragOverId, setDragOverId] = useState(null);
+    const dragRef = useRef(null);
+    const isSocialMode = mode === "social";
+    const isConnectorLikeMode = mode === "connectors" || mode === "social";
+    const resultLabel = isSocialMode ? "connectors" : label.toLowerCase();
+    const searchPlaceholder = isSocialMode
+        ? "Search..."
+        : `Search ${label.toLowerCase()}...`;
+    const effectiveStatusFilter = isSocialMode && pluginStatusFilter === "disabled"
+        ? "all"
+        : pluginStatusFilter;
+    const effectiveSearch = pluginSearch;
+    const showToolbar = true;
+    const allowCustomOrder = !isSocialMode;
+    const showPluginManagementActions = !isSocialMode;
+    // Load plugins on mount
+    useEffect(() => {
+        void loadPlugins();
+    }, [loadPlugins]);
+    // Listen for install progress events via WebSocket
+    useEffect(() => {
+        const unbind = client.onWsEvent("install-progress", (data) => {
+            const pluginName = data.pluginName;
+            const phase = data.phase;
+            const message = data.message;
+            if (!pluginName)
+                return;
+            if (phase === "complete" || phase === "error") {
+                setInstallProgress((prev) => {
+                    const next = new Map(prev);
+                    next.delete(pluginName);
+                    return next;
+                });
+            }
+            else {
+                setInstallProgress((prev) => new Map(prev).set(pluginName, { phase, message }));
+            }
+        });
+        return unbind;
+    }, []);
+    // Persist custom order
+    useEffect(() => {
+        if (pluginOrder.length > 0) {
+            localStorage.setItem("pluginOrder", JSON.stringify(pluginOrder));
+        }
+    }, [pluginOrder]);
+    const [subgroupFilter, setSubgroupFilter] = useState("all");
+    const showSubgroupFilters = mode !== "connectors" && mode !== "streaming" && mode !== "social";
+    const showDesktopSubgroupSidebar = showSubgroupFilters;
+    const { categoryPlugins, enabledCount, nonDbPlugins, sorted, subgroupTags, visiblePlugins, } = useMemo(() => buildPluginListState({
+        allowCustomOrder,
+        effectiveSearch,
+        effectiveStatusFilter,
+        isConnectorLikeMode,
+        mode,
+        pluginOrder,
+        plugins,
+        showSubgroupFilters,
+        subgroupFilter,
+    }), [
+        allowCustomOrder,
+        effectiveSearch,
+        effectiveStatusFilter,
+        isConnectorLikeMode,
+        mode,
+        pluginOrder,
+        plugins,
+        showSubgroupFilters,
+        subgroupFilter,
+    ]);
+    useEffect(() => {
+        if (!showSubgroupFilters)
+            return;
+        if (subgroupFilter === "all")
+            return;
+        if (!subgroupTags.some((tag) => tag.id === subgroupFilter)) {
+            setSubgroupFilter("all");
+        }
+    }, [showSubgroupFilters, subgroupFilter, subgroupTags]);
+    const renderSubgroupFilterButton = useCallback((tag, options) => {
+        const isActive = subgroupFilter === tag.id;
+        if (options?.sidebar) {
+            const Icon = SUBGROUP_NAV_ICONS[tag.id] ?? Package;
+            return (_jsxs("button", { type: "button", onClick: () => setSubgroupFilter(tag.id), "aria-current": isActive ? "page" : undefined, className: `flex w-full items-center gap-3 rounded-2xl border px-4 py-3 text-left transition-all duration-200 ${isActive
+                    ? "border-accent/40 bg-accent/12 text-txt shadow-[0_10px_30px_rgba(var(--accent),0.08)]"
+                    : "border-transparent text-muted hover:border-border/60 hover:bg-card/55 hover:text-txt"}`, children: [_jsx("span", { className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border ${isActive
+                            ? "border-accent/30 bg-accent/18 text-txt-strong"
+                            : "border-border/50 bg-bg-accent/80 text-muted"}`, children: _jsx(Icon, { className: "w-4 h-4" }) }), _jsx("span", { className: "min-w-0 flex-1", children: _jsx("span", { className: "block text-sm font-semibold leading-snug text-current", children: tag.label }) }), _jsx("span", { className: `rounded-full border px-2 py-0.5 text-[10px] font-mono leading-none ${isActive
+                            ? "border-accent/20 bg-accent/20 text-txt"
+                            : "border-border/50 bg-black/10 text-muted"}`, children: tag.count })] }, tag.id));
+        }
+        return (_jsxs(Button, { variant: isActive ? "default" : "outline", size: "sm", className: `h-7 px-3 text-[11px] font-bold tracking-wide rounded-lg transition-all ${isActive
+                ? "shadow-[0_0_10px_rgba(var(--accent),0.2)] border-accent"
+                : "bg-card/40 backdrop-blur-sm border-border/40 text-muted hover:text-txt shadow-sm hover:border-accent/30"}`, onClick: () => setSubgroupFilter(tag.id), children: [tag.label, _jsx("span", { className: `ml-1.5 px-1.5 py-0.5 rounded border text-[9px] font-mono leading-none ${isActive ? "bg-black/20 border-black/10" : "bg-black/10 border-white/5"}`, children: tag.count })] }, tag.id));
+    }, [subgroupFilter]);
+    // ── Handlers ───────────────────────────────────────────────────────
+    const toggleSettings = (pluginId) => {
+        const next = new Set();
+        if (!pluginSettingsOpen.has(pluginId))
+            next.add(pluginId);
+        setState("pluginSettingsOpen", next);
+    };
+    const handleParamChange = (pluginId, paramKey, value) => {
+        setPluginConfigs((prev) => ({
+            ...prev,
+            [pluginId]: { ...prev[pluginId], [paramKey]: value },
+        }));
+    };
+    const handleConfigSave = async (pluginId) => {
+        // Showcase plugin: no-op save (it's not a real plugin)
+        if (pluginId === "__ui-showcase__")
+            return;
+        const config = pluginConfigs[pluginId] ?? {};
+        await handlePluginConfigSave(pluginId, config);
+        setPluginConfigs((prev) => {
+            const next = { ...prev };
+            delete next[pluginId];
+            return next;
+        });
+    };
+    const handleConfigReset = (pluginId) => {
+        setPluginConfigs((prev) => {
+            const next = { ...prev };
+            delete next[pluginId];
+            return next;
+        });
+    };
+    const handleTestConnection = async (pluginId) => {
+        setTestResults((prev) => {
+            const next = new Map(prev);
+            next.set(pluginId, { success: false, loading: true, durationMs: 0 });
+            return next;
+        });
+        try {
+            const result = await client.testPluginConnection(pluginId);
+            setTestResults((prev) => {
+                const next = new Map(prev);
+                next.set(pluginId, { ...result, loading: false });
+                return next;
+            });
+        }
+        catch (err) {
+            setTestResults((prev) => {
+                const next = new Map(prev);
+                next.set(pluginId, {
+                    success: false,
+                    error: err instanceof Error ? err.message : String(err),
+                    loading: false,
+                    durationMs: 0,
+                });
+                return next;
+            });
+        }
+    };
+    const handleInstallPlugin = async (pluginId, npmName) => {
+        setInstallingPlugins((prev) => new Set(prev).add(pluginId));
+        try {
+            await client.installRegistryPlugin(npmName);
+            await loadPlugins();
+            setActionNotice(`${npmName} installed. Restart required to activate.`, "success");
+        }
+        catch (err) {
+            setActionNotice(`Failed to install ${npmName}: ${err instanceof Error ? err.message : "unknown error"}`, "error", 3800);
+            // Still try to refresh in case install succeeded but restart failed
+            try {
+                await loadPlugins();
+            }
+            catch {
+                /* ignore */
+            }
+        }
+        finally {
+            setInstallingPlugins((prev) => {
+                const next = new Set(prev);
+                next.delete(pluginId);
+                return next;
+            });
+        }
+    };
+    const handleTogglePlugin = useCallback(async (pluginId, enabled) => {
+        let shouldStart = false;
+        setTogglingPlugins((prev) => {
+            if (prev.has(pluginId) || prev.size > 0)
+                return prev;
+            shouldStart = true;
+            return new Set(prev).add(pluginId);
+        });
+        if (!shouldStart)
+            return;
+        try {
+            await handlePluginToggle(pluginId, enabled);
+        }
+        finally {
+            setTogglingPlugins((prev) => {
+                const next = new Set(prev);
+                next.delete(pluginId);
+                return next;
+            });
+        }
+    }, [handlePluginToggle]);
+    const handleOpenPluginExternalUrl = useCallback(async (url) => {
+        try {
+            await openExternalUrl(url);
+        }
+        catch (err) {
+            setActionNotice(err instanceof Error ? err.message : "Failed to open external link.", "error", 4200);
+        }
+    }, [setActionNotice]);
+    // ── Add from directory ──────────────────────────────────────────────
+    const handleAddFromDirectory = async () => {
+        const trimmed = addDirPath.trim();
+        if (!trimmed)
+            return;
+        setAddDirLoading(true);
+        try {
+            await client.installRegistryPlugin(trimmed);
+            await loadPlugins();
+            setAddDirPath("");
+            setAddDirOpen(false);
+            setActionNotice(`Plugin installed from ${trimmed}`, "success");
+        }
+        catch (err) {
+            setActionNotice(`Failed to add plugin: ${err instanceof Error ? err.message : "unknown error"}`, "error", 3800);
+        }
+        setAddDirLoading(false);
+    };
+    // ── Drag-to-reorder handlers ─────────────────────────────────────
+    const handleDragStart = useCallback((e, pluginId) => {
+        dragRef.current = pluginId;
+        setDraggingId(pluginId);
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", pluginId);
+    }, []);
+    const handleDragOver = useCallback((e, pluginId) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        if (dragRef.current && dragRef.current !== pluginId) {
+            setDragOverId(pluginId);
+        }
+    }, []);
+    const handleDrop = useCallback((e, targetId) => {
+        e.preventDefault();
+        const srcId = dragRef.current;
+        if (!srcId || srcId === targetId) {
+            dragRef.current = null;
+            setDraggingId(null);
+            setDragOverId(null);
+            return;
+        }
+        // Materialize current sorted order, then splice
+        if (!allowCustomOrder)
+            return;
+        setPluginOrder(() => {
+            // Build full order: items in custom order first, then any new ones
+            const allIds = nonDbPlugins.map((p) => p.id);
+            let ids;
+            if (pluginOrder.length > 0) {
+                const known = new Set(pluginOrder);
+                ids = [...pluginOrder, ...allIds.filter((id) => !known.has(id))];
+            }
+            else {
+                ids = sorted.map((p) => p.id);
+                // Pad with any nonDbPlugins not currently in sorted (due to filters)
+                const inSorted = new Set(ids);
+                for (const id of allIds) {
+                    if (!inSorted.has(id))
+                        ids.push(id);
+                }
+            }
+            const fromIdx = ids.indexOf(srcId);
+            const toIdx = ids.indexOf(targetId);
+            if (fromIdx === -1 || toIdx === -1)
+                return ids;
+            ids.splice(fromIdx, 1);
+            ids.splice(toIdx, 0, srcId);
+            return ids;
+        });
+        dragRef.current = null;
+        setDraggingId(null);
+        setDragOverId(null);
+    }, [allowCustomOrder, nonDbPlugins, pluginOrder, sorted]);
+    const handleDragEnd = useCallback(() => {
+        dragRef.current = null;
+        setDraggingId(null);
+        setDragOverId(null);
+    }, []);
+    const handleResetOrder = useCallback(() => {
+        setPluginOrder([]);
+        localStorage.removeItem("pluginOrder");
+    }, []);
+    const renderResolvedIcon = useCallback((plugin, options) => {
+        const icon = resolveIcon(plugin);
+        if (!icon) {
+            return _jsx("span", { className: options?.emojiClassName ?? "text-sm", children: "\uD83E\uDDE9" });
+        }
+        if (typeof icon === "string") {
+            const imageSrc = iconImageSource(icon);
+            return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: options?.className ?? "w-5 h-5 rounded-sm object-contain", onError: (e) => {
+                    e.currentTarget.style.display = "none";
+                } })) : (_jsx("span", { className: options?.emojiClassName ?? "text-sm", children: icon }));
+        }
+        const IconComponent = icon;
+        return _jsx(IconComponent, { className: options?.className ?? "w-5 h-5" });
+    }, []);
+    // ── Card renderers ────────────────────────────────────────────────
+    const renderPluginCard = (p) => {
+        const hasParams = p.parameters && p.parameters.length > 0;
+        const isOpen = pluginSettingsOpen.has(p.id);
+        const setCount = hasParams
+            ? p.parameters.filter((param) => param.isSet).length
+            : 0;
+        const totalCount = hasParams ? p.parameters.length : 0;
+        const allParamsSet = !hasParams || setCount === totalCount;
+        const isShowcase = p.id === "__ui-showcase__";
+        const categoryLabel = isShowcase
+            ? "showcase"
+            : p.category === "ai-provider"
+                ? "ai provider"
+                : p.category;
+        const enabledBorder = isShowcase
+            ? "border-l-[3px] border-l-accent"
+            : p.enabled
+                ? !allParamsSet && hasParams
+                    ? "border-l-[3px] border-l-warn"
+                    : "border-l-[3px] border-l-accent"
+                : "";
+        const isToggleBusy = togglingPlugins.has(p.id);
+        const toggleDisabled = isToggleBusy || (hasPluginToggleInFlight && !isToggleBusy);
+        const isDragging = draggingId === p.id;
+        const isDragOver = dragOverId === p.id && draggingId !== p.id;
+        const pluginLinks = getPluginResourceLinks(p);
+        return (_jsxs("li", { draggable: allowCustomOrder, onDragStart: allowCustomOrder ? (e) => handleDragStart(e, p.id) : undefined, onDragOver: allowCustomOrder ? (e) => handleDragOver(e, p.id) : undefined, onDrop: allowCustomOrder ? (e) => handleDrop(e, p.id) : undefined, onDragEnd: allowCustomOrder ? handleDragEnd : undefined, className: `border border-border bg-card transition-colors duration-150 flex flex-col ${enabledBorder} ${isOpen ? "ring-1 ring-accent" : "hover:border-accent/40"} ${isDragging ? "opacity-30" : ""} ${isDragOver ? "ring-2 ring-accent/60" : ""}`, "data-plugin-id": p.id, children: [_jsxs("div", { className: "flex items-center gap-2 px-3 pt-3 pb-1", children: [allowCustomOrder && (_jsx("span", { className: "text-[10px] text-muted opacity-30 hover:opacity-70 cursor-grab active:cursor-grabbing shrink-0 select-none leading-none", title: t("pluginsview.DragToReorder"), children: t("pluginsview.X2807") })), _jsxs("span", { className: "font-bold text-sm flex items-center gap-1.5 min-w-0 truncate flex-1", children: [(() => {
+                                    const icon = resolveIcon(p);
+                                    if (!icon)
+                                        return null;
+                                    if (typeof icon === "string") {
+                                        const imageSrc = iconImageSource(icon);
+                                        return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: "w-5 h-5 rounded-sm object-contain", onError: (e) => {
+                                                e.currentTarget.style.display =
+                                                    "none";
+                                            } })) : (_jsx("span", { className: "text-sm", children: icon }));
+                                    }
+                                    const IconComponent = icon;
+                                    return _jsx(IconComponent, { className: "w-5 h-5" });
+                                })(), p.name] }), isShowcase ? (_jsx("span", { className: "text-[10px] font-bold tracking-wider px-2.5 py-[2px] border border-accent text-txt bg-accent-subtle shrink-0", children: t("pluginsview.DEMO") })) : (_jsx("button", { type: "button", "data-plugin-toggle": p.id, className: `text-[10px] font-bold tracking-wider px-2.5 py-[2px] border transition-colors duration-150 shrink-0 ${p.enabled
+                                ? "bg-accent text-accent-fg border-accent"
+                                : "bg-transparent text-muted border-border hover:text-txt"} ${toggleDisabled
+                                ? "opacity-60 cursor-not-allowed"
+                                : "cursor-pointer"}`, onClick: (e) => {
+                                e.stopPropagation();
+                                void handleTogglePlugin(p.id, !p.enabled);
+                            }, disabled: toggleDisabled, children: isToggleBusy ? "APPLYING" : p.enabled ? "ON" : "OFF" }))] }), _jsxs("div", { className: "flex items-center gap-1.5 px-3 pb-1.5", children: [_jsx("span", { className: "text-[10px] px-1.5 py-px border border-border bg-surface text-muted lowercase tracking-wide whitespace-nowrap", children: categoryLabel }), p.version && (_jsxs("span", { className: "text-[10px] font-mono text-muted opacity-70", children: ["v", p.version] })), p.enabled && !p.isActive && !isShowcase && (_jsx("span", { className: `text-[10px] px-1.5 py-px border lowercase tracking-wide whitespace-nowrap ${p.loadError
+                                ? "border-destructive bg-[rgba(153,27,27,0.04)] text-destructive"
+                                : "border-warn bg-[rgba(234,179,8,0.06)] text-warn"}`, title: p.loadError || "Plugin is enabled but not loaded in the runtime", children: p.loadError ? "load failed" : "not installed" })), isToggleBusy && (_jsx("span", { className: "text-[10px] px-1.5 py-px border border-accent bg-accent-subtle text-txt lowercase tracking-wide whitespace-nowrap", children: t("pluginsview.restarting") }))] }), _jsx("p", { className: "text-xs text-muted px-3 pb-2 flex-1", style: {
+                        display: "-webkit-box",
+                        WebkitLineClamp: 3,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden",
+                    }, children: p.description || "No description available" }), (p.tags?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-3 pb-2", children: p.tags?.slice(0, 4).map((tag) => (_jsx("span", { className: "text-[10px] px-1.5 py-px border border-border/50 bg-black/10 text-muted lowercase tracking-wide whitespace-nowrap", children: tag }, `${p.id}:${tag}`))) })), pluginLinks.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 px-3 pb-2", children: pluginLinks.map((link) => (_jsx(Button, { variant: "outline", size: "sm", className: "h-6 px-2 text-[10px] font-bold border-border/40 text-muted hover:text-txt hover:border-accent hover:bg-accent/5 backdrop-blur-sm transition-all", onClick: (e) => {
+                            e.stopPropagation();
+                            void handleOpenPluginExternalUrl(link.url);
+                        }, title: `${link.label}: ${link.url}`, children: link.label }, `${p.id}:${link.key}`))) })), _jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-t border-border/40 mt-auto bg-black/5", children: [hasParams && !isShowcase ? (_jsxs(_Fragment, { children: [_jsx("span", { className: `inline-block w-2 h-2 rounded-full shadow-[0_0_10px_currentColor] shrink-0 ${allParamsSet
+                                        ? "bg-ok text-ok"
+                                        : "bg-destructive text-destructive"}` }), _jsxs("span", { className: "text-[11px] font-bold tracking-wide text-muted", children: [setCount, "/", totalCount, " ", t("pluginsview.configured")] })] })) : !hasParams && !isShowcase ? (_jsx("span", { className: "text-[11px] font-bold tracking-wide text-muted/60", children: t("pluginsview.NoConfigNeeded") })) : (_jsx("span", { className: "text-[11px] font-bold tracking-wide text-muted/60", children: t("pluginsview.23FieldDemos") })), _jsx("div", { className: "flex-1" }), p.enabled &&
+                            !p.isActive &&
+                            p.npmName &&
+                            !isShowcase &&
+                            !p.loadError && (_jsx(Button, { variant: "default", size: "sm", className: "h-7 px-3 text-[10px] font-bold tracking-wide shadow-sm max-w-[140px] truncate", disabled: installingPlugins.has(p.id), onClick: (e) => {
+                                e.stopPropagation();
+                                handleInstallPlugin(p.id, p.npmName ?? "");
+                            }, children: installingPlugins.has(p.id)
+                                ? installProgress.get(p.npmName ?? "")?.message ||
+                                    "Installing..."
+                                : "Install" })), hasParams && (_jsxs(Button, { variant: "ghost", size: "sm", className: `h-7 px-2.5 text-[11px] font-bold transition-all flex items-center gap-1.5 ${isOpen
+                                ? "text-txt bg-accent/10 hover:bg-accent/20"
+                                : "text-muted hover:text-txt hover:bg-white/5"}`, onClick: (e) => {
+                                e.stopPropagation();
+                                toggleSettings(p.id);
+                            }, title: t("pluginsview.Settings"), children: [_jsx("span", { className: "text-[14px] leading-none", children: "\u2699" }), _jsx("span", { className: `inline-block text-[10px] transition-transform duration-200 ${isOpen ? "rotate-90" : ""}`, children: "\u25B6" })] }))] }), p.enabled && p.validationErrors && p.validationErrors.length > 0 && (_jsx("div", { className: "px-3 py-1.5 border-t border-destructive bg-[rgba(153,27,27,0.04)] text-xs", children: p.validationErrors.map((err) => (_jsxs("div", { className: "text-destructive mb-0.5 text-[10px]", children: [err.field, ": ", err.message] }, `${err.field}:${err.message}`))) })), p.enabled &&
+                    p.validationWarnings &&
+                    p.validationWarnings.length > 0 && (_jsx("div", { className: "px-3 py-1", children: p.validationWarnings.map((w) => (_jsx("div", { className: "text-warn text-[10px]", children: w.message }, `${w.field}:${w.message}`))) }))] }, p.id));
+    };
+    /** Render a grid of plugin cards. */
+    const renderPluginGrid = (plugins) => (_jsx("ul", { className: "grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3 m-0 p-0 list-none", children: plugins.map((p) => renderPluginCard(p)) }));
+    // Resolve the plugin whose settings dialog is currently open.
+    // Exclude ai-provider plugins — those are configured in Settings.
+    const settingsDialogPlugin = Array.from(pluginSettingsOpen)
+        .map((id) => nonDbPlugins.find((plugin) => plugin.id === id) ?? null)
+        .find((plugin) => (plugin?.parameters?.length ?? 0) > 0) ?? null;
+    // ── Game-modal state ──────────────────────────────────────────────
+    const [gameSelectedId, setGameSelectedId] = useState(null);
+    const [gameMobileDetail, setGameMobileDetail] = useState(false);
+    const gameNarrow = typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia("(max-width: 600px)").matches
+        : false;
+    const [connectorExpandedIds, setConnectorExpandedIds] = useState(() => new Set());
+    const [connectorSelectedId, setConnectorSelectedId] = useState(null);
+    const [desktopConnectorLayout, setDesktopConnectorLayout] = useState(() => typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia("(min-width: 1024px)").matches
+        : false);
+    const connectorSectionRefs = useRef({});
+    // Auto-select first visible plugin in game modal
+    const gameVisiblePlugins = visiblePlugins.filter((p) => p.id !== "__ui-showcase__");
+    const effectiveGameSelected = gameVisiblePlugins.find((p) => p.id === gameSelectedId)
+        ? gameSelectedId
+        : (gameVisiblePlugins[0]?.id ?? null);
+    const selectedPlugin = gameVisiblePlugins.find((p) => p.id === effectiveGameSelected) ?? null;
+    const selectedPluginLinks = selectedPlugin
+        ? getPluginResourceLinks(selectedPlugin)
+        : [];
+    useEffect(() => {
+        if (!isSocialMode || !inModal)
+            return;
+        if (pluginStatusFilter !== "disabled")
+            return;
+        setState("pluginStatusFilter", "all");
+    }, [inModal, isSocialMode, pluginStatusFilter, setState]);
+    useEffect(() => {
+        if (!isSocialMode || !inModal)
+            return;
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function")
+            return;
+        const media = window.matchMedia("(min-width: 1024px)");
+        const syncLayout = () => {
+            setDesktopConnectorLayout(media.matches);
+        };
+        syncLayout();
+        if (typeof media.addEventListener === "function") {
+            media.addEventListener("change", syncLayout);
+            return () => media.removeEventListener("change", syncLayout);
+        }
+        media.addListener(syncLayout);
+        return () => media.removeListener(syncLayout);
+    }, [inModal, isSocialMode]);
+    useEffect(() => {
+        if (!isSocialMode || !inModal)
+            return;
+        if (visiblePlugins.length === 0) {
+            setConnectorSelectedId(null);
+            setConnectorExpandedIds(new Set());
+            return;
+        }
+        setConnectorSelectedId((prev) => {
+            if (visiblePlugins.some((plugin) => plugin.id === prev)) {
+                return prev;
+            }
+            return desktopConnectorLayout ? (visiblePlugins[0]?.id ?? null) : null;
+        });
+    }, [desktopConnectorLayout, inModal, isSocialMode, visiblePlugins]);
+    useEffect(() => {
+        if (!isSocialMode || !inModal || !desktopConnectorLayout)
+            return;
+        if (!connectorSelectedId)
+            return;
+        setConnectorExpandedIds(new Set([connectorSelectedId]));
+    }, [connectorSelectedId, desktopConnectorLayout, inModal, isSocialMode]);
+    useEffect(() => {
+        if (!isSocialMode || !inModal || desktopConnectorLayout)
+            return;
+        setConnectorExpandedIds(new Set());
+    }, [desktopConnectorLayout, inModal, isSocialMode]);
+    const scrollConnectorIntoView = useCallback((pluginId) => {
+        const element = connectorSectionRefs.current[pluginId];
+        if (element && typeof element.scrollIntoView === "function") {
+            element.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+    }, []);
+    const handleConnectorSelect = useCallback((pluginId) => {
+        setConnectorSelectedId(pluginId);
+        setConnectorExpandedIds((prev) => {
+            if (desktopConnectorLayout) {
+                return new Set([pluginId]);
+            }
+            const next = new Set(prev);
+            next.add(pluginId);
+            return next;
+        });
+        scrollConnectorIntoView(pluginId);
+    }, [desktopConnectorLayout, scrollConnectorIntoView]);
+    const handleConnectorSectionToggle = useCallback((pluginId) => {
+        setConnectorSelectedId(pluginId);
+        let shouldScroll = false;
+        setConnectorExpandedIds((prev) => {
+            if (desktopConnectorLayout) {
+                // Accordion: toggle off if already open, otherwise open this one only
+                if (prev.has(pluginId))
+                    return new Set();
+                shouldScroll = true;
+                return new Set([pluginId]);
+            }
+            const next = new Set(prev);
+            if (next.has(pluginId))
+                next.delete(pluginId);
+            else
+                next.add(pluginId);
+            return next;
+        });
+        if (desktopConnectorLayout && shouldScroll) {
+            scrollConnectorIntoView(pluginId);
+        }
+    }, [desktopConnectorLayout, scrollConnectorIntoView]);
+    // ── Game-modal render ─────────────────────────────────────────────
+    if (inModal && isSocialMode) {
+        return (_jsxs("div", { "data-testid": "plugins-view-social", className: `flex min-h-full min-w-0 w-full flex-col bg-bg ${desktopConnectorLayout ? "md:flex-row" : ""}`, children: [desktopConnectorLayout && (_jsx("aside", { "data-testid": "connectors-settings-sidebar", className: "flex w-[22rem] shrink-0 border-r border-border/50 bg-bg/35 backdrop-blur-xl", children: _jsxs("div", { className: "flex min-h-full flex-1 flex-col sticky top-0 max-h-screen", children: [_jsxs("div", { className: "border-b border-border/40 px-5 py-5 text-center", children: [_jsx("div", { className: "text-[11px] font-semibold uppercase tracking-[0.18em] text-muted/80", children: "Connectors" }), _jsxs("div", { className: "mt-2 text-sm text-muted", children: [enabledCount, " enabled of ", categoryPlugins.length] })] }), _jsx("nav", { className: "flex-1 space-y-2 overflow-y-auto px-4 py-4", children: visiblePlugins.map((plugin) => {
+                                    const isSelected = connectorSelectedId === plugin.id;
+                                    const isExpanded = connectorExpandedIds.has(plugin.id);
+                                    const isToggleBusy = togglingPlugins.has(plugin.id);
+                                    const toggleDisabled = isToggleBusy || (hasPluginToggleInFlight && !isToggleBusy);
+                                    return (_jsxs("div", { className: `flex items-center gap-2 rounded-2xl border px-3 py-2 transition-all ${isSelected
+                                            ? "border-accent/40 bg-accent/10 text-txt shadow-[0_10px_30px_rgba(var(--accent),0.08)]"
+                                            : "border-transparent bg-transparent text-muted hover:border-border/60 hover:bg-card/55 hover:text-txt"}`, children: [_jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-3 text-left", onClick: () => handleConnectorSelect(plugin.id), "aria-current": isSelected ? "page" : undefined, children: [_jsx("span", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border p-1.5 ${isSelected
+                                                            ? "border-accent/30 bg-accent/18 text-txt-strong"
+                                                            : "border-border/50 bg-bg-accent/80 text-muted"}`, children: renderResolvedIcon(plugin, {
+                                                            className: "h-4 w-4 shrink-0 rounded-sm object-contain",
+                                                            emojiClassName: "text-sm",
+                                                        }) }), _jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold leading-none", children: plugin.name })] }), _jsx("button", { type: "button", className: `shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-bold tracking-[0.16em] transition-colors ${plugin.enabled
+                                                    ? "border-accent bg-accent text-accent-fg"
+                                                    : "border-border bg-transparent text-muted hover:border-accent/40 hover:text-txt"} ${toggleDisabled
+                                                    ? "cursor-not-allowed opacity-60"
+                                                    : "cursor-pointer"}`, onClick: () => void handleTogglePlugin(plugin.id, !plugin.enabled), disabled: toggleDisabled, children: isToggleBusy ? "..." : plugin.enabled ? "ON" : "OFF" }), _jsx("span", { className: `shrink-0 text-muted transition-transform ${isExpanded ? "rotate-90" : ""}`, children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] }, plugin.id));
+                                }) })] }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "sticky top-0 z-20 border-b border-border/50 bg-bg/85 px-4 py-4 shadow-[0_12px_30px_rgba(0,0,0,0.14)] backdrop-blur-xl sm:px-6 lg:px-8", children: _jsx("div", { className: "mx-auto max-w-5xl", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center", children: [_jsx(Input, { type: "text", className: "h-11 w-full rounded-xl border-border/60 bg-card/70 text-sm shadow-sm", placeholder: "Search connectors...", value: pluginSearch, onChange: (e) => setState("pluginSearch", e.target.value) }), _jsx("div", { className: "flex shrink-0 gap-1.5 rounded-xl border border-white/5 bg-black/10 p-1", children: ["all", "enabled"].map((status) => (_jsx(Button, { variant: effectiveStatusFilter === status ? "default" : "ghost", size: "sm", className: `h-8 px-3 text-[11px] font-bold tracking-wide transition-all ${effectiveStatusFilter === status
+                                                    ? "shadow-sm"
+                                                    : "text-muted hover:bg-white/5 hover:text-txt"}`, onClick: () => setState("pluginStatusFilter", status), children: status === "all"
+                                                    ? `All (${categoryPlugins.length})`
+                                                    : `Enabled (${enabledCount})` }, status))) })] }) }) }), _jsxs("div", { className: "mx-auto max-w-5xl px-4 py-4 sm:px-6 sm:py-5 lg:px-8 lg:py-6", children: [hasPluginToggleInFlight && (_jsx("div", { className: "mb-4 rounded-2xl border border-accent bg-accent-subtle px-4 py-3 text-[11px] text-txt", children: t("pluginsview.ApplyingPluginChan") })), visiblePlugins.length === 0 ? (_jsx("div", { className: "rounded-2xl border border-dashed border-border px-5 py-10 text-center text-muted", children: effectiveSearch
+                                        ? "No connectors match your search."
+                                        : "No connectors match your filters." })) : (_jsx("div", { "data-testid": "connectors-settings-content", className: "space-y-4", children: (desktopConnectorLayout
+                                        ? visiblePlugins.filter((p) => p.id === connectorSelectedId)
+                                        : visiblePlugins).map((plugin) => {
+                                        const hasParams = (plugin.parameters?.length ?? 0) > 0 &&
+                                            plugin.id !== "__ui-showcase__";
+                                        const isExpanded = connectorExpandedIds.has(plugin.id);
+                                        const isSelected = connectorSelectedId === plugin.id;
+                                        const setCount = hasParams
+                                            ? plugin.parameters.filter((param) => param.isSet).length
+                                            : 0;
+                                        const totalCount = hasParams ? plugin.parameters.length : 0;
+                                        const allParamsSet = !hasParams || setCount === totalCount;
+                                        const isToggleBusy = togglingPlugins.has(plugin.id);
+                                        const toggleDisabled = isToggleBusy || (hasPluginToggleInFlight && !isToggleBusy);
+                                        const isSaving = pluginSaving.has(plugin.id);
+                                        const saveSuccess = pluginSaveSuccess.has(plugin.id);
+                                        const testResult = testResults.get(plugin.id);
+                                        const pluginLinks = getPluginResourceLinks(plugin);
+                                        return (_jsxs("section", { ref: (element) => {
+                                                connectorSectionRefs.current[plugin.id] = element;
+                                            }, "data-testid": `connector-section-${plugin.id}`, className: `overflow-hidden rounded-[1.4rem] border bg-card/90 shadow-sm transition-all ${isSelected
+                                                ? "border-accent/35 shadow-[0_18px_40px_rgba(var(--accent),0.08)]"
+                                                : "border-border/50"}`, children: [_jsxs("div", { className: "flex items-start gap-3 px-4 py-4 sm:px-5", children: [_jsxs("button", { type: "button", "data-testid": `connector-header-${plugin.id}`, className: "flex min-w-0 flex-1 items-start gap-3 text-left", onClick: () => handleConnectorSectionToggle(plugin.id), children: [_jsx("span", { className: `mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border p-2.5 ${isSelected
+                                                                        ? "border-accent/30 bg-accent/18 text-txt-strong"
+                                                                        : "border-border/50 bg-bg-accent/80 text-muted"}`, children: renderResolvedIcon(plugin, {
+                                                                        className: "h-4 w-4 shrink-0 rounded-sm object-contain",
+                                                                        emojiClassName: "text-base",
+                                                                    }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-semibold text-txt", children: plugin.name }), _jsx("span", { className: `rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] ${allParamsSet
+                                                                                        ? "border-ok/30 bg-ok/10 text-ok"
+                                                                                        : "border-warn/30 bg-warn/10 text-warn"}`, children: allParamsSet ? "Ready" : "Needs setup" }), plugin.version && (_jsxs("span", { className: "text-[11px] font-mono text-muted/80", children: ["v", plugin.version] }))] }), _jsx("span", { className: "mt-1 block text-sm text-muted", children: plugin.description || "No description available" }), _jsxs("span", { className: "mt-2 flex flex-wrap items-center gap-2 text-[11px] text-muted", children: [_jsx("span", { children: hasParams
+                                                                                        ? `${setCount}/${totalCount} configured`
+                                                                                        : "No configuration needed" }), plugin.enabled && !plugin.isActive && (_jsx("span", { className: `rounded-full border px-2 py-0.5 ${plugin.loadError
+                                                                                        ? "border-danger/30 bg-danger/10 text-danger"
+                                                                                        : "border-warn/30 bg-warn/10 text-warn"}`, children: plugin.loadError
+                                                                                        ? "Load failed"
+                                                                                        : "Not installed" }))] })] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("button", { type: "button", className: `rounded-full border px-3 py-1.5 text-[10px] font-bold tracking-[0.16em] transition-colors ${plugin.enabled
+                                                                        ? "border-accent bg-accent text-accent-fg"
+                                                                        : "border-border bg-transparent text-muted hover:border-accent/40 hover:text-txt"} ${toggleDisabled
+                                                                        ? "cursor-not-allowed opacity-60"
+                                                                        : "cursor-pointer"}`, onClick: () => void handleTogglePlugin(plugin.id, !plugin.enabled), disabled: toggleDisabled, children: isToggleBusy
+                                                                        ? "..."
+                                                                        : plugin.enabled
+                                                                            ? "ON"
+                                                                            : "OFF" }), _jsxs("button", { type: "button", className: `flex items-center gap-1 rounded-full border px-3 py-1.5 text-[11px] font-semibold transition-colors ${isExpanded
+                                                                        ? "border-accent/40 bg-accent/10 text-txt"
+                                                                        : "border-border/50 text-muted hover:border-accent/40 hover:text-txt"}`, onClick: () => handleConnectorSectionToggle(plugin.id), "aria-expanded": isExpanded, "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${plugin.name}`, children: [_jsx("span", { children: isExpanded ? "Collapse" : "Expand" }), _jsx(ChevronRight, { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}` })] })] })] }), isExpanded && (_jsxs("div", { className: "border-t border-border/40 bg-black/5 px-4 py-4 sm:px-5", children: [plugin.validationErrors &&
+                                                            plugin.validationErrors.length > 0 && (_jsx("div", { className: "mb-4 rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: plugin.validationErrors.map((error) => (_jsxs("div", { children: [error.field, ": ", error.message] }, `${plugin.id}:${error.field}:${error.message}`))) })), plugin.validationWarnings &&
+                                                            plugin.validationWarnings.length > 0 && (_jsx("div", { className: "mb-4 rounded-2xl border border-warn/30 bg-warn/10 px-4 py-3 text-sm text-warn", children: plugin.validationWarnings.map((warning) => (_jsx("div", { children: warning.message }, `${plugin.id}:${warning.field}:${warning.message}`))) })), pluginLinks.length > 0 && (_jsx("div", { className: "mb-4 flex flex-wrap gap-2", children: pluginLinks.map((link) => (_jsx(Button, { variant: "outline", size: "sm", className: "h-8 rounded-xl border-border/40 bg-card/40 px-3 text-[11px] font-semibold text-muted transition-all hover:border-accent hover:bg-accent/5 hover:text-txt", onClick: () => {
+                                                                    void handleOpenPluginExternalUrl(link.url);
+                                                                }, title: `${link.label}: ${link.url}`, children: link.label }, `${plugin.id}:${link.key}`))) })), plugin.enabled &&
+                                                            !plugin.isActive &&
+                                                            plugin.npmName &&
+                                                            !plugin.loadError && (_jsx("div", { className: "mb-4 rounded-2xl border border-warn/30 bg-warn/10 px-4 py-3 text-sm text-txt", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { children: "Install this connector to activate it in the runtime." }), _jsx(Button, { variant: "default", size: "sm", className: "h-8 rounded-xl px-4 text-[11px] font-bold", disabled: installingPlugins.has(plugin.id), onClick: () => handleInstallPlugin(plugin.id, plugin.npmName ?? ""), children: installingPlugins.has(plugin.id)
+                                                                            ? installProgress.get(plugin.npmName ?? "")?.message || "Installing..."
+                                                                            : "Install Plugin" })] }) })), hasParams ? (_jsxs("div", { className: "space-y-4", children: [_jsx(PluginConfigForm, { plugin: plugin, pluginConfigs: pluginConfigs, onParamChange: handleParamChange }), plugin.id === "whatsapp" && (_jsx(WhatsAppQrOverlay, { accountId: "default" }))] })) : (_jsx("div", { className: "rounded-2xl border border-border/40 bg-card/40 px-4 py-3 text-sm text-muted", children: "No configuration needed." })), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [plugin.isActive && (_jsx(Button, { variant: testResult?.success
+                                                                        ? "default"
+                                                                        : testResult?.error
+                                                                            ? "destructive"
+                                                                            : "outline", size: "sm", className: `h-8 rounded-xl px-4 text-[11px] font-bold transition-all ${testResult?.loading
+                                                                        ? "cursor-wait opacity-70"
+                                                                        : testResult?.success
+                                                                            ? "border-ok bg-ok text-ok-fg hover:bg-ok/90"
+                                                                            : testResult?.error
+                                                                                ? "border-danger bg-danger text-danger-fg hover:bg-danger/90"
+                                                                                : "border-border/40 bg-card/40 hover:border-accent/40"}`, disabled: testResult?.loading, onClick: () => void handleTestConnection(plugin.id), children: testResult?.loading
+                                                                        ? "Testing..."
+                                                                        : testResult?.success
+                                                                            ? `OK (${testResult.durationMs}ms)`
+                                                                            : testResult?.error
+                                                                                ? `Failed: ${testResult.error}`
+                                                                                : "Test Connection" })), hasParams && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-8 rounded-xl px-4 text-[11px] font-semibold text-muted hover:text-txt", onClick: () => handleConfigReset(plugin.id), children: "Reset" }), _jsx(Button, { variant: saveSuccess ? "default" : "secondary", size: "sm", className: `h-8 rounded-xl px-4 text-[11px] font-bold transition-all ${saveSuccess
+                                                                                ? "bg-ok text-ok-fg hover:bg-ok/90"
+                                                                                : "bg-accent text-accent-fg hover:bg-accent/90"}`, onClick: () => void handleConfigSave(plugin.id), disabled: isSaving, children: isSaving
+                                                                                ? "Saving..."
+                                                                                : saveSuccess
+                                                                                    ? "Saved"
+                                                                                    : "Save Settings" })] }))] })] }))] }, plugin.id));
+                                    }) }))] })] })] }));
+    }
+    if (inModal) {
+        const sectionTitle = mode === "social"
+            ? "Connectors"
+            : mode === "connectors"
+                ? "Connectors"
+                : label;
+        return (_jsxs("div", { className: "plugins-game-modal plugins-game-modal--inline", children: [_jsxs("div", { className: `plugins-game-list-panel${gameNarrow && gameMobileDetail ? " is-hidden" : ""}`, children: [_jsx("div", { className: "plugins-game-list-head", children: _jsx("div", { className: "plugins-game-section-title", children: sectionTitle }) }), _jsx("div", { className: "plugins-game-list-scroll", children: gameVisiblePlugins.length === 0 ? (_jsxs("div", { className: "plugins-game-list-empty", children: ["No ", resultLabel, " ", t("pluginsview.found")] })) : (gameVisiblePlugins.map((p) => (_jsxs("button", { type: "button", className: `plugins-game-card${effectiveGameSelected === p.id ? " is-selected" : ""}${!p.enabled ? " is-disabled" : ""}`, onClick: () => {
+                                    setGameSelectedId(p.id);
+                                    if (gameNarrow)
+                                        setGameMobileDetail(true);
+                                }, children: [_jsx("div", { className: "plugins-game-card-icon-shell", children: _jsx("span", { className: "plugins-game-card-icon", children: (() => {
+                                                const icon = resolveIcon(p);
+                                                if (!icon)
+                                                    return "🧩";
+                                                if (typeof icon === "string") {
+                                                    const imageSrc = iconImageSource(icon);
+                                                    return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: "plugins-game-card-icon", style: { objectFit: "contain" } })) : (icon);
+                                                }
+                                                const IconComponent = icon;
+                                                return _jsx(IconComponent, { className: "w-5 h-5" });
+                                            })() }) }), _jsxs("div", { className: "plugins-game-card-body", children: [_jsx("div", { className: "plugins-game-card-name", children: p.name }), _jsx("div", { className: "plugins-game-card-meta", children: _jsx("span", { className: `plugins-game-badge ${p.enabled ? "is-on" : "is-off"}`, children: p.enabled ? "ON" : "OFF" }) })] })] }, p.id)))) })] }), _jsx("div", { className: `plugins-game-detail-panel${gameNarrow && !gameMobileDetail ? " is-hidden" : ""}`, children: selectedPlugin ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "plugins-game-detail-head", children: [gameNarrow && (_jsx("button", { type: "button", className: "plugins-game-back-btn", onClick: () => setGameMobileDetail(false), children: t("pluginsview.Back") })), _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: (() => {
+                                                        const icon = resolveIcon(selectedPlugin);
+                                                        if (!icon)
+                                                            return "🧩";
+                                                        if (typeof icon === "string") {
+                                                            const imageSrc = iconImageSource(icon);
+                                                            return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: "plugins-game-detail-icon" })) : (icon);
+                                                        }
+                                                        const IconComponent = icon;
+                                                        return _jsx(IconComponent, { className: "w-6 h-6" });
+                                                    })() }) }), _jsxs("div", { className: "plugins-game-detail-main", children: [_jsx("div", { className: "plugins-game-detail-name", children: selectedPlugin.name }), selectedPlugin.version && (_jsxs("span", { className: "plugins-game-version", children: ["v", selectedPlugin.version] }))] }), _jsx("button", { type: "button", className: `plugins-game-toggle ${selectedPlugin.enabled ? "is-on" : "is-off"}`, onClick: () => void handleTogglePlugin(selectedPlugin.id, !selectedPlugin.enabled), disabled: togglingPlugins.has(selectedPlugin.id), children: selectedPlugin.enabled ? "ON" : "OFF" })] })] }), _jsx("div", { className: "plugins-game-detail-description", children: selectedPlugin.description }), (selectedPlugin.tags?.length ?? 0) > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 px-3 pb-3", children: selectedPlugin.tags?.map((tag) => (_jsx("span", { className: "text-[10px] px-1.5 py-px border border-border bg-black/10 text-muted lowercase tracking-wide whitespace-nowrap", children: tag }, `${selectedPlugin.id}:${tag}`))) })), selectedPluginLinks.length > 0 && (_jsx("div", { className: "plugins-game-detail-links flex flex-wrap gap-2 px-3 pb-3", children: selectedPluginLinks.map((link) => (_jsx("button", { type: "button", className: "plugins-game-link-btn border border-border bg-transparent px-2.5 py-1 text-[11px] text-muted transition-colors hover:border-accent hover:text-txt", onClick: () => {
+                                        void handleOpenPluginExternalUrl(link.url);
+                                    }, children: link.label }, `${selectedPlugin.id}:${link.key}`))) })), selectedPlugin.parameters &&
+                                selectedPlugin.parameters.length > 0 && (_jsx("div", { className: "plugins-game-detail-config", children: selectedPlugin.parameters.map((param) => (_jsxs("div", { id: `field-${param.key}`, children: [_jsx("label", { htmlFor: `input-${param.key}`, className: "text-[11px] tracking-wider text-muted block mb-1", children: param.key }), _jsx("input", { id: `input-${param.key}`, type: param.sensitive ? "password" : "text", className: "w-full px-2 py-1 text-[12px]", placeholder: param.description, value: pluginConfigs[selectedPlugin.id]?.[param.key] ??
+                                                param.currentValue ??
+                                                "", onChange: (e) => handleParamChange(selectedPlugin.id, param.key, e.target.value) })] }, param.key))) })), _jsxs("div", { className: "plugins-game-detail-actions", children: [_jsx("button", { type: "button", className: "plugins-game-action-btn", onClick: () => void handleTestConnection(selectedPlugin.id), children: t("pluginsview.TestConnection") }), _jsx("button", { type: "button", className: `plugins-game-action-btn plugins-game-save-btn${pluginSaveSuccess.has(selectedPlugin.id) ? " is-saved" : ""}`, onClick: () => void handleConfigSave(selectedPlugin.id), disabled: pluginSaving.has(selectedPlugin.id), children: pluginSaving.has(selectedPlugin.id)
+                                            ? "Saving..."
+                                            : pluginSaveSuccess.has(selectedPlugin.id)
+                                                ? "Saved!"
+                                                : "Save" })] })] })) : (_jsxs("div", { className: "plugins-game-detail-empty", children: [_jsx("span", { className: "plugins-game-detail-empty-icon", children: "\uD83E\uDDE9" }), _jsxs("span", { className: "plugins-game-detail-empty-text", children: [t("pluginsview.SelectA"), " ", isConnectorLikeMode ? "connector" : "plugin", " ", t("pluginsview.toC")] })] })) })] }));
+    }
+    // ── Main render ────────────────────────────────────────────────────
+    return (_jsxs("div", { "data-testid": mode === "social" ? "plugins-view-social" : undefined, className: `relative min-h-0 ${showDesktopSubgroupSidebar ? "md:pl-[18rem]" : ""}`, children: [showDesktopSubgroupSidebar && (_jsx("aside", { className: "hidden md:absolute md:left-0 md:top-0 md:block md:w-64", "data-testid": "plugins-subgroup-sidebar", children: _jsxs("div", { className: "sticky top-0 rounded-[28px] border border-border/50 bg-bg/35 p-5 backdrop-blur-xl shadow-sm", children: [_jsx("div", { className: "mb-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted/80", children: "Plugin Types" }), _jsx("nav", { className: "flex flex-col gap-2", children: subgroupTags.map((tag) => renderSubgroupFilterButton(tag, { sidebar: true })) })] }) })), _jsxs("div", { className: "min-w-0", children: [showToolbar && (_jsxs("div", { className: "flex items-center gap-3 mb-4 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[220px]", children: [_jsx(Input, { type: "text", name: "plugin-search", autoComplete: "off", "data-1p-ignore": true, "data-lpignore": "true", className: "w-full bg-card/60 backdrop-blur-md shadow-inner pr-8 h-9 rounded-xl focus-visible:ring-accent border-border/40", placeholder: searchPlaceholder, value: pluginSearch, onChange: (e) => setState("pluginSearch", e.target.value) }), pluginSearch && (_jsx(Button, { variant: "ghost", size: "icon", className: "absolute right-1 top-1/2 -translate-y-1/2 w-6 h-6 text-muted hover:text-txt rounded-full", onClick: () => setState("pluginSearch", ""), title: t("pluginsview.ClearSearch"), children: "\u2715" }))] }), _jsx("div", { className: "flex gap-1.5 shrink-0 bg-black/10 p-1 rounded-xl border border-white/5", children: ["all", "enabled"].map((s) => (_jsx(Button, { variant: pluginStatusFilter === s ? "default" : "ghost", size: "sm", className: `h-7 px-3 text-[11px] font-bold tracking-wide rounded-lg transition-all ${pluginStatusFilter === s
+                                        ? "shadow-sm"
+                                        : "text-muted hover:text-txt hover:bg-white/5"}`, onClick: () => setState("pluginStatusFilter", s), children: s === "all"
+                                        ? `All (${categoryPlugins.length})`
+                                        : `Enabled (${enabledCount})` }, s))) }), allowCustomOrder && pluginOrder.length > 0 && (_jsx(Button, { variant: "outline", size: "sm", className: "h-8 px-3 text-[11px] font-bold border-border/40 bg-card/40 backdrop-blur-md shadow-sm rounded-xl shrink-0", onClick: handleResetOrder, title: t("pluginsview.ResetToDefaultSor"), children: t("pluginsview.ResetOrder") })), showPluginManagementActions && (_jsx(Button, { variant: "secondary", size: "sm", className: "h-8 px-4 text-[11px] font-bold tracking-wide border border-accent/30 text-txt bg-accent/10 hover:bg-accent/20 hover:border-accent/50 shadow-sm rounded-xl shrink-0 transition-all", onClick: () => setAddDirOpen(true), children: t("pluginsview.AddPlugin") }))] })), hasPluginToggleInFlight && (_jsx("div", { className: "mb-3 px-3 py-2 border border-accent bg-accent-subtle text-[11px] text-txt", children: t("pluginsview.ApplyingPluginChan") })), showSubgroupFilters && (_jsx("div", { className: "flex items-center gap-2 mb-5 flex-wrap md:hidden", "data-testid": "plugins-subgroup-chips", children: subgroupTags.map((tag) => renderSubgroupFilterButton(tag)) })), _jsx("div", { className: "overflow-y-auto", children: sorted.length === 0 ? (_jsx("div", { className: "text-center py-10 px-5 text-muted border border-dashed border-border", children: effectiveSearch
+                                ? `No ${resultLabel} match your search.`
+                                : `No ${resultLabel} available.` })) : visiblePlugins.length === 0 ? (_jsx("div", { className: "text-center py-10 px-5 text-muted border border-dashed border-border", children: showSubgroupFilters
+                                ? "No plugins match this tag filter."
+                                : `No ${resultLabel} match your filters.` })) : (renderPluginGrid(visiblePlugins)) })] }), settingsDialogPlugin &&
+                (() => {
+                    const p = settingsDialogPlugin;
+                    const isShowcase = p.id === "__ui-showcase__";
+                    const isSaving = pluginSaving.has(p.id);
+                    const saveSuccess = pluginSaveSuccess.has(p.id);
+                    const categoryLabel = isShowcase
+                        ? "showcase"
+                        : p.category === "ai-provider"
+                            ? "ai provider"
+                            : p.category;
+                    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-6 animate-in fade-in duration-200", onClick: (e) => {
+                            if (e.target === e.currentTarget)
+                                toggleSettings(p.id);
+                        }, onKeyDown: (e) => {
+                            if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                toggleSettings(p.id);
+                            }
+                        }, role: "dialog", "aria-modal": "true", children: _jsxs("div", { className: "w-full max-w-2xl max-h-[85vh] border border-border/50 bg-card/90 shadow-2xl flex flex-col overflow-hidden rounded-2xl backdrop-blur-xl", children: [_jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-border/30 bg-black/10 shrink-0", children: [_jsxs("span", { className: "font-bold text-base flex items-center gap-2 flex-1 min-w-0 tracking-wide text-txt", children: [(() => {
+                                                    const icon = resolveIcon(p);
+                                                    if (!icon)
+                                                        return null;
+                                                    if (typeof icon === "string") {
+                                                        const imageSrc = iconImageSource(icon);
+                                                        return imageSrc ? (_jsx("img", { src: imageSrc, alt: "", className: "w-6 h-6 rounded-md object-contain", onError: (e) => {
+                                                                e.currentTarget.style.display = "none";
+                                                            } })) : (_jsx("span", { className: "text-base", children: icon }));
+                                                    }
+                                                    const IconComponent = icon;
+                                                    return _jsx(IconComponent, { className: "w-6 h-6 text-txt" });
+                                                })(), p.name] }), _jsx("span", { className: "text-[10px] px-2 py-0.5 rounded-full border border-border/40 bg-black/20 text-muted lowercase tracking-widest font-bold", children: categoryLabel }), p.version && (_jsxs("span", { className: "text-[10px] font-mono text-muted/70", children: ["v", p.version] })), isShowcase && (_jsx("span", { className: "text-[10px] font-bold tracking-widest px-2.5 py-[2px] border border-accent/30 text-txt bg-accent/10 rounded-full", children: t("pluginsview.DEMO") })), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 text-muted hover:bg-white/10 hover:text-txt rounded-full transition-all shrink-0 ml-2", onClick: () => toggleSettings(p.id), children: "\u2715" })] }), _jsxs("div", { className: "overflow-y-auto flex-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent", children: [_jsxs("div", { className: "px-5 pt-4 pb-1 flex items-center gap-3 flex-wrap text-xs text-muted", children: [p.description && (_jsx("span", { className: "text-[12px] text-muted leading-relaxed", children: p.description })), (p.tags?.length ?? 0) > 0 && (_jsx("span", { className: "flex items-center gap-1.5 flex-wrap", children: p.tags?.map((tag) => (_jsx("span", { className: "text-[10px] px-1.5 py-px border border-border/40 bg-black/10 text-muted lowercase tracking-wide whitespace-nowrap", children: tag }, `${p.id}:${tag}:settings`))) }))] }), (p.npmName || (p.pluginDeps && p.pluginDeps.length > 0)) && (_jsxs("div", { className: "px-5 pb-2 flex items-center gap-3 flex-wrap", children: [p.npmName && (_jsx("span", { className: "font-mono text-[10px] text-muted opacity-50", children: p.npmName })), p.pluginDeps && p.pluginDeps.length > 0 && (_jsxs("span", { className: "flex items-center gap-1 flex-wrap", children: [_jsx("span", { className: "text-[10px] text-muted opacity-60", children: t("pluginsview.dependsOn") }), p.pluginDeps.map((dep) => (_jsx("span", { className: "text-[10px] px-1.5 py-px border border-border bg-accent-subtle text-muted rounded-sm", children: dep }, dep)))] }))] })), _jsxs("div", { className: "px-5 py-3", children: [_jsx(PluginConfigForm, { plugin: p, pluginConfigs: pluginConfigs, onParamChange: handleParamChange }), p.id === "whatsapp" && (_jsx(WhatsAppQrOverlay, { accountId: "default" }))] })] }), !isShowcase && (_jsxs("div", { className: "flex justify-end gap-3 px-5 py-4 border-t border-border/30 shrink-0 bg-black/10", children: [p.enabled && !p.isActive && p.npmName && !p.loadError && (_jsx(Button, { variant: "default", size: "sm", className: "h-8 px-4 text-[11px] font-bold tracking-wide shadow-sm", disabled: installingPlugins.has(p.id), onClick: () => handleInstallPlugin(p.id, p.npmName ?? ""), children: installingPlugins.has(p.id)
+                                                ? installProgress.get(p.npmName ?? "")?.message ||
+                                                    "Installing..."
+                                                : "Install Plugin" })), p.loadError && (_jsx("span", { className: "px-3 py-1.5 text-[11px] text-danger font-bold tracking-wide", title: p.loadError, children: t("pluginsview.PackageBrokenMis") })), p.isActive && (_jsx(Button, { variant: testResults.get(p.id)?.success
+                                                ? "default"
+                                                : testResults.get(p.id)?.error
+                                                    ? "destructive"
+                                                    : "outline", size: "sm", className: `h-8 px-4 text-[11px] font-bold tracking-wide transition-all ${testResults.get(p.id)?.loading
+                                                ? "opacity-70 cursor-wait"
+                                                : testResults.get(p.id)?.success
+                                                    ? "bg-ok text-ok-fg border-ok hover:bg-ok/90"
+                                                    : testResults.get(p.id)?.error
+                                                        ? "bg-danger text-danger-fg border-danger hover:bg-danger/90"
+                                                        : "border-border/40 bg-card/40 backdrop-blur-md shadow-sm hover:border-accent/40"}`, disabled: testResults.get(p.id)?.loading, onClick: () => handleTestConnection(p.id), children: testResults.get(p.id)?.loading
+                                                ? "Testing..."
+                                                : testResults.get(p.id)?.success
+                                                    ? `\u2713 OK (${testResults.get(p.id)?.durationMs}ms)`
+                                                    : testResults.get(p.id)?.error
+                                                        ? `\u2715 ${testResults.get(p.id)?.error}`
+                                                        : "Test Connection" })), _jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-4 text-[12px] font-bold text-muted hover:text-txt transition-all", onClick: () => handleConfigReset(p.id), children: t("pluginsview.Reset") }), _jsx(Button, { variant: saveSuccess ? "default" : "secondary", size: "sm", className: `h-8 px-5 text-[12px] font-bold tracking-wide transition-all ${saveSuccess
+                                                ? "bg-ok text-ok-fg hover:bg-ok/90"
+                                                : "bg-accent text-accent-fg hover:bg-accent/90 shadow-lg shadow-accent/20"}`, onClick: () => handleConfigSave(p.id), disabled: isSaving, children: isSaving
+                                                ? "Saving..."
+                                                : saveSuccess
+                                                    ? "\u2713 Saved"
+                                                    : "Save Settings" })] }))] }) }));
+                })(), addDirOpen && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-6 duration-200 animate-in fade-in", onClick: (e) => {
+                    if (e.target === e.currentTarget) {
+                        setAddDirOpen(false);
+                        setAddDirPath("");
+                    }
+                }, onKeyDown: (e) => {
+                    if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setAddDirOpen(false);
+                        setAddDirPath("");
+                    }
+                }, role: "dialog", "aria-modal": "true", children: _jsxs("div", { className: "w-full max-w-md border border-border/50 bg-card/90 backdrop-blur-xl p-6 rounded-2xl shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-5", children: [_jsx("div", { className: "font-bold text-base tracking-wide text-txt", children: t("pluginsview.AddPlugin1") }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 text-muted hover:bg-white/10 hover:text-txt rounded-full transition-all shrink-0 ml-2", onClick: () => {
+                                        setAddDirOpen(false);
+                                        setAddDirPath("");
+                                    }, children: "\u2715" })] }), _jsx("p", { className: "text-sm font-medium tracking-wide text-muted mb-4", children: t("pluginsview.EnterThePathToA") }), _jsx(Input, { type: "text", className: "w-full h-10 px-3 border border-border/40 bg-black/20 text-txt text-[13px] font-mono transition-all duration-150 focus-visible:ring-accent rounded-xl shadow-inner placeholder:text-muted/50", placeholder: t("pluginsview.PathToPluginOrP"), value: addDirPath, onChange: (e) => setAddDirPath(e.target.value), onKeyDown: (e) => {
+                                if (e.key === "Enter")
+                                    void handleAddFromDirectory();
+                            } }), _jsxs("div", { className: "flex justify-end gap-3 mt-6", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-8 px-4 text-[12px] font-bold text-muted hover:text-txt transition-all", onClick: () => {
+                                        setAddDirOpen(false);
+                                        setAddDirPath("");
+                                    }, children: t("pluginsview.Cancel") }), _jsx(Button, { variant: "default", size: "sm", className: "h-8 px-6 text-[12px] font-bold tracking-wide shadow-sm", onClick: handleAddFromDirectory, disabled: addDirLoading || !addDirPath.trim(), children: addDirLoading ? "Adding..." : "Add" })] })] }) }))] }));
+}
+/* ── Exported views ────────────────────────────────────────────────── */
+/** Unified plugins view — tag-filtered plugin list. */
+export function PluginsView({ mode = "all", inModal, }) {
+    const label = mode === "social"
+        ? "Connectors"
+        : mode === "connectors"
+            ? "Connectors"
+            : mode === "streaming"
+                ? "Streaming"
+                : "Plugins";
+    return _jsx(PluginListView, { label: label, mode: mode, inModal: inModal });
+}