@rebasepro/studio 0.0.1-canary.09e5ec5

package/src/components/ApiExplorer/TryItPanel.tsx

@@ -0,0 +1,510 @@
+import React, { useState, useCallback, useMemo, useEffect } from "react";
+import { Typography, Button, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+import { LoaderIcon, SendIcon, PlusIcon, XIcon } from "lucide-react";
+import { useRebaseContext, UserSelectPopover, SelectableUser } from "@rebasepro/core";
+import { AuthSimulationSelector } from "../AuthSimulationSelector";
+import type { ParsedEndpoint } from "./types";
+import type { User } from "@rebasepro/types";
+
+interface TryItPanelProps {
+    endpoint: ParsedEndpoint;
+    apiUrl: string;
+    getAuthToken: () => Promise<string | null | undefined>;
+    user: User | null;
+    basePath?: string;
+}
+
+/**
+ * Interactive "Try It" panel that lets the user execute API requests
+ * using their current JWT token directly from the Studio.
+ */
+export function TryItPanel({ endpoint, apiUrl, getAuthToken, user, basePath = "" }: TryItPanelProps) {
+    const storageKey = `rebase_apiexplorer_${endpoint.method}_${endpoint.path}`;
+
+    const [pathParams, setPathParams] = useState<Record<string, string>>(() => {
+        try { const v = localStorage.getItem(`${storageKey}_path`); if (v) return JSON.parse(v); } catch {}
+        return {};
+    });
+    const [queryParams, setQueryParams] = useState<Record<string, string>>(() => {
+        try { const v = localStorage.getItem(`${storageKey}_query`); if (v) return JSON.parse(v); } catch {}
+        return {};
+    });
+    const [customHeaders, setCustomHeaders] = useState<Array<{ key: string; value: string }>>(() => {
+        try { const v = localStorage.getItem(`${storageKey}_headers`); if (v) return JSON.parse(v); } catch {}
+        return [{ key: "rebase-branch", value: "" }];
+    });
+    const [body, setBody] = useState(() => {
+        try { const v = localStorage.getItem(`${storageKey}_body`); if (v) return JSON.parse(v); } catch {}
+        return buildBodyTemplate(endpoint);
+    });
+    const [response, setResponse] = useState<{ status: number; statusText: string; body: string; time: number } | null>(
+        null
+    );
+    const [loading, setLoading] = useState(false);
+    const [authMode, setAuthMode] = useState<"jwt" | "none">("jwt");
+    const [validationError, setValidationError] = useState<string | null>(null);
+
+    const rebaseContext = useRebaseContext();
+    const userManagement = rebaseContext.userManagement;
+    const currentUser = rebaseContext.authController?.user;
+
+    const users = useMemo((): SelectableUser[] => {
+        const managed = (userManagement?.users ?? []).map(u => ({
+            uid: u.uid,
+            displayName: u.displayName,
+            email: u.email,
+            photoURL: u.photoURL,
+            roles: u.roles
+        }));
+        if (currentUser && !managed.some(u => u.uid === currentUser.uid)) {
+            managed.unshift({
+                uid: currentUser.uid,
+                displayName: currentUser.displayName,
+                email: currentUser.email,
+                photoURL: currentUser.photoURL,
+                roles: currentUser.roles
+            });
+        }
+        return managed;
+    }, [userManagement?.users, currentUser]);
+
+    const currentSelectableUser = useMemo((): SelectableUser | null => {
+        if (!currentUser) return null;
+        return {
+            uid: currentUser.uid,
+            displayName: currentUser.displayName,
+            email: currentUser.email,
+            photoURL: currentUser.photoURL,
+            roles: currentUser.roles
+        };
+    }, [currentUser]);
+
+    const [selectedUser, setSelectedUser] = useState<SelectableUser | null>(null);
+
+    useEffect(() => {
+        localStorage.setItem(`${storageKey}_path`, JSON.stringify(pathParams));
+        localStorage.setItem(`${storageKey}_query`, JSON.stringify(queryParams));
+        localStorage.setItem(`${storageKey}_headers`, JSON.stringify(customHeaders));
+        localStorage.setItem(`${storageKey}_body`, JSON.stringify(body));
+    }, [storageKey, pathParams, queryParams, customHeaders, body]);
+
+    // Build the final URL
+    const resolvedUrl = useMemo(() => {
+        const base = basePath.startsWith("/") ? basePath : `/${basePath}`;
+        const cleanBase = base === "/" ? "" : base;
+        let url = `${apiUrl.replace(/\/+$/, "")}${cleanBase}${endpoint.path}`;
+        // Replace path params
+        for (const [key, val] of Object.entries(pathParams)) {
+            url = url.replace(`{${key}}`, encodeURIComponent(val));
+        }
+        // Append query params
+        const qp = Object.entries(queryParams).filter(([, v]) => v.trim() !== "");
+        if (qp.length > 0) {
+            url += "?" + qp.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&");
+        }
+        return url;
+    }, [apiUrl, basePath, endpoint.path, pathParams, queryParams]);
+
+    const pathParamDefs = endpoint.parameters.filter((p) => p.in === "path");
+    const queryParamDefs = endpoint.parameters.filter((p) => p.in === "query");
+    const hasBody = ["post", "put", "patch"].includes(endpoint.method);
+
+    const execute = useCallback(async () => {
+        setValidationError(null);
+        if (hasBody && body.trim()) {
+            try {
+                JSON.parse(body);
+            } catch (err: any) {
+                setValidationError(`Invalid JSON: ${err.message}`);
+                return;
+            }
+        }
+
+        setLoading(true);
+        setResponse(null);
+        const start = performance.now();
+
+        try {
+            const headers: Record<string, string> = { "Content-Type": "application/json" };
+            
+            for (const h of customHeaders) {
+                if (h.key.trim()) headers[h.key.trim()] = h.value;
+            }
+
+            if (authMode === "jwt") {
+                const token = await getAuthToken();
+                if (token) headers["Authorization"] = `Bearer ${token}`;
+                if (selectedUser && selectedUser.uid !== currentUser?.uid) {
+                    headers["x-rebase-impersonate"] = selectedUser.uid;
+                }
+            }
+
+            const res = await fetch(resolvedUrl, {
+                method: endpoint.method.toUpperCase(),
+                headers,
+                body: hasBody && body.trim() ? body : undefined
+            });
+
+            const elapsed = Math.round(performance.now() - start);
+            let text: string;
+            
+            const rawText = await res.text();
+            try {
+                const json = JSON.parse(rawText);
+                text = JSON.stringify(json, null, 2);
+            } catch {
+                text = rawText;
+            }
+
+            setResponse({ status: res.status,
+statusText: res.statusText,
+body: text,
+time: elapsed });
+        } catch (err: any) {
+            setResponse({
+                status: 0,
+                statusText: "Network Error",
+                body: err.message ?? "Request failed",
+                time: Math.round(performance.now() - start)
+            });
+        } finally {
+            setLoading(false);
+        }
+    }, [resolvedUrl, endpoint.method, hasBody, body, authMode, getAuthToken, customHeaders, selectedUser, currentUser?.uid]);
+
+    return (
+        <div className="flex flex-col h-full">
+            <div className="p-5 space-y-5 overflow-y-auto flex-1">
+                {/* Auth Mode */}
+                <AuthSimulationSelector
+                    authMode={authMode}
+                    setAuthMode={setAuthMode}
+                    selectedUser={selectedUser}
+                    setSelectedUser={setSelectedUser}
+                    users={users}
+                    loading={userManagement?.loading}
+                    currentUser={currentSelectableUser}
+                />
+
+                {/* Path Params */}
+                {pathParamDefs.length > 0 && (
+                    <ParamSection
+                        title="Path Parameters"
+                        params={pathParamDefs}
+                        values={pathParams}
+                        onChange={(k, v) => setPathParams((prev) => ({ ...prev,
+[k]: v }))}
+                    />
+                )}
+
+                {/* Query Params */}
+                {queryParamDefs.length > 0 && (
+                    <ParamSection
+                        title="Query Parameters"
+                        params={queryParamDefs}
+                        values={queryParams}
+                        onChange={(k, v) => setQueryParams((prev) => ({ ...prev, [k]: v }))}
+                    />
+                )}
+
+                {/* Custom Headers */}
+                <CustomKeyValueSection
+                    title="Custom Headers"
+                    values={customHeaders}
+                    onChange={(i, k, v) => {
+                        const next = [...customHeaders];
+                        next[i] = { key: k, value: v };
+                        setCustomHeaders(next);
+                    }}
+                    onAdd={() => setCustomHeaders((prev) => [...prev, { key: "", value: "" }])}
+                    onRemove={(i) => {
+                        const next = [...customHeaders];
+                        next.splice(i, 1);
+                        setCustomHeaders(next);
+                    }}
+                />
+
+                {/* Request Body */}
+                {hasBody && (
+                    <div>
+                        <Typography
+                            variant="caption"
+                            className="text-text-secondary dark:text-text-secondary-dark text-xs font-semibold uppercase tracking-wider mb-2 block"
+                        >
+                            Request Body
+                        </Typography>
+                        <textarea
+                            value={body}
+                            onChange={(e) => { setBody(e.target.value); setValidationError(null); }}
+                            rows={10}
+                            spellCheck={false}
+                            className={cls(
+                                "w-full font-mono text-xs p-3 rounded-lg resize-y",
+                                "bg-surface-50 dark:bg-surface-900",
+                                validationError ? "border-red-500 focus:ring-red-500/30" : cls("border focus:ring-primary/30 dark:focus:ring-primary-dark/30", defaultBorderMixin),
+                                "text-text-primary dark:text-text-primary-dark",
+                                "focus:outline-none focus:ring-2",
+                                "transition-all"
+                            )}
+                        />
+                        {validationError && (
+                            <Typography variant="caption" className="text-red-500 mt-1 block text-xs">
+                                {validationError}
+                            </Typography>
+                        )}
+                    </div>
+                )}
+
+                {/* URL Preview */}
+                <div className="rounded-lg bg-surface-100 dark:bg-surface-900 p-3">
+                    <Typography
+                        variant="caption"
+                        className="text-text-secondary dark:text-text-secondary-dark text-[10px] uppercase tracking-wider block mb-1"
+                    >
+                        Request URL
+                    </Typography>
+                    <code className="text-xs font-mono text-text-primary dark:text-text-primary-dark break-all">
+                        {resolvedUrl}
+                    </code>
+                </div>
+
+                {/* Execute Button */}
+                <Button variant="filled" onClick={execute} disabled={loading} className="w-full">
+                    {loading ? (
+                        <span className="flex items-center gap-2">
+                            <LoaderIcon size={iconSize.small} className="animate-spin" />
+                            Sending…
+                        </span>
+                    ) : (
+                        <span className="flex items-center gap-2">
+                            <SendIcon size={iconSize.small} />
+                            Send Request
+                        </span>
+                    )}
+                </Button>
+
+                {/* Response */}
+                {response && (
+                    <div className={cls("rounded-lg border overflow-hidden", defaultBorderMixin)}>
+                        <div
+                            className={cls(
+                                "flex items-center justify-between px-4 py-2.5",
+                                "bg-surface-50 dark:bg-surface-900/50"
+                            )}
+                        >
+                            <div className="flex items-center gap-3">
+                                <ResponseBadge status={response.status}/>
+                                <Typography
+                                    variant="caption"
+                                    className="text-text-secondary dark:text-text-secondary-dark text-xs"
+                                >
+                                    {response.statusText}
+                                </Typography>
+                            </div>
+                            <Typography
+                                variant="caption"
+                                className="text-text-secondary dark:text-text-secondary-dark text-xs font-mono"
+                            >
+                                {response.time}ms
+                            </Typography>
+                        </div>
+                        <pre
+                            className={cls(
+                                "p-4 text-xs font-mono overflow-auto max-h-96",
+                                "bg-surface-950 text-emerald-400",
+                                "dark:bg-surface-900 dark:text-emerald-400"
+                            )}
+                        >
+                            {response.body}
+                        </pre>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/* ── Param Section ────────────────────────────────────────────────── */
+
+function ParamSection({
+    title,
+    params,
+    values,
+    onChange
+}: {
+    title: string;
+    params: ParsedEndpoint["parameters"];
+    values: Record<string, string>;
+    onChange: (_key: string, _value: string) => void;
+}) {
+    return (
+        <div>
+            <Typography
+                variant="caption"
+                className="text-text-secondary dark:text-text-secondary-dark text-xs font-semibold uppercase tracking-wider mb-2 block"
+            >
+                {title}
+            </Typography>
+            <div className="space-y-2">
+                {params.map((p) => (
+                    <div key={p.name} className="flex items-center gap-3">
+                        <label className="w-32 shrink-0">
+                            <code className="text-xs font-mono font-semibold">{p.name}</code>
+                            {p.required && <span className="text-red-500 ml-0.5 text-xs">*</span>}
+                        </label>
+                        <input
+                            type="text"
+                            placeholder={p.description ?? p.name}
+                            value={values[p.name] ?? ""}
+                            onChange={(e) => onChange(p.name, e.target.value)}
+                            className={cls(
+                                "flex-1 px-3 py-1.5 text-xs rounded-lg font-mono",
+                                "bg-surface-50 dark:bg-surface-900",
+                                "border",
+                                defaultBorderMixin,
+                                "text-text-primary dark:text-text-primary-dark",
+                                "placeholder:text-text-secondary/50",
+                                "focus:outline-none focus:ring-2 focus:ring-primary/30",
+                                "transition-all"
+                            )}
+                        />
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+function CustomKeyValueSection({
+    title,
+    values,
+    onChange,
+    onAdd,
+    onRemove
+}: {
+    title: string;
+    values: Array<{ key: string; value: string }>;
+    onChange: (index: number, key: string, value: string) => void;
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+}) {
+    return (
+        <div>
+            <div className="flex items-center justify-between mb-2">
+                <Typography
+                    variant="caption"
+                    className="text-text-secondary dark:text-text-secondary-dark text-xs font-semibold uppercase tracking-wider block"
+                >
+                    {title}
+                </Typography>
+                <button
+                    onClick={onAdd}
+                    className="text-xs text-primary dark:text-primary-dark hover:underline flex items-center gap-1 font-medium"
+                >
+                    <PlusIcon size={iconSize.small} className="mr-1" /> Add Header
+                </button>
+            </div>
+            <div className="space-y-2">
+                {values.map((v, i) => (
+                    <div key={i} className="flex items-center gap-2">
+                        <input
+                            type="text"
+                            placeholder="Header name"
+                            value={v.key}
+                            onChange={(e) => onChange(i, e.target.value, v.value)}
+                            className={cls(
+                                "w-1/3 px-3 py-1.5 text-xs rounded-lg font-mono",
+                                "bg-surface-50 dark:bg-surface-900",
+                                "border",
+                                defaultBorderMixin,
+                                "text-text-primary dark:text-text-primary-dark",
+                                "placeholder:text-text-secondary/50",
+                                "focus:outline-none focus:ring-2 focus:ring-primary/30",
+                                "transition-all"
+                            )}
+                        />
+                        <input
+                            type="text"
+                            placeholder="Value"
+                            value={v.value}
+                            onChange={(e) => onChange(i, v.key, e.target.value)}
+                            className={cls(
+                                "flex-1 px-3 py-1.5 text-xs rounded-lg font-mono",
+                                "bg-surface-50 dark:bg-surface-900",
+                                "border",
+                                defaultBorderMixin,
+                                "text-text-primary dark:text-text-primary-dark",
+                                "placeholder:text-text-secondary/50",
+                                "focus:outline-none focus:ring-2 focus:ring-primary/30",
+                                "transition-all"
+                            )}
+                        />
+                        <button
+                            onClick={() => onRemove(i)}
+                            className="p-1.5 text-text-secondary hover:text-red-500 rounded transition-colors flex items-center justify-center shrink-0"
+                            title="Remove"
+                        >
+                            <XIcon size={iconSize.small} />
+                        </button>
+                    </div>
+                ))}
+                {values.length === 0 && (
+                    <Typography variant="caption" className="text-text-secondary/50 italic text-xs">
+                        No custom headers added.
+                    </Typography>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/* ── Helpers ──────────────────────────────────────────────────────── */
+
+function ResponseBadge({ status }: { status: number }) {
+    let colorClass = "text-red-500";
+    if (status >= 200 && status < 300) colorClass = "text-emerald-500";
+    else if (status >= 300 && status < 400) colorClass = "text-blue-500";
+    else if (status >= 400 && status < 500) colorClass = "text-amber-500";
+
+    return (
+        <span className={cls("text-xs font-bold font-mono", colorClass)}>
+            {status || "ERR"}
+        </span>
+    );
+}
+
+function buildBodyTemplate(endpoint: ParsedEndpoint): string {
+    if (!endpoint.requestBody?.content) return "{\n  \n}";
+    const json = endpoint.requestBody.content["application/json"];
+    if (!json?.schema?.properties) return "{\n  \n}";
+
+    const props = json.schema.properties;
+    const lines: string[] = ["{"];
+    const keys = Object.keys(props);
+    keys.forEach((key, i) => {
+        const prop = props[key];
+        if (prop.readOnly) return;
+        const comma = i < keys.length - 1 ? "," : "";
+        const val = defaultValue(prop);
+        lines.push(`  "${key}": ${val}${comma}`);
+    });
+    lines.push("}");
+    return lines.join("\n");
+}
+
+function defaultValue(schema: any): string {
+    if (schema.enum) return JSON.stringify(schema.enum[0]);
+    switch (schema.type) {
+        case "string":
+            return schema.format === "date-time" ? `"${new Date().toISOString()}"` : '""';
+        case "number":
+        case "integer":
+            return "0";
+        case "boolean":
+            return "false";
+        case "array":
+            return "[]";
+        default:
+            return "null";
+    }
+}

package/src/components/ApiExplorer/parseSpec.ts

@@ -0,0 +1,104 @@
+import type { OpenApiSpec, ParsedEndpoint, EndpointGroup } from "./types";
+
+/**
+ * Parse an OpenAPI 3.x spec into grouped, sorted endpoints for the sidebar.
+ */
+export function parseOpenApiSpec(spec: OpenApiSpec): {
+    groups: EndpointGroup[];
+    allEndpoints: ParsedEndpoint[];
+} {
+    const allEndpoints: ParsedEndpoint[] = [];
+    const tagMap = new Map<string, ParsedEndpoint[]>();
+
+    // Build tag description lookup
+    const tagDescriptions = new Map<string, string>();
+    for (const t of spec.tags ?? []) {
+        tagDescriptions.set(t.name, t.description ?? "");
+    }
+
+    for (const [path, methods] of Object.entries(spec.paths ?? {})) {
+        for (const [method, op] of Object.entries(methods)) {
+            if (["get", "post", "put", "patch", "delete"].indexOf(method) === -1) continue;
+
+            const tags = op.tags?.length ? op.tags : ["Other"];
+            const shortPath = path.replace(/^\/api\/data/, "");
+
+            const endpoint: ParsedEndpoint = {
+                id: `${method}:${path}`,
+                method,
+                path,
+                shortPath: shortPath || "/",
+                summary: op.summary ?? "",
+                description: op.description ?? "",
+                tags,
+                parameters: op.parameters ?? [],
+                requestBody: op.requestBody,
+                responses: op.responses ?? {},
+                security: op.security,
+                operationId: op.operationId
+            };
+
+            allEndpoints.push(endpoint);
+            for (const tag of tags) {
+                if (!tagMap.has(tag)) tagMap.set(tag, []);
+                tagMap.get(tag)!.push(endpoint);
+            }
+        }
+    }
+
+    // Method sort order
+    const ORDER: Record<string, number> = { get: 0,
+post: 1,
+put: 2,
+patch: 3,
+delete: 4 };
+
+    const groups: EndpointGroup[] = [];
+    // Sort tags: use spec.tags order if available, else alphabetical
+    const tagOrder = (spec.tags ?? []).map((t) => t.name);
+    const sortedTags = [...tagMap.keys()].sort((a, b) => {
+        const ai = tagOrder.indexOf(a);
+        const bi = tagOrder.indexOf(b);
+        if (ai !== -1 && bi !== -1) return ai - bi;
+        if (ai !== -1) return -1;
+        if (bi !== -1) return 1;
+        return a.localeCompare(b);
+    });
+
+    for (const tag of sortedTags) {
+        const endpoints = tagMap.get(tag)!;
+        endpoints.sort((a, b) => {
+            const pa = a.path.localeCompare(b.path);
+            if (pa !== 0) return pa;
+            return (ORDER[a.method] ?? 99) - (ORDER[b.method] ?? 99);
+        });
+        groups.push({
+            tag,
+            description: tagDescriptions.get(tag),
+            endpoints
+        });
+    }
+
+    return { groups,
+allEndpoints };
+}
+
+/**
+ * Resolve a $ref string (e.g. "#/components/schemas/Author") to a schema name.
+ */
+export function resolveRefName(ref: string): string {
+    const parts = ref.split("/");
+    return parts[parts.length - 1];
+}
+
+/**
+ * Resolve a $ref to its actual schema from the spec.
+ */
+export function resolveRef(spec: OpenApiSpec, ref: string): any {
+    const parts = ref.replace("#/", "").split("/");
+    let current: any = spec;
+    for (const part of parts) {
+        current = current?.[part];
+    }
+    return current ?? {};
+}

package/src/components/ApiExplorer/types.ts

@@ -0,0 +1,84 @@
+/** Minimal OpenAPI 3.x types we care about */
+export interface OpenApiSpec {
+    openapi: string;
+    info: { title: string; version: string; description?: string };
+    servers?: { url: string; description?: string }[];
+    paths: Record<string, Record<string, OpenApiOperation>>;
+    components?: {
+        schemas?: Record<string, OpenApiSchema>;
+        securitySchemes?: Record<string, any>;
+    };
+    tags?: { name: string; description?: string }[];
+    security?: Record<string, string[]>[];
+}
+
+export interface OpenApiOperation {
+    operationId?: string;
+    summary?: string;
+    description?: string;
+    tags?: string[];
+    parameters?: OpenApiParameter[];
+    requestBody?: {
+        required?: boolean;
+        content?: Record<string, { schema?: OpenApiSchema }>;
+    };
+    responses?: Record<
+        string,
+        {
+            description?: string;
+            content?: Record<string, { schema?: OpenApiSchema }>;
+        }
+    >;
+    security?: Record<string, string[]>[];
+}
+
+export interface OpenApiParameter {
+    name: string;
+    in: "query" | "path" | "header" | "cookie";
+    description?: string;
+    required?: boolean;
+    schema?: OpenApiSchema;
+}
+
+export interface OpenApiSchema {
+    type?: string;
+    format?: string;
+    description?: string;
+    properties?: Record<string, OpenApiSchema>;
+    required?: string[];
+    items?: OpenApiSchema;
+    enum?: (string | number)[];
+    oneOf?: OpenApiSchema[];
+    anyOf?: OpenApiSchema[];
+    allOf?: OpenApiSchema[];
+    $ref?: string;
+    readOnly?: boolean;
+    minimum?: number;
+    maximum?: number;
+    maxLength?: number;
+    minLength?: number;
+    default?: any;
+    example?: any;
+    additionalProperties?: boolean | OpenApiSchema;
+}
+
+export interface ParsedEndpoint {
+    id: string;
+    method: string;
+    path: string;
+    shortPath: string;
+    summary: string;
+    description: string;
+    tags: string[];
+    parameters: OpenApiParameter[];
+    requestBody?: OpenApiOperation["requestBody"];
+    responses: NonNullable<OpenApiOperation["responses"]>;
+    security?: OpenApiOperation["security"];
+    operationId?: string;
+}
+
+export interface EndpointGroup {
+    tag: string;
+    description?: string;
+    endpoints: ParsedEndpoint[];
+}