@compose-market/theme 0.0.2 → 0.0.3

package/dist/components/plugin-tester.js

@@ -0,0 +1,907 @@
+/**
+ * Plugin Tester Component
+ *
+ * Unified testing interface for GOAT, MCP, and Eliza plugins.
+ * Extracts all plugin testing functionality from the playground page.
+ */
+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { useActiveWallet, useActiveAccount } from "thirdweb/react";
+import { inferencePriceWei } from "@/lib/chains.js";
+import { createPaymentFetch } from "@/lib/payment";
+import { useChain } from "@/contexts/ChainContext";
+import { useSession } from "@/hooks/use-session";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+import { useRegistryServers } from "@/hooks/use-registry";
+import { Loader2, RefreshCw, Trash2, Plug, Play, Terminal, AlertCircle, ExternalLink, ChevronsUpDown, Check, } from "lucide-react";
+const API_BASE = (import.meta.env.VITE_API_URL || "https://api.compose.market").replace(/\/+$/, "");
+const CONNECTOR_URL = (import.meta.env.VITE_CONNECTOR_URL || "https://services.compose.market/connector").replace(/\/+$/, "");
+// =============================================================================
+// Helpers
+// =============================================================================
+function generateDefaultArgs(schema) {
+    const result = {};
+    const props = schema.properties;
+    if (!props)
+        return result;
+    for (const [key, prop] of Object.entries(props)) {
+        if (prop.default !== undefined) {
+            result[key] = prop.default;
+        }
+        else if (prop.type === "string") {
+            if (key.toLowerCase().includes("address")) {
+                result[key] = "0x...";
+            }
+            else if (key.toLowerCase().includes("amount")) {
+                result[key] = "0";
+            }
+            else {
+                result[key] = "";
+            }
+        }
+        else if (prop.type === "number" || prop.type === "integer") {
+            result[key] = 0;
+        }
+        else if (prop.type === "boolean") {
+            result[key] = false;
+        }
+        else if (prop.type === "array") {
+            result[key] = [];
+        }
+        else if (prop.type === "object") {
+            result[key] = {};
+        }
+    }
+    return result;
+}
+function formatSchemaHint(schema) {
+    const props = schema.properties;
+    const required = schema.required || [];
+    if (!props)
+        return "No parameters required";
+    const lines = [];
+    for (const [key, prop] of Object.entries(props)) {
+        const isRequired = required.includes(key);
+        const desc = prop.description || "";
+        lines.push(`• ${key}${isRequired ? " *" : ""} (${prop.type || "any"}): ${desc}`);
+    }
+    return lines.join("\n");
+}
+// =============================================================================
+// Component
+// =============================================================================
+export function PluginTester({ sessionActive, budgetRemaining, formatBudget, initialSource = "goat", initialPlugin = "", }) {
+    const wallet = useActiveWallet();
+    const account = useActiveAccount();
+    const { paymentChainId } = useChain();
+    const { composeKeyToken, ensureComposeKeyToken } = useSession();
+    const resultsEndRef = useRef(null);
+    // Common state
+    const [pluginSource, setPluginSource] = useState(initialSource);
+    const [pluginsLoading, setPluginsLoading] = useState(false);
+    const [selectedTool, setSelectedTool] = useState("");
+    const [toolArgs, setToolArgs] = useState("{}");
+    const [toolSchema, setToolSchema] = useState(null);
+    const [pluginResults, setPluginResults] = useState([]);
+    const [executingPlugin, setExecutingPlugin] = useState(false);
+    const [pluginError, setPluginError] = useState(null);
+    // GOAT state
+    const [goatStatus, setGoatStatus] = useState(null);
+    const [pluginTools, setPluginTools] = useState([]);
+    const [selectedPlugin, setSelectedPlugin] = useState(initialSource !== "mcp" ? initialPlugin : "");
+    // MCP state - fetched from centralized registry
+    const mcpRegistryOptions = useMemo(() => ({ origin: 'mcp', available: true }), []);
+    const { data: mcpRegistryData, isLoading: mcpLoading, forceRefresh: forceRefreshMcpRegistry } = useRegistryServers(mcpRegistryOptions);
+    const mcpServers = mcpRegistryData?.servers ?? [];
+    const [mcpServerSearch, setMcpServerSearch] = useState("");
+    const [mcpTools, setMcpTools] = useState([]);
+    const [selectedMcpServer, setSelectedMcpServer] = useState(initialSource === "mcp" && initialPlugin ? `mcp:${initialPlugin}` : "");
+    // Eliza state
+    const [elizaPlugins, setElizaPlugins] = useState([]);
+    const [elizaActions, setElizaActions] = useState([]);
+    const [selectedElizaPlugin, setSelectedElizaPlugin] = useState(initialSource === "eliza" ? initialPlugin : "");
+    const [selectedElizaAction, setSelectedElizaAction] = useState("");
+    // Filtered MCP servers
+    const MAX_MCP_DROPDOWN_ITEMS = 50;
+    const filteredMcpServers = useMemo(() => {
+        if (!mcpServerSearch.trim()) {
+            return mcpServers.slice(0, MAX_MCP_DROPDOWN_ITEMS);
+        }
+        const query = mcpServerSearch.toLowerCase().trim();
+        return mcpServers
+            .filter(s => s.name?.toLowerCase().includes(query) ||
+            s.slug?.toLowerCase().includes(query) ||
+            s.description?.toLowerCase().includes(query))
+            .slice(0, MAX_MCP_DROPDOWN_ITEMS);
+    }, [mcpServers, mcpServerSearch]);
+    // ==========================================================================
+    // GOAT Handlers
+    // ==========================================================================
+    const fetchPluginStatus = async () => {
+        setPluginsLoading(true);
+        try {
+            const response = await fetch(`${CONNECTOR_URL}/plugins/status`);
+            if (!response.ok)
+                throw new Error(`Failed to fetch status: ${response.status}`);
+            const data = await response.json();
+            setGoatStatus(data);
+            if (!selectedPlugin && data.plugins?.length > 0) {
+                setSelectedPlugin(data.plugins[0].id);
+            }
+        }
+        catch (err) {
+            console.error("Failed to fetch plugin status:", err);
+            setPluginError(err instanceof Error ? err.message : "Failed to connect to plugin server");
+        }
+        finally {
+            setPluginsLoading(false);
+        }
+    };
+    const fetchPluginTools = async (pluginId) => {
+        try {
+            const response = await fetch(`${CONNECTOR_URL}/plugins/${encodeURIComponent(pluginId)}/tools`);
+            if (!response.ok)
+                throw new Error(`Failed to fetch tools: ${response.status}`);
+            const data = await response.json();
+            setPluginTools(data.tools || []);
+            if (data.tools?.length > 0) {
+                setSelectedTool(data.tools[0].name);
+                setToolSchema(data.tools[0].parameters);
+                const defaultArgs = data.tools[0].example || generateDefaultArgs(data.tools[0].parameters);
+                setToolArgs(JSON.stringify(defaultArgs, null, 2));
+            }
+        }
+        catch (err) {
+            console.error("Failed to fetch plugin tools:", err);
+            setPluginTools([]);
+        }
+    };
+    const currentTool = pluginTools.find(t => t.name === selectedTool);
+    const handleToolSelect = useCallback((toolName) => {
+        setSelectedTool(toolName);
+        const tool = pluginTools.find(t => t.name === toolName);
+        if (tool) {
+            setToolSchema(tool.parameters);
+            const defaultArgs = tool.example || generateDefaultArgs(tool.parameters);
+            setToolArgs(JSON.stringify(defaultArgs, null, 2));
+        }
+    }, [pluginTools]);
+    const handlePluginChange = useCallback((pluginId) => {
+        setSelectedPlugin(pluginId);
+        setSelectedTool("");
+        setToolSchema(null);
+        setToolArgs("{}");
+    }, []);
+    const handleExecutePlugin = useCallback(async () => {
+        if (!selectedPlugin || !selectedTool || executingPlugin)
+            return;
+        if (!wallet) {
+            setPluginError("Connect wallet to execute plugins");
+            return;
+        }
+        let args = {};
+        try {
+            args = JSON.parse(toolArgs);
+        }
+        catch (e) {
+            setPluginError(`Invalid JSON: ${e instanceof Error ? e.message : "Parse error"}`);
+            return;
+        }
+        setExecutingPlugin(true);
+        setPluginError(null);
+        try {
+            const activeComposeKeyToken = composeKeyToken || await ensureComposeKeyToken();
+            // Chain-aware payment: routes to selected chain
+            const fetchWithPayment = createPaymentFetch({
+                chainId: paymentChainId,
+                account: account,
+                wallet,
+                maxValue: BigInt(inferencePriceWei),
+                sessionToken: activeComposeKeyToken || undefined,
+            });
+            const response = await fetchWithPayment(`${CONNECTOR_URL}/plugins/${encodeURIComponent(selectedPlugin)}/execute`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ tool: selectedTool, args }),
+            });
+            const data = await response.json();
+            const result = {
+                success: data.success ?? response.ok,
+                pluginId: selectedPlugin,
+                tool: selectedTool,
+                result: data.result,
+                error: data.error || data.hint,
+                txHash: data.txHash,
+                explorer: data.explorer,
+                executedBy: data.executedBy,
+                source: "goat",
+            };
+            setPluginResults(prev => [...prev, result]);
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : "Unknown error";
+            setPluginError(errorMsg);
+            setPluginResults(prev => [
+                ...prev,
+                { success: false, pluginId: selectedPlugin, tool: selectedTool, error: errorMsg, source: "goat" },
+            ]);
+        }
+        finally {
+            setExecutingPlugin(false);
+        }
+    }, [selectedPlugin, selectedTool, toolArgs, executingPlugin, wallet, paymentChainId, account, composeKeyToken, ensureComposeKeyToken]);
+    // ==========================================================================
+    // MCP Handlers
+    // ==========================================================================
+    const fetchMcpTools = async (slug) => {
+        setPluginsLoading(true);
+        try {
+            const response = await fetch(`${CONNECTOR_URL}/mcp/servers/${encodeURIComponent(slug)}/tools`);
+            if (!response.ok)
+                throw new Error(`Failed to fetch MCP tools: ${response.status}`);
+            const data = await response.json();
+            setMcpTools(data.tools || []);
+            if (data.tools?.length > 0) {
+                setSelectedTool(data.tools[0].name);
+                setToolSchema(data.tools[0].inputSchema);
+                const defaultArgs = generateDefaultArgs(data.tools[0].inputSchema);
+                setToolArgs(JSON.stringify(defaultArgs, null, 2));
+            }
+        }
+        catch (err) {
+            console.error("Failed to fetch MCP tools:", err);
+            setMcpTools([]);
+            setPluginError(err instanceof Error ? err.message : "Failed to fetch tools");
+        }
+        finally {
+            setPluginsLoading(false);
+        }
+    };
+    const handleMcpServerChange = useCallback((registryId) => {
+        setSelectedMcpServer(registryId);
+        setSelectedTool("");
+        setToolSchema(null);
+        setToolArgs("{}");
+        setMcpTools([]);
+    }, []);
+    const handleMcpToolSelect = useCallback((toolName) => {
+        setSelectedTool(toolName);
+        const tool = mcpTools.find(t => t.name === toolName);
+        if (tool) {
+            setToolSchema(tool.inputSchema);
+            const defaultArgs = generateDefaultArgs(tool.inputSchema);
+            setToolArgs(JSON.stringify(defaultArgs, null, 2));
+        }
+    }, [mcpTools]);
+    const currentMcpTool = mcpTools.find(t => t.name === selectedTool);
+    const handleExecuteMcpTool = useCallback(async () => {
+        if (!selectedMcpServer || !selectedTool || executingPlugin)
+            return;
+        if (!wallet) {
+            setPluginError("Connect wallet to execute MCP tools");
+            return;
+        }
+        let args = {};
+        try {
+            args = JSON.parse(toolArgs);
+        }
+        catch (e) {
+            setPluginError(`Invalid JSON: ${e instanceof Error ? e.message : "Parse error"}`);
+            return;
+        }
+        setExecutingPlugin(true);
+        setPluginError(null);
+        try {
+            const activeComposeKeyToken = composeKeyToken || await ensureComposeKeyToken();
+            // Chain-aware payment: routes to selected chain
+            const fetchWithPayment = createPaymentFetch({
+                chainId: paymentChainId,
+                account: account,
+                wallet,
+                maxValue: BigInt(inferencePriceWei),
+                sessionToken: activeComposeKeyToken || undefined,
+            });
+            const response = await fetchWithPayment(`${API_BASE}/api/mcp/servers/${encodeURIComponent(selectedMcpServer)}/call`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ tool: selectedTool, args }),
+            });
+            const data = await response.json();
+            const result = {
+                success: data.success ?? response.ok,
+                pluginId: selectedMcpServer,
+                tool: selectedTool,
+                result: data.content,
+                error: data.error || data.message,
+                source: "mcp",
+            };
+            setPluginResults(prev => [...prev, result]);
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : "Unknown error";
+            setPluginError(errorMsg);
+            setPluginResults(prev => [
+                ...prev,
+                { success: false, pluginId: selectedMcpServer, tool: selectedTool, error: errorMsg, source: "mcp" },
+            ]);
+        }
+        finally {
+            setExecutingPlugin(false);
+        }
+    }, [selectedMcpServer, selectedTool, toolArgs, executingPlugin, wallet, paymentChainId, account, composeKeyToken, ensureComposeKeyToken]);
+    // ==========================================================================
+    // Eliza Handlers
+    // ==========================================================================
+    const fetchElizaPlugins = async () => {
+        setPluginsLoading(true);
+        try {
+            const response = await fetch(`${CONNECTOR_URL}/eliza/plugins`);
+            if (!response.ok)
+                throw new Error(`Failed to fetch Eliza plugins: ${response.status}`);
+            const data = await response.json();
+            setElizaPlugins(data.plugins || []);
+        }
+        catch (err) {
+            console.error("Failed to fetch Eliza plugins:", err);
+            setPluginError(err instanceof Error ? err.message : "Failed to fetch Eliza plugins");
+        }
+        finally {
+            setPluginsLoading(false);
+        }
+    };
+    const fetchElizaActions = async (pluginId) => {
+        setPluginsLoading(true);
+        setElizaActions([]);
+        try {
+            const response = await fetch(`${CONNECTOR_URL}/eliza/plugins/${encodeURIComponent(pluginId)}/actions`);
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.error || `Failed to fetch actions: ${response.status}`);
+            }
+            const data = await response.json();
+            setElizaActions(data.actions || []);
+            if (data.actions?.length > 0) {
+                handleElizaActionChange(data.actions[0].name);
+            }
+        }
+        catch (err) {
+            console.error("Failed to fetch Eliza actions:", err);
+            setPluginError(err instanceof Error ? err.message : "Failed to fetch actions");
+        }
+        finally {
+            setPluginsLoading(false);
+        }
+    };
+    const handleElizaPluginChange = (pluginId) => {
+        setSelectedElizaPlugin(pluginId);
+        setSelectedElizaAction("");
+        setElizaActions([]);
+        setSelectedTool("");
+        setToolSchema(null);
+        setToolArgs("{}");
+        setPluginError(null);
+        if (pluginId)
+            fetchElizaActions(pluginId);
+    };
+    const handleElizaActionChange = (actionName) => {
+        setSelectedElizaAction(actionName);
+        setSelectedTool(actionName);
+        setPluginError(null);
+        const action = elizaActions.find(a => a.name === actionName);
+        if (action) {
+            const defaultArgs = {};
+            for (const param of action.parameters) {
+                if (param.example !== undefined) {
+                    defaultArgs[param.name] = param.example;
+                }
+                else if (param.default !== undefined) {
+                    defaultArgs[param.name] = param.default;
+                }
+                else if (param.required) {
+                    switch (param.type) {
+                        case "string":
+                            defaultArgs[param.name] = param.enum?.[0] || "";
+                            break;
+                        case "number":
+                            defaultArgs[param.name] = 0;
+                            break;
+                        case "boolean":
+                            defaultArgs[param.name] = false;
+                            break;
+                        case "array":
+                            defaultArgs[param.name] = [];
+                            break;
+                        case "object":
+                            defaultArgs[param.name] = {};
+                            break;
+                    }
+                }
+            }
+            setToolArgs(JSON.stringify(defaultArgs, null, 2));
+            setToolSchema({
+                properties: action.parameters.reduce((acc, p) => {
+                    acc[p.name] = { type: p.type, description: p.description, enum: p.enum, default: p.default };
+                    return acc;
+                }, {}),
+                required: action.parameters.filter(p => p.required).map(p => p.name),
+            });
+        }
+    };
+    const handleElizaExecution = useCallback(async () => {
+        if (!selectedElizaPlugin || !selectedElizaAction || executingPlugin)
+            return;
+        if (!wallet) {
+            setPluginError("Connect wallet to execute Eliza actions");
+            return;
+        }
+        let params = {};
+        try {
+            params = JSON.parse(toolArgs);
+        }
+        catch (e) {
+            setPluginError(`Invalid JSON: ${e instanceof Error ? e.message : "Parse error"}`);
+            return;
+        }
+        setExecutingPlugin(true);
+        setPluginError(null);
+        try {
+            const activeComposeKeyToken = composeKeyToken || await ensureComposeKeyToken();
+            // Chain-aware payment: routes to selected chain
+            const fetchWithPayment = createPaymentFetch({
+                chainId: paymentChainId,
+                account: account,
+                wallet,
+                maxValue: BigInt(inferencePriceWei),
+                sessionToken: activeComposeKeyToken || undefined,
+            });
+            const response = await fetchWithPayment(`${CONNECTOR_URL}/eliza/plugins/${encodeURIComponent(selectedElizaPlugin)}/execute`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ action: selectedElizaAction, params }),
+            });
+            const data = await response.json();
+            const result = {
+                success: data.success ?? response.ok,
+                pluginId: selectedElizaPlugin,
+                tool: selectedElizaAction,
+                result: data.result || data.text,
+                error: data.error,
+                source: "eliza",
+                executionTime: data.executionTime,
+            };
+            setPluginResults(prev => [...prev, result]);
+        }
+        catch (err) {
+            const errorMsg = err instanceof Error ? err.message : "Unknown error";
+            setPluginError(errorMsg);
+            setPluginResults(prev => [
+                ...prev,
+                { success: false, pluginId: selectedElizaPlugin, tool: selectedElizaAction, error: errorMsg, source: "eliza" },
+            ]);
+        }
+        finally {
+            setExecutingPlugin(false);
+        }
+    }, [selectedElizaPlugin, selectedElizaAction, toolArgs, executingPlugin, wallet, paymentChainId, account, composeKeyToken, ensureComposeKeyToken]);
+    // ==========================================================================
+    // Source Change Handler
+    // ==========================================================================
+    const handleSourceChange = useCallback((source) => {
+        setPluginSource(source);
+        setSelectedTool("");
+        setToolSchema(null);
+        setToolArgs("{}");
+        setPluginError(null);
+        if (source !== "goat")
+            setSelectedPlugin("");
+        if (source !== "mcp")
+            setSelectedMcpServer("");
+        if (source !== "eliza") {
+            setSelectedElizaPlugin("");
+            setSelectedElizaAction("");
+        }
+    }, []);
+    const handleClearResults = useCallback(() => {
+        setPluginResults([]);
+        setPluginError(null);
+    }, []);
+    // ==========================================================================
+    // Effects
+    // ==========================================================================
+    useEffect(() => {
+        if (pluginSource === "goat" && !goatStatus) {
+            fetchPluginStatus();
+        }
+        else if (pluginSource === "eliza" && elizaPlugins.length === 0) {
+            fetchElizaPlugins();
+        }
+    }, [pluginSource, goatStatus, elizaPlugins.length]);
+    useEffect(() => {
+        if (selectedMcpServer && pluginSource === "mcp") {
+            const slug = selectedMcpServer.replace(/^mcp:/, '');
+            if (slug)
+                fetchMcpTools(slug);
+        }
+    }, [selectedMcpServer, pluginSource]);
+    useEffect(() => {
+        if (selectedPlugin && pluginSource === "goat") {
+            fetchPluginTools(selectedPlugin);
+        }
+    }, [selectedPlugin, pluginSource]);
+    useEffect(() => {
+        if (selectedElizaPlugin && pluginSource === "eliza") {
+            fetchElizaActions(selectedElizaPlugin);
+        }
+    }, [selectedElizaPlugin, pluginSource]);
+    useEffect(() => {
+        resultsEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [pluginResults]);
+    // ==========================================================================
+    // Render
+    // ==========================================================================
+    return (<div className="flex flex-col h-full">
+            {/* Header: Source and Plugin/Server selectors */}
+            <div className="shrink-0 p-3 lg:p-4 border-b border-zinc-800">
+                <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 flex-wrap">
+                    {/* Source selector */}
+                    <Select value={pluginSource} onValueChange={(v) => handleSourceChange(v)}>
+                        <SelectTrigger className="w-full sm:w-28 lg:w-32 bg-zinc-900 border-zinc-700 h-9">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent className="bg-zinc-900 border-zinc-700">
+                            <SelectItem value="goat">
+                                <div className="flex items-center gap-2">
+                                    <Badge className="bg-green-500/20 text-green-400 border-green-500/40 text-[10px] px-1.5">GOAT</Badge>
+                                    <span className="text-[10px] text-zinc-500">DeFi</span>
+                                </div>
+                            </SelectItem>
+                            <SelectItem value="mcp">
+                                <div className="flex items-center gap-2">
+                                    <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/40 text-[10px] px-1.5">MCP</Badge>
+                                    <span className="text-[10px] text-zinc-500">Servers</span>
+                                </div>
+                            </SelectItem>
+                            <SelectItem value="eliza">
+                                <div className="flex items-center gap-2">
+                                    <Badge className="bg-fuchsia-500/20 text-fuchsia-400 border-fuchsia-500/40 text-[10px] px-1.5">Eliza</Badge>
+                                    <span className="text-[10px] text-zinc-500">AI Agents</span>
+                                </div>
+                            </SelectItem>
+                        </SelectContent>
+                    </Select>
+
+                    {/* GOAT Plugin selector */}
+                    {pluginSource === "goat" && (<>
+                            <Select value={selectedPlugin} onValueChange={handlePluginChange} disabled={!goatStatus?.plugins?.length}>
+                                <SelectTrigger className="w-full sm:w-40 lg:w-52 bg-zinc-900 border-zinc-700 h-9">
+                                    <SelectValue placeholder={pluginsLoading ? "Loading..." : "Select plugin"}/>
+                                </SelectTrigger>
+                                <SelectContent className="bg-zinc-900 border-zinc-700 max-h-80">
+                                    {!goatStatus?.plugins?.length ? (<div className="p-2 text-zinc-500 text-sm">No plugins available</div>) : (goatStatus.plugins.map((plugin) => (<SelectItem key={plugin.id} value={plugin.id}>
+                                                <div className="flex items-center gap-2">
+                                                    <span className="font-mono text-xs">{plugin.name}</span>
+                                                    <Badge variant="outline" className="text-[9px] px-1 py-0">{plugin.toolCount}</Badge>
+                                                </div>
+                                            </SelectItem>)))}
+                                </SelectContent>
+                            </Select>
+
+                            <Select value={selectedTool} onValueChange={handleToolSelect} disabled={pluginTools.length === 0}>
+                                <SelectTrigger className="w-full sm:flex-1 lg:w-56 xl:w-72 bg-zinc-900 border-zinc-700 h-9">
+                                    <SelectValue placeholder={pluginTools.length === 0 ? "Select plugin first" : "Select tool"}/>
+                                </SelectTrigger>
+                                <SelectContent className="bg-zinc-900 border-zinc-700 max-h-96">
+                                    {pluginTools.length === 0 ? (<div className="p-2 text-zinc-500 text-sm">No tools available</div>) : (pluginTools.map((tool) => (<SelectItem key={tool.name} value={tool.name}>
+                                                <div className="flex flex-col py-0.5">
+                                                    <span className="font-mono text-xs">{tool.name}</span>
+                                                    <span className="text-[10px] text-zinc-500 truncate max-w-64">{tool.description}</span>
+                                                </div>
+                                            </SelectItem>)))}
+                                </SelectContent>
+                            </Select>
+
+                            {goatStatus && (<div className="flex items-center gap-2 text-xs">
+                                    <div className={cn("w-2 h-2 rounded-full", goatStatus.initialized ? "bg-emerald-500" : "bg-red-500")}/>
+                                    <span className="text-zinc-500">
+                                        {goatStatus.initialized ? `${goatStatus.totalTools} tools • ${goatStatus.chain}` : "Offline"}
+                                    </span>
+                                </div>)}
+                        </>)}
+
+                    {/* MCP Server selector */}
+                    {pluginSource === "mcp" && (<>
+                            <Popover>
+                                <PopoverTrigger asChild>
+                                    <Button variant="outline" role="combobox" className="w-full sm:w-40 lg:w-52 bg-zinc-900 border-zinc-700 h-9 justify-between text-left font-normal">
+                                        <span className="truncate font-mono text-xs">
+                                            {mcpLoading
+                ? "Loading..."
+                : selectedMcpServer
+                    ? mcpServers.find(s => s.registryId === selectedMcpServer)?.name || selectedMcpServer.replace(/^mcp:/, '')
+                    : "Select server..."}
+                                        </span>
+                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50"/>
+                                    </Button>
+                                </PopoverTrigger>
+                                <PopoverContent className="w-[300px] p-0 bg-zinc-900 border-zinc-700" align="start">
+                                    <Command className="bg-zinc-900" shouldFilter={false}>
+                                        <CommandInput placeholder="Search servers..." className="h-9" value={mcpServerSearch} onValueChange={setMcpServerSearch}/>
+                                        <CommandList className="max-h-[300px]">
+                                            {mcpLoading ? (<div className="p-4 text-center text-zinc-500">
+                                                    <Loader2 className="h-4 w-4 animate-spin mx-auto mb-2"/>
+                                                    Loading servers...
+                                                </div>) : filteredMcpServers.length === 0 ? (<CommandEmpty>No servers match "{mcpServerSearch}"</CommandEmpty>) : (<CommandGroup heading={mcpServerSearch ? `${filteredMcpServers.length} matches` : `Showing ${filteredMcpServers.length} of ${mcpServers.length.toLocaleString()}`}>
+                                                    {filteredMcpServers.map((server) => (<CommandItem key={server.registryId} value={server.registryId} onSelect={() => {
+                        handleMcpServerChange(server.registryId);
+                        setMcpServerSearch("");
+                    }} className="cursor-pointer">
+                                                            <div className="flex items-center gap-2 w-full">
+                                                                <Check className={cn("h-4 w-4 shrink-0", selectedMcpServer === server.registryId ? "opacity-100" : "opacity-0")}/>
+                                                                <div className="flex flex-col min-w-0 flex-1">
+                                                                    <span className="font-mono text-xs truncate">{server.name || server.slug}</span>
+                                                                    <span className="text-[10px] text-zinc-500 truncate">{server.description || "No description"}</span>
+                                                                </div>
+                                                                {server.transport === 'http' && (<Badge variant="outline" className="text-[9px] px-1 py-0 border-cyan-500/50 text-cyan-400 shrink-0">remote</Badge>)}
+                                                            </div>
+                                                        </CommandItem>))}
+                                                </CommandGroup>)}
+                                        </CommandList>
+                                    </Command>
+                                </PopoverContent>
+                            </Popover>
+
+                            <Select value={selectedTool} onValueChange={handleMcpToolSelect} disabled={mcpTools.length === 0}>
+                                <SelectTrigger className="w-full sm:flex-1 lg:w-56 xl:w-72 bg-zinc-900 border-zinc-700 h-9">
+                                    <SelectValue placeholder={mcpTools.length === 0 ? "Select server first" : "Select tool"}/>
+                                </SelectTrigger>
+                                <SelectContent className="bg-zinc-900 border-zinc-700 max-h-96">
+                                    {mcpTools.length === 0 ? (<div className="p-2 text-zinc-500 text-sm">No tools available</div>) : (mcpTools.map((tool) => (<SelectItem key={tool.name} value={tool.name}>
+                                                <div className="flex flex-col py-0.5">
+                                                    <span className="font-mono text-xs">{tool.name}</span>
+                                                    <span className="text-[10px] text-zinc-500 truncate max-w-48 sm:max-w-64">{tool.description || "No description"}</span>
+                                                </div>
+                                            </SelectItem>)))}
+                                </SelectContent>
+                            </Select>
+
+                            <div className="flex items-center gap-2 text-[10px] sm:text-xs shrink-0">
+                                <div className={cn("w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full", mcpServers.length > 0 ? "bg-purple-500" : "bg-zinc-500")}/>
+                                <span className="text-zinc-500">
+                                    {mcpServers.length > 0 ? `${mcpServers.length.toLocaleString()} servers` : "Loading..."}
+                                </span>
+                            </div>
+                        </>)}
+
+                    {/* Eliza Plugin selector */}
+                    {pluginSource === "eliza" && (<>
+                            <Select value={selectedElizaPlugin} onValueChange={handleElizaPluginChange} disabled={elizaPlugins.length === 0}>
+                                <SelectTrigger className="w-full sm:w-40 lg:w-52 bg-zinc-900 border-zinc-700 h-9">
+                                    <SelectValue placeholder={pluginsLoading ? "Loading..." : "Select plugin"}/>
+                                </SelectTrigger>
+                                <SelectContent className="bg-zinc-900 border-zinc-700 max-h-80">
+                                    {elizaPlugins.length === 0 ? (<div className="p-2 text-zinc-500 text-sm">No plugins available</div>) : (elizaPlugins.map((plugin) => (<SelectItem key={plugin.id} value={plugin.id}>
+                                                <div className="flex items-center gap-2">
+                                                    <span className="font-mono text-xs truncate max-w-24 sm:max-w-40">{plugin.id}</span>
+                                                    {plugin.version && (<Badge variant="outline" className="text-[9px] px-1 py-0 text-zinc-500 hidden sm:flex">{plugin.version}</Badge>)}
+                                                </div>
+                                            </SelectItem>)))}
+                                </SelectContent>
+                            </Select>
+
+                            <Select value={selectedElizaAction} onValueChange={handleElizaActionChange} disabled={elizaActions.length === 0}>
+                                <SelectTrigger className="w-full sm:flex-1 lg:w-56 xl:w-72 bg-zinc-900 border-zinc-700 h-9">
+                                    <SelectValue placeholder={elizaActions.length === 0 ? "Select plugin first" : "Select action"}/>
+                                </SelectTrigger>
+                                <SelectContent className="bg-zinc-900 border-zinc-700 max-h-96">
+                                    {elizaActions.length === 0 ? (<div className="p-2 text-zinc-500 text-sm">No actions available</div>) : (elizaActions.map((action) => (<SelectItem key={action.name} value={action.name}>
+                                                <div className="flex flex-col py-0.5">
+                                                    <span className="font-mono text-xs">{action.name}</span>
+                                                    <span className="text-[10px] text-zinc-500 truncate max-w-48 sm:max-w-64">{action.description}</span>
+                                                </div>
+                                            </SelectItem>)))}
+                                </SelectContent>
+                            </Select>
+
+                            <div className="flex items-center gap-2 text-[10px] sm:text-xs shrink-0">
+                                <div className={cn("w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full", elizaPlugins.length > 0 ? "bg-fuchsia-500" : "bg-zinc-500")}/>
+                                <span className="text-zinc-500">
+                                    {elizaPlugins.length > 0 ? `${elizaPlugins.length} plugins` : "Loading..."}
+                                </span>
+                            </div>
+                        </>)}
+
+                    <Button variant="ghost" size="icon" onClick={pluginSource === "goat" ? fetchPluginStatus : pluginSource === "eliza" ? fetchElizaPlugins : () => forceRefreshMcpRegistry()} disabled={pluginsLoading || mcpLoading} className="text-zinc-400 hover:text-white shrink-0 h-8 w-8 sm:h-9 sm:w-9" title="Refresh">
+                        <RefreshCw className={cn("h-3.5 w-3.5 sm:h-4 sm:w-4", (pluginsLoading || mcpLoading) && "animate-spin")}/>
+                    </Button>
+                </div>
+            </div>
+
+            {/* Results Area */}
+            <ScrollArea className="flex-1 p-4 min-h-0">
+                <div className="space-y-4 max-w-4xl mx-auto">
+                    {pluginResults.length === 0 ? (<div className="text-center py-8 text-zinc-500">
+                            <Plug className="h-12 w-12 mx-auto mb-4 opacity-50"/>
+                            <p className="text-lg">
+                                Test {pluginSource === "goat" ? "GOAT DeFi" : pluginSource === "mcp" ? "MCP Server" : "Eliza AI"} Actions
+                            </p>
+                            <p className="text-sm mt-2">
+                                {sessionActive
+                ? `Budget: ${formatBudget(budgetRemaining)} • Select a ${pluginSource === "goat" ? "plugin" : pluginSource === "mcp" ? "server" : "plugin"} and ${pluginSource === "eliza" ? "action" : "tool"} to execute`
+                : "Start a session to begin"}
+                            </p>
+
+                            {pluginSource === "goat" && goatStatus?.plugins && goatStatus.plugins.length > 0 && (<div className="mt-6 text-left max-w-2xl mx-auto">
+                                    <p className="text-xs text-zinc-600 uppercase tracking-wider mb-3">
+                                        {goatStatus.plugins.length} Plugins • {goatStatus.totalTools} Tools
+                                    </p>
+                                    <div className="grid grid-cols-2 gap-2 text-xs">
+                                        {goatStatus.plugins.map((plugin) => (<button key={plugin.id} onClick={() => handlePluginChange(plugin.id)} className={cn("bg-zinc-900 rounded-lg p-3 border text-left transition-colors", selectedPlugin === plugin.id
+                        ? "border-green-500/50 bg-green-950/20"
+                        : "border-zinc-800 hover:border-zinc-700")}>
+                                                <div className="flex items-center justify-between mb-1">
+                                                    <span className="text-green-400 font-mono text-xs">{plugin.name}</span>
+                                                    <Badge variant="outline" className="text-[9px]">{plugin.toolCount}</Badge>
+                                                </div>
+                                                <p className="text-zinc-500 text-[10px] line-clamp-2">{plugin.description}</p>
+                                            </button>))}
+                                    </div>
+                                </div>)}
+
+                            {pluginSource === "mcp" && mcpServers.length > 0 && (<div className="mt-6 text-left max-w-md mx-auto">
+                                    <p className="text-xs text-zinc-600 uppercase tracking-wider mb-3 text-center">
+                                        {mcpServers.length.toLocaleString()} MCP Servers Available
+                                    </p>
+                                    <p className="text-zinc-500 text-sm text-center">
+                                        Use the <span className="text-purple-400 font-mono">Select server</span> dropdown above to search and select from all available servers.
+                                    </p>
+                                </div>)}
+
+                            {pluginSource === "eliza" && elizaPlugins.length > 0 && (<div className="mt-6 text-left max-w-2xl mx-auto">
+                                    <p className="text-xs text-zinc-600 uppercase tracking-wider mb-3">
+                                        {elizaPlugins.length} ElizaOS Plugins Available
+                                    </p>
+                                    <div className="grid grid-cols-2 gap-2 text-xs">
+                                        {elizaPlugins.slice(0, 8).map((plugin) => (<button key={plugin.id} onClick={() => handleElizaPluginChange(plugin.id)} className={cn("bg-zinc-900 rounded-lg p-3 border text-left transition-colors", selectedElizaPlugin === plugin.id
+                        ? "border-fuchsia-500/50 bg-fuchsia-950/20"
+                        : "border-zinc-800 hover:border-zinc-700")}>
+                                                <div className="flex items-center justify-between mb-1">
+                                                    <span className="text-fuchsia-400 font-mono text-xs">{plugin.id}</span>
+                                                    {plugin.version && (<Badge variant="outline" className="text-[9px] text-zinc-500">{plugin.version}</Badge>)}
+                                                </div>
+                                                <p className="text-zinc-500 text-[10px] line-clamp-2">{plugin.description || "No description"}</p>
+                                            </button>))}
+                                    </div>
+                                </div>)}
+
+                            {pluginsLoading && (<div className="mt-6">
+                                    <Loader2 className="h-5 w-5 animate-spin mx-auto text-cyan-400"/>
+                                    <p className="mt-2 text-sm">
+                                        Loading {pluginSource === "goat" ? "plugins" : pluginSource === "mcp" ? "servers" : "plugins"}...
+                                    </p>
+                                </div>)}
+                        </div>) : (pluginResults.map((result, index) => (<div key={index} className={cn("rounded-lg p-4 border", result.success
+                ? "bg-emerald-950/30 border-emerald-800"
+                : "bg-red-950/30 border-red-800")}>
+                                <div className="flex items-center gap-2 mb-2 flex-wrap">
+                                    <Terminal className="h-4 w-4 text-zinc-400"/>
+                                    <Badge className={cn("text-[10px] px-1.5", result.source === "mcp"
+                ? "bg-purple-500/20 text-purple-400 border-purple-500/40"
+                : result.source === "eliza"
+                    ? "bg-fuchsia-500/20 text-fuchsia-400 border-fuchsia-500/40"
+                    : "bg-green-500/20 text-green-400 border-green-500/40")}>
+                                        {result.source === "mcp" ? "MCP" : result.source === "eliza" ? "Eliza" : "GOAT"}
+                                    </Badge>
+                                    <span className="font-mono text-sm text-zinc-300">
+                                        {result.pluginId}/{result.tool}
+                                    </span>
+                                    <Badge variant={result.success ? "default" : "destructive"} className="text-xs">
+                                        {result.success ? "Success" : "Failed"}
+                                    </Badge>
+                                    {result.explorer && (<a href={result.explorer} target="_blank" rel="noopener noreferrer" className="text-xs text-cyan-400 hover:underline flex items-center gap-1">
+                                            View TX <ExternalLink className="h-3 w-3"/>
+                                        </a>)}
+                                    {result.executedBy && (<span className="text-[10px] text-zinc-600">
+                                            by {result.executedBy.slice(0, 6)}...{result.executedBy.slice(-4)}
+                                        </span>)}
+                                </div>
+                                <pre className="text-xs text-zinc-400 overflow-auto max-h-48 font-mono bg-zinc-900/50 rounded p-2">
+                                    {result.error || JSON.stringify(result.result, null, 2)}
+                                </pre>
+                            </div>)))}
+                    <div ref={resultsEndRef}/>
+                </div>
+            </ScrollArea>
+
+            {/* Input with schema hints */}
+            <div className="shrink-0 border-t border-zinc-800 p-4">
+                <div className="max-w-4xl mx-auto space-y-3">
+                    {/* Tool/Action description & schema hint */}
+                    {(pluginSource === "goat" ? currentTool : pluginSource === "mcp" ? currentMcpTool : elizaActions.find(a => a.name === selectedElizaAction)) && (<div className="bg-zinc-900/50 rounded-lg p-3 border border-zinc-800">
+                            <div className="flex items-center gap-2 mb-2">
+                                <Terminal className={cn("h-4 w-4", pluginSource === "goat" ? "text-green-400" : pluginSource === "mcp" ? "text-purple-400" : "text-fuchsia-400")}/>
+                                <Badge className={cn("text-[10px] px-1.5", pluginSource === "goat"
+                ? "bg-green-500/20 text-green-400 border-green-500/40"
+                : pluginSource === "mcp"
+                    ? "bg-purple-500/20 text-purple-400 border-purple-500/40"
+                    : "bg-fuchsia-500/20 text-fuchsia-400 border-fuchsia-500/40")}>
+                                    {pluginSource === "goat" ? "GOAT" : pluginSource === "mcp" ? "MCP" : "Eliza"}
+                                </Badge>
+                                <span className={cn("font-mono text-sm", pluginSource === "goat" ? "text-green-400" : pluginSource === "mcp" ? "text-purple-400" : "text-fuchsia-400")}>
+                                    {pluginSource === "goat"
+                ? currentTool?.name
+                : pluginSource === "mcp"
+                    ? currentMcpTool?.name
+                    : elizaActions.find(a => a.name === selectedElizaAction)?.name}
+                                </span>
+                            </div>
+                            <p className="text-xs text-zinc-400 mb-2">
+                                {pluginSource === "goat"
+                ? currentTool?.description
+                : pluginSource === "mcp"
+                    ? (currentMcpTool?.description || "No description available")
+                    : (elizaActions.find(a => a.name === selectedElizaAction)?.description || "No description available")}
+                            </p>
+                            {toolSchema && (<div className="mt-2 pt-2 border-t border-zinc-800">
+                                    <p className="text-[10px] text-zinc-500 uppercase mb-1">Parameters (* = required)</p>
+                                    <pre className="text-[10px] text-zinc-500 font-mono whitespace-pre-wrap">
+                                        {formatSchemaHint(toolSchema)}
+                                    </pre>
+                                </div>)}
+                        </div>)}
+
+                    <div className="flex gap-2">
+                        <Button variant="ghost" size="icon" onClick={handleClearResults} className="text-zinc-400 hover:text-white shrink-0" title="Clear results">
+                            <Trash2 className="h-4 w-4"/>
+                        </Button>
+                        <div className="flex-1 relative">
+                            <Textarea value={toolArgs} onChange={(e) => setToolArgs(e.target.value)} placeholder='{"key": "value"}' className="bg-zinc-900 border-zinc-700 font-mono text-sm min-h-20 pr-20"/>
+                            <div className="absolute right-2 top-2 flex gap-1">
+                                <Button variant="ghost" size="sm" onClick={() => {
+            if (pluginSource === "goat" && currentTool) {
+                const defaultArgs = currentTool.example || generateDefaultArgs(currentTool.parameters);
+                setToolArgs(JSON.stringify(defaultArgs, null, 2));
+            }
+            else if (pluginSource === "mcp" && currentMcpTool) {
+                const defaultArgs = generateDefaultArgs(currentMcpTool.inputSchema);
+                setToolArgs(JSON.stringify(defaultArgs, null, 2));
+            }
+        }} className="h-6 px-2 text-[10px] text-zinc-500 hover:text-white" title="Reset to defaults">
+                                    Reset
+                                </Button>
+                            </div>
+                        </div>
+                        <Button onClick={pluginSource === "goat"
+            ? handleExecutePlugin
+            : pluginSource === "mcp"
+                ? handleExecuteMcpTool
+                : handleElizaExecution} disabled={!sessionActive ||
+            executingPlugin ||
+            !selectedTool ||
+            (pluginSource === "goat" ? !selectedPlugin : pluginSource === "mcp" ? !selectedMcpServer : !selectedElizaPlugin)} className={cn("h-auto px-6", pluginSource === "goat"
+            ? "bg-green-600 hover:bg-green-700"
+            : pluginSource === "mcp"
+                ? "bg-purple-600 hover:bg-purple-700"
+                : "bg-fuchsia-600 hover:bg-fuchsia-700")}>
+                            {executingPlugin ? (<Loader2 className="h-4 w-4 animate-spin"/>) : (<>
+                                    <Play className="h-4 w-4 mr-2"/>
+                                    Execute
+                                </>)}
+                        </Button>
+                    </div>
+                    {pluginError && (<div className="p-3 rounded-lg bg-red-950/30 border border-red-800">
+                            <p className="text-red-400 text-sm flex items-start gap-2">
+                                <AlertCircle className="h-4 w-4 mt-0.5 shrink-0"/>
+                                {pluginError}
+                            </p>
+                        </div>)}
+                </div>
+            </div>
+        </div>);
+}
+//# sourceMappingURL=plugin-tester.js.map