@elizaos/ui 2.0.0-beta.2 → 2.0.11-beta.7

package/cloud/api-explorer/api-tester.js

@@ -0,0 +1,433 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Interactive API tester for the API Explorer. Runs real, billed requests
+ * against a selected endpoint (audio recording for STT, file upload for voice
+ * cloning, JSON body for everything else), shows the response (JSON / audio /
+ * headers), and generates a copyable cURL command.
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/api-explorer/_components/api-tester.tsx`.
+ * The request uses a raw `fetch` on purpose: it targets an arbitrary endpoint
+ * path with a user-supplied Bearer key, custom headers, and multipart/audio
+ * bodies — none of which fit the same-origin JSON-only typed `api<T>` client.
+ */
+import { getApiBaseUrl } from "@elizaos/cloud-shared/lib/config/client-env";
+import { formatEndpointPrice, } from "@elizaos/cloud-shared/lib/swagger/endpoint-discovery";
+import { CheckIcon, CodeIcon, Coins, CopyIcon, FileAudioIcon, Info, LoaderIcon, MicIcon, PlayIcon, Sparkles, StopCircleIcon, Trash2Icon, TrendingUp, UploadIcon, XCircleIcon, XIcon, } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { CodeDisplay } from "../../cloud-ui/components/code/code-display.js";
+import { ApiParameterSelect as CustomSelect } from "../../cloud-ui/components/docs/api-parameter-select.js";
+import { useAudioRecorder } from "../../cloud-ui/components/voice/use-audio-recorder.js";
+import { cn } from "../../cloud-ui/lib/utils.js";
+import { Badge } from "../../components/ui/badge.js";
+import { Button } from "../../components/ui/button.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../../components/ui/card.js";
+import { Checkbox } from "../../components/ui/checkbox.js";
+import { Input } from "../../components/ui/input.js";
+import { Label } from "../../components/ui/label.js";
+import { ScrollArea } from "../../components/ui/scroll-area.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from "../../components/ui/tabs.js";
+import { Textarea } from "../../components/ui/textarea.js";
+import { toast } from "./toast.js";
+export function ApiTester({ endpoint, authToken, isAuthLoading = false, refreshCredits, }) {
+    const [parameters, setParameters] = useState({});
+    const [isLoading, setIsLoading] = useState(false);
+    const [response, setResponse] = useState(null);
+    const [activeTab, setActiveTab] = useState("parameters");
+    const [recordedAudio, setRecordedAudio] = useState(null);
+    const [uploadedFiles, setUploadedFiles] = useState([]);
+    const audioRecorder = useAudioRecorder();
+    const initializeParameters = useCallback(() => {
+        if (!endpoint)
+            return;
+        const defaultParams = {};
+        if (endpoint.parameters?.body) {
+            endpoint.parameters.body.forEach((param) => {
+                defaultParams[param.name] = param.defaultValue || param.example || "";
+            });
+        }
+        if (endpoint.parameters?.query) {
+            endpoint.parameters.query.forEach((param) => {
+                defaultParams[param.name] = param.defaultValue || param.example || "";
+            });
+        }
+        if (endpoint.parameters?.path) {
+            endpoint.parameters.path.forEach((param) => {
+                defaultParams[param.name] = param.defaultValue || param.example || "";
+            });
+        }
+        setParameters(defaultParams);
+    }, [endpoint]);
+    useEffect(() => {
+        initializeParameters();
+    }, [initializeParameters]);
+    const handleParameterChange = (name, value) => {
+        setParameters((prev) => ({ ...prev, [name]: value }));
+    };
+    const handleFileUpload = (files) => {
+        if (!files)
+            return;
+        const fileArray = Array.from(files);
+        const audioFiles = fileArray.filter((file) => file.type.startsWith("audio/"));
+        if (audioFiles.length === 0) {
+            toast({ message: "Please upload audio files only", mode: "error" });
+            return;
+        }
+        const currentCount = uploadedFiles.length;
+        const newFiles = audioFiles.slice(0, Math.max(0, 10 - currentCount));
+        if (newFiles.length < audioFiles.length) {
+            toast({ message: "Maximum 10 audio files allowed", mode: "info" });
+        }
+        setUploadedFiles((prev) => [...prev, ...newFiles]);
+    };
+    const removeFile = (index) => {
+        setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
+    };
+    const executeTest = async () => {
+        if (endpoint.requiresAuth && isAuthLoading) {
+            toast({ message: "Loading API key...", mode: "info" });
+            return;
+        }
+        if (endpoint.requiresAuth && !authToken.trim()) {
+            toast({
+                message: "API key is required for this endpoint",
+                mode: "error",
+            });
+            return;
+        }
+        if (endpoint.requiresAuth && authToken.trim()) {
+            const isValidFormat = authToken.startsWith("eliza_") || authToken.startsWith("sk-");
+            if (!isValidFormat) {
+                toast({
+                    message: "Invalid API key format. Must start with eliza_ or sk-",
+                    mode: "error",
+                });
+                return;
+            }
+        }
+        const isSTTEndpoint = endpoint.path === "/api/elevenlabs/stt";
+        if (isSTTEndpoint && !recordedAudio && !audioRecorder.audioBlob) {
+            toast({ message: "Please record audio first", mode: "error" });
+            return;
+        }
+        const isVoiceCloneEndpoint = endpoint.path === "/api/elevenlabs/voices/clone";
+        if (isVoiceCloneEndpoint && uploadedFiles.length === 0) {
+            toast({
+                message: "Please upload at least one audio file",
+                mode: "error",
+            });
+            return;
+        }
+        setIsLoading(true);
+        setResponse(null);
+        const startTime = Date.now();
+        try {
+            const baseUrl = getApiBaseUrl();
+            let url = `${baseUrl}${endpoint.path}`;
+            if (endpoint.parameters?.path) {
+                endpoint.parameters.path.forEach((param) => {
+                    if (parameters[param.name]) {
+                        url = url.replace(`{${param.name}}`, encodeURIComponent(String(parameters[param.name])));
+                    }
+                });
+            }
+            if (endpoint.parameters?.query) {
+                const queryParams = new URLSearchParams();
+                endpoint.parameters.query.forEach((param) => {
+                    if (parameters[param.name] !== undefined &&
+                        parameters[param.name] !== "") {
+                        queryParams.append(param.name, String(parameters[param.name]));
+                    }
+                });
+                if (queryParams.toString()) {
+                    url += `?${queryParams.toString()}`;
+                }
+            }
+            const headers = {};
+            if (endpoint.requiresAuth && authToken) {
+                headers.Authorization = `Bearer ${authToken}`;
+            }
+            let body;
+            if (isSTTEndpoint) {
+                const formData = new FormData();
+                const audioBlob = recordedAudio || audioRecorder.audioBlob;
+                if (audioBlob) {
+                    formData.append("audio", audioBlob, "recording.webm");
+                }
+                if (parameters.languageCode) {
+                    formData.append("languageCode", String(parameters.languageCode));
+                }
+                body = formData;
+                // Don't set Content-Type for FormData — the browser sets the boundary.
+            }
+            else if (isVoiceCloneEndpoint) {
+                const formData = new FormData();
+                if (parameters.name) {
+                    formData.append("name", String(parameters.name));
+                }
+                if (parameters.description) {
+                    formData.append("description", String(parameters.description));
+                }
+                if (parameters.cloneType) {
+                    formData.append("cloneType", String(parameters.cloneType));
+                }
+                if (parameters.settings) {
+                    formData.append("settings", String(parameters.settings));
+                }
+                uploadedFiles.forEach((file, index) => {
+                    formData.append(`file${index}`, file);
+                });
+                body = formData;
+            }
+            else {
+                headers["Content-Type"] = "application/json";
+                if (endpoint.method !== "GET" && endpoint.parameters?.body) {
+                    const bodyData = {};
+                    endpoint.parameters.body.forEach((param) => {
+                        const value = parameters[param.name];
+                        if ((value !== undefined && value !== "") || param.required) {
+                            if (param.type === "object" || param.type === "array") {
+                                try {
+                                    const parsedValue = typeof value === "string" ? JSON.parse(value) : value;
+                                    bodyData[param.name] = parsedValue;
+                                }
+                                catch {
+                                    if (param.required) {
+                                        toast({
+                                            message: `Invalid JSON for ${param.name}. Please check the format.`,
+                                            mode: "error",
+                                        });
+                                        throw new Error(`Invalid JSON for required parameter: ${param.name}`);
+                                    }
+                                    bodyData[param.name] = value;
+                                }
+                            }
+                            else if (param.type === "number") {
+                                bodyData[param.name] = Number(value);
+                            }
+                            else if (param.type === "boolean") {
+                                bodyData[param.name] = Boolean(value);
+                            }
+                            else {
+                                bodyData[param.name] = value;
+                            }
+                        }
+                    });
+                    body = JSON.stringify(bodyData);
+                }
+            }
+            const fetchResponse = await fetch(url, {
+                method: endpoint.method,
+                headers,
+                body,
+            });
+            const responseTime = Date.now() - startTime;
+            const responseHeaders = {};
+            fetchResponse.headers.forEach((value, key) => {
+                responseHeaders[key] = value;
+            });
+            let responseData;
+            const contentType = fetchResponse.headers.get("content-type");
+            if (contentType?.includes("audio/")) {
+                const blob = await fetchResponse.blob();
+                const audioUrl = URL.createObjectURL(blob);
+                responseData = {
+                    _type: "audio",
+                    _audioUrl: audioUrl,
+                    _contentType: contentType,
+                    _size: blob.size,
+                    message: "Audio file received successfully",
+                };
+            }
+            else if (contentType?.includes("application/json")) {
+                responseData = await fetchResponse.json();
+            }
+            else {
+                responseData = await fetchResponse.text();
+            }
+            const errorData = responseData;
+            const errorMessage = fetchResponse.ok
+                ? undefined
+                : errorData?.error?.message || errorData?.message || "Request failed";
+            setResponse({
+                success: fetchResponse.ok,
+                status: fetchResponse.status,
+                statusText: fetchResponse.statusText,
+                data: responseData,
+                error: errorMessage,
+                headers: responseHeaders,
+                responseTime,
+                timestamp: new Date().toISOString(),
+            });
+            if (fetchResponse.ok) {
+                toast({ message: "Request successful!", mode: "success" });
+                setActiveTab("response");
+                if (refreshCredits) {
+                    const creditConsumingEndpoints = [
+                        "/api/v1/generate-image",
+                        "/api/v1/generate-video",
+                        "/api/v1/chat",
+                    ];
+                    if (creditConsumingEndpoints.includes(endpoint.path)) {
+                        setTimeout(() => {
+                            refreshCredits();
+                        }, 1000);
+                    }
+                }
+            }
+            else {
+                toast({ message: "Request failed", mode: "error" });
+                setActiveTab("response");
+            }
+        }
+        catch (error) {
+            const responseTime = Date.now() - startTime;
+            setResponse({
+                success: false,
+                status: 0,
+                statusText: "Network Error",
+                error: error instanceof Error ? error.message : "Unknown error",
+                headers: {},
+                responseTime,
+                timestamp: new Date().toISOString(),
+            });
+            toast({ message: "Network error occurred", mode: "error" });
+            setActiveTab("response");
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const generateCurlCommand = () => {
+        const baseUrl = getApiBaseUrl();
+        let url = `${baseUrl}${endpoint.path}`;
+        if (endpoint.parameters?.path) {
+            endpoint.parameters.path.forEach((param) => {
+                if (parameters[param.name]) {
+                    url = url.replace(`{${param.name}}`, encodeURIComponent(String(parameters[param.name])));
+                }
+            });
+        }
+        if (endpoint.parameters?.query) {
+            const queryParams = new URLSearchParams();
+            endpoint.parameters.query.forEach((param) => {
+                if (parameters[param.name] !== undefined &&
+                    parameters[param.name] !== "") {
+                    queryParams.append(param.name, String(parameters[param.name]));
+                }
+            });
+            if (queryParams.toString()) {
+                url += `?${queryParams.toString()}`;
+            }
+        }
+        let command = `curl -X ${endpoint.method} "${url}"`;
+        if (endpoint.requiresAuth && authToken) {
+            command += ` \\\n  -H "Authorization: Bearer ${authToken}"`;
+        }
+        if (endpoint.method !== "GET") {
+            command += ` \\\n  -H "Content-Type: application/json"`;
+        }
+        if (endpoint.method !== "GET" && endpoint.parameters?.body) {
+            const bodyData = {};
+            endpoint.parameters.body.forEach((param) => {
+                const value = parameters[param.name];
+                if (value !== undefined && value !== "") {
+                    bodyData[param.name] = value;
+                }
+            });
+            if (Object.keys(bodyData).length > 0) {
+                command += ` \\\n  -d '${JSON.stringify(bodyData, null, 2)}'`;
+            }
+        }
+        return command;
+    };
+    const copyCurlCommand = async () => {
+        const command = generateCurlCommand();
+        await navigator.clipboard.writeText(command);
+        toast({ message: "cURL command copied to clipboard", mode: "success" });
+    };
+    const renderParameterInput = (param, value) => {
+        const inputId = `param-${param.name}`;
+        return (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: inputId, className: "flex items-center gap-2", children: [param.name, param.required && _jsx("span", { className: "text-red-500", children: "*" }), _jsx(Badge, { variant: "outline", className: "text-xs", children: param.type })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: param.description }), param.enum ? (_jsx(CustomSelect, { value: String(value || ""), onValueChange: (v) => handleParameterChange(param.name, v), options: param.enum.map((option) => ({
+                        value: option,
+                        label: option,
+                    })), placeholder: `Select ${param.name}` })) : param.type === "boolean" ? (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: inputId, checked: Boolean(value || false), onCheckedChange: (checked) => handleParameterChange(param.name, checked) }), _jsxs(Label, { htmlFor: inputId, className: "text-sm", children: ["Enable ", param.name] })] })) : param.type === "number" ? (_jsx(Input, { id: inputId, type: "number", value: String(value || ""), onChange: (e) => handleParameterChange(param.name, Number(e.target.value)), placeholder: param.example?.toString() })) : param.type === "object" || param.type === "array" ? (_jsx(Textarea, { id: inputId, value: typeof value === "string"
+                        ? value
+                        : JSON.stringify(value || param.defaultValue || param.example, null, 2), onChange: (e) => handleParameterChange(param.name, e.target.value), placeholder: JSON.stringify(param.defaultValue || param.example, null, 2), rows: 4, className: "font-mono" })) : (_jsx(Input, { id: inputId, type: param.format === "password" ? "password" : "text", value: String(value || ""), onChange: (e) => handleParameterChange(param.name, e.target.value), placeholder: param.example?.toString() }))] }, param.name));
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [endpoint.pricing && (_jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm overflow-hidden", children: [_jsx("div", { className: `h-1 w-full ${endpoint.pricing.isFree ? "bg-green-500" : endpoint.pricing.isVariable ? "bg-orange-500" : "bg-[#FF5800]"}` }), _jsx(CardContent, { className: "pt-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `p-2.5 rounded-sm ${endpoint.pricing.isFree ? "bg-green-500/10" : endpoint.pricing.isVariable ? "bg-orange-500/10" : "bg-[#FF5800]/10"}`, children: endpoint.pricing.isFree ? (_jsx(Sparkles, { className: `h-5 w-5 text-green-400` })) : endpoint.pricing.isVariable ? (_jsx(TrendingUp, { className: `h-5 w-5 text-orange-400` })) : (_jsx(Coins, { className: `h-5 w-5 text-[#FF5800]` })) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `text-xl font-bold ${endpoint.pricing.isFree ? "text-green-400" : endpoint.pricing.isVariable ? "text-orange-400" : "text-[#FF5800]"}`, children: formatEndpointPrice(endpoint.pricing) }), !endpoint.pricing.isFree && (_jsxs("span", { className: "text-sm text-muted-foreground", children: ["per ", endpoint.pricing.unit] }))] }), endpoint.pricing.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: endpoint.pricing.description }))] })] }), endpoint.pricing.isVariable && !endpoint.pricing.isFree && (_jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-1 bg-orange-500/10 border border-orange-500/20 rounded-sm", children: [_jsx(Info, { className: "h-3.5 w-3.5 text-orange-400" }), _jsx("span", { className: "text-xs text-orange-400 font-medium", children: "Variable pricing" })] }))] }) })] })), _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row", children: [_jsxs(Button, { onClick: executeTest, disabled: isLoading || (endpoint.requiresAuth && isAuthLoading), className: "gap-2 bg-[#471E08] text-[#FF5800] hover:bg-[#5A2610] active:bg-[#6B2E18] border-0", children: [isLoading ? (_jsx(LoaderIcon, { className: "h-4 w-4 animate-spin" })) : (_jsx(PlayIcon, { className: "h-4 w-4" })), isLoading
+                                ? "Testing..."
+                                : endpoint.requiresAuth && isAuthLoading
+                                    ? "Loading API key..."
+                                    : "Send Request"] }), _jsxs(Button, { variant: "outline", onClick: copyCurlCommand, className: "gap-2 sm:w-auto", children: [_jsx(CodeIcon, { className: "h-4 w-4" }), "Copy cURL"] }), _jsx(Button, { variant: "ghost", onClick: initializeParameters, className: "sm:w-auto", children: "Reset" })] }), _jsxs(Tabs, { id: "api-tester-tabs", value: activeTab, onValueChange: setActiveTab, children: [_jsxs(TabsList, { className: "mb-4 w-full justify-start", children: [_jsx(TabsTrigger, { value: "parameters", children: "Parameters" }), _jsxs(TabsTrigger, { value: "response", children: ["Response", response && (_jsx(Badge, { variant: response.success ? "default" : "destructive", className: "ml-2", children: response.status }))] }), _jsx(TabsTrigger, { value: "curl", children: "cURL" })] }), _jsxs(TabsContent, { value: "parameters", className: "space-y-6", children: [endpoint.path === "/api/elevenlabs/stt" && (_jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: [_jsx(MicIcon, { className: "h-5 w-5" }), "Audio Recording"] }), _jsx(CardDescription, { children: "Record audio to transcribe using Speech-to-Text" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "space-y-4", children: [audioRecorder.error && (_jsx("div", { className: "p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-sm text-sm text-red-800 dark:text-red-400", children: audioRecorder.error })), _jsxs("div", { className: "flex items-center gap-4", children: [!audioRecorder.isRecording &&
+                                                            !audioRecorder.audioBlob &&
+                                                            !recordedAudio && (_jsxs(Button, { onClick: audioRecorder.startRecording, className: "gap-2", children: [_jsx(MicIcon, { className: "h-4 w-4" }), "Start Recording"] })), audioRecorder.isRecording && (_jsxs(_Fragment, { children: [_jsxs(Button, { onClick: audioRecorder.stopRecording, variant: "destructive", className: "gap-2", children: [_jsx(StopCircleIcon, { className: "h-4 w-4" }), "Stop Recording"] }), _jsxs(Badge, { variant: "secondary", className: "text-sm", children: ["Recording: ", audioRecorder.recordingTime, "s"] })] })), (audioRecorder.audioBlob || recordedAudio) && (_jsxs(_Fragment, { children: [_jsx(Badge, { variant: "outline", className: "text-sm", children: "\u2705 Audio Ready" }), _jsx("audio", { controls: true, className: "h-10", src: recordedAudio
+                                                                        ? URL.createObjectURL(recordedAudio)
+                                                                        : audioRecorder.audioBlob
+                                                                            ? URL.createObjectURL(audioRecorder.audioBlob)
+                                                                            : undefined, children: _jsx("track", { kind: "captions" }) }), _jsxs(Button, { onClick: () => {
+                                                                        setRecordedAudio(null);
+                                                                        audioRecorder.clearRecording();
+                                                                    }, variant: "ghost", size: "sm", className: "gap-2", children: [_jsx(Trash2Icon, { className: "h-4 w-4" }), "Clear"] })] }))] }), (audioRecorder.audioBlob || recordedAudio) && (_jsx("div", { className: "text-sm text-muted-foreground", children: "Audio recorded successfully. Click \"Send Request\" to transcribe." }))] }) })] })), endpoint.path === "/api/elevenlabs/voices/clone" && (_jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: [_jsx(UploadIcon, { className: "h-5 w-5" }), "Audio Sample Upload"] }), _jsx(CardDescription, { children: "Upload 1-10 audio samples for voice cloning (max 100MB total)" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "border-2 border-dashed border-border/60 rounded-sm p-6 hover:border-primary/50 transition-colors", children: [_jsx("input", { type: "file", accept: "audio/*", multiple: true, onChange: (e) => handleFileUpload(e.target.files), className: "hidden", id: "audio-file-upload" }), _jsxs("label", { htmlFor: "audio-file-upload", className: "flex flex-col items-center gap-3 cursor-pointer", children: [_jsx(UploadIcon, { className: "h-12 w-12 text-muted-foreground/60" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm font-medium", children: "Click to upload audio files" }), _jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "MP3, WAV, M4A, WebM, OGG (max 100MB total)" })] })] })] }), uploadedFiles.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-sm font-medium", children: ["Uploaded Files (", uploadedFiles.length, "/10)"] }), _jsxs(Button, { onClick: () => setUploadedFiles([]), variant: "ghost", size: "sm", className: "gap-2 text-xs", children: [_jsx(Trash2Icon, { className: "h-3 w-3" }), "Clear All"] })] }), _jsx("div", { className: "space-y-2", children: uploadedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center justify-between p-3 bg-muted/50 rounded-sm border border-border/40", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [_jsx(FileAudioIcon, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate", children: file.name }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [(file.size / 1024).toFixed(2), " KB"] })] })] }), _jsx(Button, { onClick: () => removeFile(index), variant: "ghost", size: "sm", className: "gap-1 flex-shrink-0", children: _jsx(XCircleIcon, { className: "h-4 w-4" }) })] }, file.name))) }), _jsxs("div", { className: "text-xs text-muted-foreground", children: ["Total size:", " ", (uploadedFiles.reduce((acc, file) => acc + file.size, 0) /
+                                                                    1024 /
+                                                                    1024).toFixed(2), " ", "MB / 100 MB"] })] })), uploadedFiles.length === 0 && (_jsx("div", { className: "text-sm text-muted-foreground", children: "No files uploaded yet. Please upload at least 1 audio sample." }))] }) })] })), endpoint.parameters?.path && endpoint.parameters.path.length > 0 && (_jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Path Parameters" }), _jsx(CardDescription, { children: "Parameters that are part of the URL path" })] }), _jsx(CardContent, { children: _jsx("div", { className: "space-y-4", children: endpoint.parameters.path.map((param) => renderParameterInput(param, parameters[param.name])) }) })] })), endpoint.parameters?.query &&
+                                endpoint.parameters.query.length > 0 && (_jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Query Parameters" }), _jsx(CardDescription, { children: "Parameters added to the URL query string" })] }), _jsx(CardContent, { children: _jsx("div", { className: "space-y-4", children: endpoint.parameters.query.map((param) => renderParameterInput(param, parameters[param.name])) }) })] })), endpoint.parameters?.body &&
+                                endpoint.parameters.body.length > 0 &&
+                                // Hide for STT since we use the recorder.
+                                endpoint.path !== "/api/elevenlabs/stt" && (_jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Request Body" }), _jsx(CardDescription, { children: endpoint.path === "/api/elevenlabs/voices/clone"
+                                                    ? "Voice settings and metadata (audio files uploaded above)"
+                                                    : "JSON payload sent with the request" })] }), _jsx(CardContent, { children: _jsx("div", { className: "space-y-4", children: endpoint.parameters.body
+                                                .filter((param) => 
+                                            // Skip file parameters for voice cloning endpoint.
+                                            !(endpoint.path === "/api/elevenlabs/voices/clone" &&
+                                                param.name.startsWith("file")))
+                                                .map((param) => renderParameterInput(param, parameters[param.name])) }) })] })), !endpoint.parameters?.path?.length &&
+                                !endpoint.parameters?.query?.length &&
+                                !endpoint.parameters?.body?.length && (_jsx(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: _jsx(CardContent, { className: "py-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "This endpoint doesn't require any parameters." }) }) }))] }), _jsx(TabsContent, { value: "response", children: response ? (_jsxs("div", { className: "space-y-4", children: [_jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [response.success ? (_jsx(CheckIcon, { className: "h-5 w-5 text-green-500" })) : (_jsx(XIcon, { className: "h-5 w-5 text-red-500" })), "Response"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Badge, { className: cn("rounded-sm px-2.5 py-1 text-xs font-medium", response.success
+                                                                    ? "bg-green-500/10 text-green-600 ring-1 ring-inset ring-green-500/30 dark:text-green-300"
+                                                                    : "bg-red-500/10 text-red-600 ring-1 ring-inset ring-red-500/30 dark:text-red-300"), children: [response.status, " ", response.statusText] }), _jsxs(Badge, { variant: "outline", className: "rounded-sm", children: [response.responseTime, "ms"] })] })] }) }), response.error && (_jsx(CardContent, { children: _jsx("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-sm", children: _jsxs("p", { className: "text-red-800 dark:text-red-400 font-medium", children: ["Error: ", response.error] }) }) }))] }), response.data !== undefined && (_jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "Response Body" }), response.data?._type !==
+                                                        "audio" && (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-2", onClick: () => {
+                                                            navigator.clipboard.writeText(formatResponseData(response.data));
+                                                            toast({
+                                                                message: "Response copied to clipboard",
+                                                                mode: "success",
+                                                            });
+                                                        }, children: [_jsx(CopyIcon, { className: "h-4 w-4" }), "Copy"] }))] }) }), _jsx(CardContent, { children: (() => {
+                                                const audioData = response.data;
+                                                return audioData?._type === "audio" ? (_jsx("div", { className: "space-y-4", children: _jsx("div", { className: "rounded-sm border border-border/60 bg-muted/30 p-4", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "text-xs", children: "Audio Response" }), _jsxs(Badge, { variant: "secondary", className: "text-xs", children: [((audioData?._size || 0) / 1024).toFixed(2), " ", "KB"] })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: audioData?.message }), _jsx("audio", { controls: true, className: "w-full mt-4", src: audioData?._audioUrl, children: _jsx("track", { kind: "captions" }) }), _jsx("div", { className: "flex gap-2 mt-4", children: _jsx(Button, { size: "sm", variant: "outline", onClick: () => {
+                                                                            const audioUrl = audioData?._audioUrl;
+                                                                            if (audioUrl) {
+                                                                                const a = document.createElement("a");
+                                                                                a.href = audioUrl;
+                                                                                a.download = "audio.mp3";
+                                                                                document.body.appendChild(a);
+                                                                                a.click();
+                                                                                document.body.removeChild(a);
+                                                                                toast({
+                                                                                    message: "Audio downloaded",
+                                                                                    mode: "success",
+                                                                                });
+                                                                            }
+                                                                        }, children: "Download Audio" }) })] }) }) })) : (_jsx(ScrollArea, { className: "h-[400px] w-full", children: _jsx(CodeDisplay, { code: formatResponseData(response.data), language: "json" }) }));
+                                            })() })] })), _jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Response Headers" }) }), _jsx(CardContent, { children: _jsx(ScrollArea, { className: "h-64 w-full rounded-sm border border-border/60", children: _jsx("div", { className: "min-w-0", children: _jsx("dl", { className: "divide-y divide-border/60 text-sm", children: Object.entries(response.headers).map(([key, value]) => (_jsxs("div", { className: "flex flex-col gap-1 px-4 py-3 min-w-0", children: [_jsx("dt", { className: "font-mono text-xs uppercase tracking-wide text-muted-foreground", children: key }), _jsx("dd", { className: "font-mono text-sm text-foreground break-all overflow-wrap-anywhere", children: value })] }, key))) }) }) }) })] })] })) : (_jsx(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: _jsx(CardContent, { className: "py-12 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No response yet. Send a request to see the results." }) }) })) }), _jsx(TabsContent, { value: "curl", children: _jsxs(Card, { className: "border-border/60 bg-background/60 rounded-sm", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(CardTitle, { children: "cURL Command" }), _jsxs(Button, { variant: "outline", size: "sm", className: "gap-2", onClick: copyCurlCommand, children: [_jsx(CopyIcon, { className: "h-4 w-4" }), "Copy"] })] }), _jsx(CardDescription, { children: "Copy this command to test the API from your terminal" })] }), _jsx(CardContent, { children: _jsx(CodeDisplay, { code: generateCurlCommand(), language: "bash" }) })] }) })] })] }));
+}
+function formatResponseData(data) {
+    if (data === null || data === undefined) {
+        return "";
+    }
+    if (typeof data === "string") {
+        try {
+            const parsed = JSON.parse(data);
+            return JSON.stringify(parsed, null, 2);
+        }
+        catch {
+            return data;
+        }
+    }
+    try {
+        return JSON.stringify(data, null, 2);
+    }
+    catch {
+        return String(data);
+    }
+}

package/cloud/api-explorer/auth-manager.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Auth manager for the API Explorer: displays the auto-minted explorer key with
+ * a visibility toggle, copy, and an override field for a custom key. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/api-explorer/_components/auth-manager.tsx`.
+ * The "API calls are billed" notice is kept — explorer calls hit real billed
+ * endpoints.
+ */
+import type { ExplorerApiKey } from "./use-explorer-api-key";
+interface AuthManagerProps {
+    authToken: string;
+    explorerKey: ExplorerApiKey | null;
+    isLoading: boolean;
+    error: string | null;
+    onTokenChange: (token: string) => void;
+    onRefresh: () => Promise<void>;
+}
+export declare function AuthManager({ authToken, explorerKey, isLoading, error, onTokenChange, onRefresh, }: AuthManagerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=auth-manager.d.ts.map

package/cloud/api-explorer/auth-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-manager.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/api-explorer/auth-manager.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAW7D,UAAU,gBAAgB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,WAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,EACb,SAAS,GACV,EAAE,gBAAgB,2CA4IlB"}

package/cloud/api-explorer/auth-manager.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Auth manager for the API Explorer: displays the auto-minted explorer key with
+ * a visibility toggle, copy, and an override field for a custom key. Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/api-explorer/_components/auth-manager.tsx`.
+ * The "API calls are billed" notice is kept — explorer calls hit real billed
+ * endpoints.
+ */
+import { copyApiKeyToClipboard } from "@elizaos/cloud-shared/lib/client/api-keys";
+import { Check, Copy, Eye, EyeOff, Loader2, RefreshCw } from "lucide-react";
+import { useCallback, useState } from "react";
+import { toast } from "./toast.js";
+function useCopyFeedback(timeoutMs = 2000) {
+    const [copied, setCopied] = useState(false);
+    const markCopied = useCallback(() => {
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), timeoutMs);
+    }, [timeoutMs]);
+    return { copied, markCopied };
+}
+export function AuthManager({ authToken, explorerKey, isLoading, error, onTokenChange, onRefresh, }) {
+    const [showToken, setShowToken] = useState(false);
+    const { copied, markCopied } = useCopyFeedback();
+    const handleCopy = async () => {
+        try {
+            await copyApiKeyToClipboard(authToken);
+            markCopied();
+            toast({ message: "API key copied", mode: "success" });
+        }
+        catch (err) {
+            toast({
+                message: err instanceof Error ? err.message : "Failed to copy API key",
+                mode: "error",
+            });
+        }
+    };
+    const isValidKey = authToken &&
+        (authToken.startsWith("eliza_") || authToken.startsWith("sk-"));
+    if (isLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-neutral-500" }) }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-neutral-400", children: error }), error.includes("sign in") && (_jsx("p", { className: "text-xs text-neutral-500", children: "Sign in to get an API key for testing." })), _jsxs("button", { type: "button", onClick: () => void onRefresh(), className: "flex items-center gap-2 px-3 py-2 text-sm text-neutral-400 hover:text-white transition-colors", children: [_jsx(RefreshCw, { className: "h-4 w-4" }), "Retry"] })] }));
+    }
+    if (!explorerKey) {
+        return (_jsx("p", { className: "text-sm text-neutral-500", children: "No API key available. Please sign in to test endpoints." }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: "auth-manager-api-key", className: "text-sm font-medium text-white", children: "API Key" }), _jsxs("span", { className: "text-xs text-neutral-400", children: ["Used ", explorerKey.usage_count, " times"] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("input", { id: "auth-manager-api-key", type: showToken ? "text" : "password", value: authToken, readOnly: true, className: "w-full h-10 px-3 pr-10 rounded-sm border border-white/10 bg-black/40 text-white font-mono text-sm focus:outline-none" }), _jsx("button", { type: "button", onClick: () => setShowToken(!showToken), className: "absolute right-0 top-0 h-full px-3 text-neutral-500 hover:text-white transition-colors", children: showToken ? (_jsx(EyeOff, { className: "h-4 w-4" })) : (_jsx(Eye, { className: "h-4 w-4" })) })] }), _jsx("button", { type: "button", onClick: handleCopy, className: "h-10 px-3 rounded-sm border border-white/10 bg-black/40 text-neutral-400 hover:text-white transition-colors", children: copied ? (_jsx(Check, { className: "h-4 w-4 text-green-400" })) : (_jsx(Copy, { className: "h-4 w-4" })) })] })] }), _jsx("div", { className: "flex items-center gap-2 px-3 py-2 rounded-sm bg-orange-500/10 border border-orange-500/20", children: _jsx("span", { className: "text-xs text-orange-400", children: "API calls are billed to your account" }) }), isValidKey && (_jsxs("details", { className: "text-xs", children: [_jsx("summary", { className: "text-neutral-400 cursor-pointer hover:text-white transition-colors", children: "Use a different key" }), _jsxs("div", { className: "mt-3 space-y-3", children: [_jsx("input", { type: "text", placeholder: "Enter custom API key...", onChange: (e) => onTokenChange(e.target.value), className: "w-full h-9 px-3 rounded-sm border border-white/10 bg-black/40 text-white text-sm placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-[#FF5800]/50" }), _jsx("button", { type: "button", onClick: () => void onRefresh(), className: "text-neutral-400 hover:text-white transition-colors", children: "Reset to default" })] })] }))] }));
+}

package/cloud/api-explorer/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * API Explorer cloud domain — barrel + route/section registration.
+ *
+ * Lifted from `@elizaos/cloud-frontend/src/dashboard/api-explorer/*`. The
+ * static endpoint catalog + OpenAPI generator come from
+ * `@elizaos/cloud-shared/lib/swagger/*` (already isomorphic + browser-safe); the
+ * live pricing overlay is `GET /api/v1/pricing/summary`; the explorer key is
+ * auto-minted via `GET /api/v1/api-keys/explorer`; the tester runs REAL, BILLED
+ * calls (the "API calls are billed" banner is preserved). Auth-gated, never
+ * public.
+ *
+ * The canonical home (PLAN §"`dashboard/api-explorer` → SECTION (Developer) or
+ * VIEW (auth-gated)") is a developer view / settings section:
+ *
+ *  - {@link ApiExplorerSurface} is the zero-prop component Wave 3 hands to
+ *    `registerSettingsSection({ id: "api-explorer", Component: ApiExplorerSurface })`
+ *    or mounts as a standalone developer view. It gates on the Steward session
+ *    itself, so it is safe to mount bare.
+ *  - {@link apiExplorerCloudRoute} is registered **at import time** at
+ *    `dashboard/api-explorer`. This path is the *target* of the
+ *    `CloudRouterShell` `dashboard/{image,video,gallery,voices}` redirects (the
+ *    legacy media generators were folded into the explorer) — it is not itself a
+ *    `from` in that redirect map, so eager registration is safe and is what
+ *    makes those redirects land. {@link registerApiExplorerCloudRoute} is also
+ *    exported for re-registration at a custom path.
+ */
+import { type CloudRouteDef } from "../shell/cloud-route-registry";
+export { ApiExplorerSurface, default as ApiExplorerRoute, } from "./ApiExplorerPage";
+export { ApiTester } from "./api-tester";
+export { AuthManager } from "./auth-manager";
+export { type ExplorerApiKey, type UseExplorerApiKeyResult, useExplorerApiKey, } from "./use-explorer-api-key";
+/** Stable view/section id + URL path slug for the API Explorer surface. */
+export declare const API_EXPLORER_SECTION_ID = "api-explorer";
+export declare const API_EXPLORER_ROUTE_PATH = "dashboard/api-explorer";
+/** Cloud-route definition for the standalone API Explorer surface. */
+export declare const apiExplorerCloudRoute: CloudRouteDef;
+/**
+ * Register (or re-register) the standalone API Explorer route. Exported for an
+ * explicit custom-path mount; the default registration below runs at import time
+ * since `dashboard/api-explorer` is a redirect target, not a `from`, in the
+ * shell's redirect map.
+ */
+export declare function registerApiExplorerCloudRoute(override?: Partial<CloudRouteDef>): void;
+//# sourceMappingURL=index.d.ts.map

package/cloud/api-explorer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/api-explorer/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,OAAO,EACL,KAAK,aAAa,EAEnB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EACL,kBAAkB,EAClB,OAAO,IAAI,gBAAgB,GAC5B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,uBAAuB,EAC5B,iBAAiB,GAClB,MAAM,wBAAwB,CAAC;AAEhC,2EAA2E;AAC3E,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AACtD,eAAO,MAAM,uBAAuB,2BAA2B,CAAC;AAKhE,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,EAAE,aAInC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAChC,IAAI,CAEN"}

package/cloud/api-explorer/index.js

@@ -0,0 +1,53 @@
+/**
+ * API Explorer cloud domain — barrel + route/section registration.
+ *
+ * Lifted from `@elizaos/cloud-frontend/src/dashboard/api-explorer/*`. The
+ * static endpoint catalog + OpenAPI generator come from
+ * `@elizaos/cloud-shared/lib/swagger/*` (already isomorphic + browser-safe); the
+ * live pricing overlay is `GET /api/v1/pricing/summary`; the explorer key is
+ * auto-minted via `GET /api/v1/api-keys/explorer`; the tester runs REAL, BILLED
+ * calls (the "API calls are billed" banner is preserved). Auth-gated, never
+ * public.
+ *
+ * The canonical home (PLAN §"`dashboard/api-explorer` → SECTION (Developer) or
+ * VIEW (auth-gated)") is a developer view / settings section:
+ *
+ *  - {@link ApiExplorerSurface} is the zero-prop component Wave 3 hands to
+ *    `registerSettingsSection({ id: "api-explorer", Component: ApiExplorerSurface })`
+ *    or mounts as a standalone developer view. It gates on the Steward session
+ *    itself, so it is safe to mount bare.
+ *  - {@link apiExplorerCloudRoute} is registered **at import time** at
+ *    `dashboard/api-explorer`. This path is the *target* of the
+ *    `CloudRouterShell` `dashboard/{image,video,gallery,voices}` redirects (the
+ *    legacy media generators were folded into the explorer) — it is not itself a
+ *    `from` in that redirect map, so eager registration is safe and is what
+ *    makes those redirects land. {@link registerApiExplorerCloudRoute} is also
+ *    exported for re-registration at a custom path.
+ */
+import { lazy } from "react";
+import { registerCloudRoute, } from "../shell/cloud-route-registry.js";
+export { ApiExplorerSurface, default as ApiExplorerRoute, } from "./ApiExplorerPage.js";
+export { ApiTester } from "./api-tester.js";
+export { AuthManager } from "./auth-manager.js";
+export { useExplorerApiKey, } from "./use-explorer-api-key.js";
+/** Stable view/section id + URL path slug for the API Explorer surface. */
+export const API_EXPLORER_SECTION_ID = "api-explorer";
+export const API_EXPLORER_ROUTE_PATH = "dashboard/api-explorer";
+/** Lazy route element for the standalone API Explorer surface (code-split). */
+const ApiExplorerRouteLazy = lazy(() => import("./ApiExplorerPage.js"));
+/** Cloud-route definition for the standalone API Explorer surface. */
+export const apiExplorerCloudRoute = {
+    path: API_EXPLORER_ROUTE_PATH,
+    element: ApiExplorerRouteLazy,
+    group: "dashboard",
+};
+/**
+ * Register (or re-register) the standalone API Explorer route. Exported for an
+ * explicit custom-path mount; the default registration below runs at import time
+ * since `dashboard/api-explorer` is a redirect target, not a `from`, in the
+ * shell's redirect map.
+ */
+export function registerApiExplorerCloudRoute(override) {
+    registerCloudRoute({ ...apiExplorerCloudRoute, ...override });
+}
+registerApiExplorerCloudRoute();