@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/cloud-ui/components/analytics/export-button.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, Download, Upload } from "lucide-react";
+import { Button } from "../../../components/ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../../components/ui/dropdown-menu.js";
+export function ExportButton({ startDate, endDate, granularity, format = "csv", type = "timeseries", variant = "simple", onExport, }) {
+    const handleExport = (exportFormat, exportType) => {
+        if (onExport) {
+            onExport({
+                format: exportFormat,
+                type: exportType,
+                startDate,
+                endDate,
+                granularity,
+            });
+            return;
+        }
+        const params = new URLSearchParams({
+            format: exportFormat,
+            startDate: new Date(startDate).toISOString(),
+            endDate: new Date(endDate).toISOString(),
+            granularity,
+            type: exportType,
+            includeMetadata: "true",
+        });
+        window.location.href = `/api/analytics/export?${params.toString()}`;
+    };
+    if (variant === "dropdown") {
+        return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Upload, { className: "mr-2 h-4 w-4" }), "Export data", _jsx(ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { children: "Time series" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("csv", "timeseries"), children: "Export as CSV" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("excel", "timeseries"), children: "Export as Excel" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("json", "timeseries"), children: "Export as JSON" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Providers" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("csv", "providers"), children: "Export as CSV" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("excel", "providers"), children: "Export as Excel" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("json", "providers"), children: "Export as JSON" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Models" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("csv", "models"), children: "Export as CSV" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("excel", "models"), children: "Export as Excel" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("json", "models"), children: "Export as JSON" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Users" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("csv", "users"), children: "Export as CSV" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("excel", "users"), children: "Export as Excel" }), _jsx(DropdownMenuItem, { onClick: () => handleExport("json", "users"), children: "Export as JSON" })] })] }));
+    }
+    return (_jsxs(Button, { onClick: () => handleExport(format, type), variant: "outline", size: "sm", children: [_jsx(Download, { className: "mr-2 h-4 w-4" }), "Export ", format.toUpperCase()] }));
+}

package/cloud-ui/components/analytics/index.d.ts

@@ -0,0 +1,4 @@
+export { CostAlerts, type CostAlertsProps, type CostAlertsTrending, } from "./cost-alerts";
+export { CostInsightsCard, type CostInsightsCardProps, } from "./cost-insights-card";
+export { type AnalyticsExportFormat, type AnalyticsExportType, ExportButton, type ExportButtonProps, } from "./export-button";
+//# sourceMappingURL=index.d.ts.map

package/cloud-ui/components/analytics/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/analytics/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,kBAAkB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAC"}

package/cloud-ui/components/analytics/index.js

@@ -0,0 +1,3 @@
+export { CostAlerts, } from "./cost-alerts.js";
+export { CostInsightsCard, } from "./cost-insights-card.js";
+export { ExportButton, } from "./export-button.js";

package/cloud-ui/components/api-key-empty-state.d.ts

@@ -0,0 +1,6 @@
+interface ApiKeyEmptyStateProps {
+    onCreateKey?: () => void;
+}
+export declare function ApiKeyEmptyState({ onCreateKey }: ApiKeyEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=api-key-empty-state.d.ts.map

package/cloud-ui/components/api-key-empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-key-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud-ui/components/api-key-empty-state.tsx"],"names":[],"mappings":"AAOA,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,EAAE,qBAAqB,2CActE"}

package/cloud-ui/components/api-key-empty-state.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * API key empty state using the shared EmptyState component.
+ */
+import { KeyRound, Plus } from "lucide-react";
+import { EmptyState } from "../../components/ui/empty-state.js";
+import { BrandButton } from "./brand/brand-button.js";
+export function ApiKeyEmptyState({ onCreateKey }) {
+    return (_jsx(EmptyState, { icon: _jsx(KeyRound, { className: "h-7 w-7 text-[#FF5800]" }), title: "No API keys yet", description: "Create your first API key to start authenticating requests and tracking usage across the platform.", action: _jsxs(BrandButton, { variant: "primary", onClick: onCreateKey, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Create API Key"] }) }));
+}

package/cloud-ui/components/auth/authorize-content.d.ts

@@ -0,0 +1,2 @@
+export declare function AuthorizeContent(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=authorize-content.d.ts.map

package/cloud-ui/components/auth/authorize-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"authorize-content.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/auth/authorize-content.tsx"],"names":[],"mappings":"AAwBA,wBAAgB,gBAAgB,4CAgC/B"}

package/cloud-ui/components/auth/authorize-content.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StewardLogin, useAuth } from "@stwd/react";
+import { AlertTriangle, CheckCircle2, Loader2, Shield } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import Image from "../../runtime/image.js";
+import { useRouter, useSearchParams } from "../../runtime/navigation.js";
+import { BrandButton, BrandCard, CornerBrackets } from "../primitives.js";
+import { buildAppAuthorizeCancelRedirect, buildAppAuthorizeCompletionRedirect, storeCurrentAppAuthorizeReturnTo, } from "./authorize-return.js";
+export function AuthorizeContent() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const appId = searchParams.get("app_id");
+    const redirectUri = searchParams.get("redirect_uri");
+    const state = searchParams.get("state");
+    if (!appId) {
+        return (_jsx(AuthorizationErrorFrame, { error: "Missing app_id parameter. Apps must be registered with Eliza Cloud.", onHome: () => router.push("/") }));
+    }
+    if (!redirectUri) {
+        return (_jsx(AuthorizationErrorFrame, { error: "Missing redirect_uri parameter.", onHome: () => router.push("/") }));
+    }
+    return (_jsx(AuthorizeAuthenticatedContent, { appId: appId, redirectUri: redirectUri, state: state }));
+}
+function AuthorizeAuthenticatedContent({ appId, redirectUri, state, }) {
+    const { isLoading: authLoading, isAuthenticated, getToken, signOut, providers, isProvidersLoading, } = useAuth();
+    // Steward provider discovery (Google/Discord/etc) is fetched at app shell
+    // mount, but on a cold load to /app-auth/authorize the round-trip can take a
+    // few seconds. Reveal the login section atomically once providers resolve so
+    // OAuth buttons don't pop in one-by-one underneath passkey/email.
+    const providersReady = providers !== null || !isProvidersLoading;
+    const router = useRouter();
+    const [appInfo, setAppInfo] = useState(null);
+    const [status, setStatus] = useState("validating");
+    const [error, setError] = useState(null);
+    useEffect(storeCurrentAppAuthorizeReturnTo, []);
+    // Validate app + redirect_uri exactly once on mount.
+    useEffect(() => {
+        let cancelled = false;
+        async function validateApp() {
+            try {
+                const uri = new URL(redirectUri);
+                if (uri.protocol !== "http:" && uri.protocol !== "https:") {
+                    throw new Error("Invalid protocol");
+                }
+            }
+            catch {
+                setError("Invalid redirect_uri format.");
+                setStatus("error");
+                return;
+            }
+            try {
+                const res = await fetch(`/api/v1/apps/${appId}/public?redirect_uri=${encodeURIComponent(redirectUri)}`);
+                if (cancelled)
+                    return;
+                if (!res.ok) {
+                    if (res.status === 404) {
+                        setError("App not found. Please ensure the app is registered with Eliza Cloud.");
+                    }
+                    else if (res.status === 400) {
+                        setError("This redirect URI is not registered for the selected app.");
+                    }
+                    else {
+                        setError("Failed to verify app.");
+                    }
+                    setStatus("error");
+                    return;
+                }
+                const data = await res.json();
+                setAppInfo(data.app);
+                setStatus("ready");
+            }
+            catch {
+                if (cancelled)
+                    return;
+                setError("Failed to verify app. Please try again.");
+                setStatus("error");
+            }
+        }
+        void validateApp();
+        return () => {
+            cancelled = true;
+        };
+    }, [appId, redirectUri]);
+    const handleAuthorize = useCallback(async () => {
+        if (!appId || !redirectUri)
+            return;
+        const token = getToken();
+        if (!token) {
+            // Edge case: useAuth says authenticated but token isn't readable.
+            // Force re-sign-in rather than silently failing.
+            signOut();
+            setError("Your session expired. Please sign in again.");
+            setStatus("ready");
+            return;
+        }
+        setStatus("authorizing");
+        setError(null);
+        try {
+            const res = await fetch("/api/v1/app-auth/connect", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify({ appId, redirectUri }),
+            });
+            if (!res.ok) {
+                const message = res.status === 401
+                    ? "Authentication failed. Please sign in again."
+                    : `Failed to connect to ${appInfo?.name ?? "the app"} (HTTP ${res.status}).`;
+                throw new Error(message);
+            }
+            const data = (await res.json().catch(() => null));
+            const code = typeof data?.code === "string" ? data.code : "";
+            if (!code) {
+                throw new Error("Authorization failed because no authorization code was returned.");
+            }
+            window.location.href = buildAppAuthorizeCompletionRedirect({
+                code,
+                redirectUri,
+                state,
+            });
+        }
+        catch (err) {
+            const message = err instanceof Error
+                ? err.message
+                : "Failed to complete authorization.";
+            setError(message);
+            setStatus("ready");
+        }
+    }, [appId, redirectUri, state, appInfo?.name, getToken, signOut]);
+    const handleCancel = useCallback(() => {
+        if (!redirectUri) {
+            router.push("/");
+            return;
+        }
+        window.location.href = buildAppAuthorizeCancelRedirect({
+            redirectUri,
+            state,
+        });
+    }, [redirectUri, state, router]);
+    // Render.
+    if (status === "validating" || authLoading) {
+        return (_jsxs(Frame, { children: [_jsx(Loader2, { className: "h-12 w-12 animate-spin text-[#FF5800]" }), _jsx("h3", { className: "text-lg font-semibold text-white", children: "Verifying application..." })] }));
+    }
+    if (status === "error" && !appInfo) {
+        return (_jsx(AuthorizationErrorFrame, { error: error, onHome: () => router.push("/") }));
+    }
+    // The earlier returns guarantee appInfo is set from here on (status is
+    // either "ready", "authorizing", or "error"-with-appInfo-loaded).
+    if (!appInfo)
+        return null;
+    if (status === "authorizing") {
+        return (_jsxs(Frame, { children: [_jsx(Loader2, { className: "h-12 w-12 animate-spin text-[#FF5800]" }), _jsx("h3", { className: "text-lg font-semibold text-white", children: "Authorizing..." }), _jsxs("p", { className: "text-sm text-white/60", children: ["Redirecting you back to ", appInfo.name] })] }));
+    }
+    return (_jsxs(Frame, { children: [_jsx(AppHeader, { appInfo: appInfo }), _jsx(PermissionsList, {}), error && (_jsx("div", { className: "rounded-sm border border-red-400/40 bg-red-500/10 p-3 text-sm text-red-200", children: error })), isAuthenticated ? (_jsx(SignedInActions, { appName: appInfo.name, onAuthorize: handleAuthorize, onCancel: handleCancel })) : (_jsx(SignedOutActions, { onCancel: handleCancel, providersReady: providersReady })), _jsx("p", { className: "text-center text-xs text-white/40", children: "By continuing, you agree to share your account information with this app." })] }));
+}
+// Presentational helpers kept local to this file.
+function AuthorizationErrorFrame({ error, onHome, }) {
+    return (_jsxs(Frame, { children: [_jsx("div", { className: "p-4 rounded-full bg-red-500/20", children: _jsx(AlertTriangle, { className: "h-8 w-8 text-red-400" }) }), _jsx("h3", { className: "text-lg font-semibold text-white", children: "Authorization Error" }), _jsx("p", { className: "text-sm text-white/60 max-w-xs text-center", children: error }), _jsx(BrandButton, { variant: "outline", onClick: onHome, className: "mt-4", children: "Go to Eliza Cloud" })] }));
+}
+function Frame({ children }) {
+    // Intentionally no LandingHeader. The header renders different markup on
+    // server vs client based on auth state, and the resulting hydration error
+    // remounted the tree and prevented validateApp's effect from completing.
+    // Consent screens are also better off header-less (Google/GitHub do the
+    // same): single-purpose, not a navigable location.
+    return (_jsxs("div", { className: "relative flex min-h-screen w-full flex-col overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-black via-zinc-900 to-black" }), _jsx("div", { className: "relative z-10 flex flex-1 items-center justify-center p-4", children: _jsxs(BrandCard, { className: "w-full max-w-md backdrop-blur-sm bg-black/60", children: [_jsx(CornerBrackets, { size: "md", className: "opacity-50" }), _jsx("div", { className: "relative z-10 flex flex-col items-center gap-6 py-8 px-2", children: children })] }) })] }));
+}
+function AppHeader({ appInfo }) {
+    return (_jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [appInfo.logo_url ? (_jsx(Image, { src: appInfo.logo_url, alt: appInfo.name, width: 64, height: 64, className: "h-16 w-16 rounded-sm object-cover", unoptimized: true })) : (_jsx("div", { className: "h-16 w-16 rounded-sm bg-gradient-to-br from-[#FF5800] to-[#FF8800] flex items-center justify-center", children: _jsx("span", { className: "text-2xl font-bold text-white", children: appInfo.name.charAt(0) }) })), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold text-white", children: appInfo.name }), appInfo.website_url && (_jsx("p", { className: "text-sm text-white/50 mt-1", children: new URL(appInfo.website_url).hostname }))] })] }));
+}
+function PermissionsList() {
+    return (_jsxs("div", { className: "space-y-3 p-4 rounded-sm bg-white/5 border border-white/10 w-full", children: [_jsxs("div", { className: "flex items-center gap-2 text-white/80", children: [_jsx(Shield, { className: "h-4 w-4 text-[#FF5800]" }), _jsx("span", { className: "text-sm font-medium", children: "This app wants to:" })] }), _jsxs("ul", { className: "space-y-2 text-sm text-white/60 ml-6", children: [_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-[#FF5800]" }), "Access your Eliza Cloud account"] }), _jsxs("li", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-[#FF5800]" }), "Use AI features paid for from your cloud credit balance"] })] })] }));
+}
+function SignedInActions({ appName, onAuthorize, onCancel, }) {
+    return (_jsxs("div", { className: "flex w-full flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 rounded-sm border border-white/10 bg-white/5 px-3 py-2 text-sm text-white/80", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-400" }), _jsx("span", { children: "Signed in" })] }), _jsxs(BrandButton, { onClick: onAuthorize, className: "w-full", children: ["Authorize ", appName] }), _jsx(BrandButton, { variant: "ghost", onClick: onCancel, className: "w-full", children: "Cancel" })] }));
+}
+function SignedOutActions({ onCancel, providersReady, }) {
+    return (_jsxs("div", { className: "flex w-full flex-col gap-4", children: [providersReady ? (_jsx(StewardLogin, { variant: "inline", showPasskey: true, showEmail: true, title: "Sign in to authorize" })) : (_jsxs("div", { className: "flex flex-col items-center gap-3 py-6", children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin text-[#FF5800]" }), _jsx("p", { className: "text-sm text-white/60", children: "Loading sign-in options..." })] })), _jsx(BrandButton, { variant: "ghost", onClick: onCancel, className: "w-full", children: "Cancel" })] }));
+}

package/cloud-ui/components/auth/authorize-return.d.ts

@@ -0,0 +1,17 @@
+export declare const APP_AUTHORIZE_PATH = "/app-auth/authorize";
+export declare const APP_AUTH_RETURN_TO_KEY = "eliza_app_auth_return_to";
+export declare function buildAppAuthorizeReturnTo(search: string): string;
+export declare function buildAppAuthorizeLoginHref(search: string): string;
+export declare function buildAppAuthorizeCompletionRedirect(input: {
+    code: string;
+    redirectUri: string;
+    state?: string | null;
+}): string;
+export declare function buildAppAuthorizeCancelRedirect(input: {
+    redirectUri: string;
+    state?: string | null;
+}): string;
+export declare function storeCurrentAppAuthorizeReturnTo(): void;
+export declare function clearStoredAppAuthorizeReturnTo(): void;
+export declare function readStoredAppAuthorizeReturnTo(): string | null;
+//# sourceMappingURL=authorize-return.d.ts.map

package/cloud-ui/components/auth/authorize-return.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"authorize-return.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/auth/authorize-return.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,wBAAwB,CAAC;AACxD,eAAO,MAAM,sBAAsB,6BAA6B,CAAC;AAEjE,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAOhE;AAED,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEjE;AASD,wBAAgB,mCAAmC,CAAC,KAAK,EAAE;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,GAAG,MAAM,CAMT;AAED,wBAAgB,+BAA+B,CAAC,KAAK,EAAE;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,GAAG,MAAM,CAOT;AAED,wBAAgB,gCAAgC,IAAI,IAAI,CAQvD;AAED,wBAAgB,+BAA+B,IAAI,IAAI,CAQtD;AAED,wBAAgB,8BAA8B,IAAI,MAAM,GAAG,IAAI,CAa9D"}

package/cloud-ui/components/auth/authorize-return.js

@@ -0,0 +1,76 @@
+export const APP_AUTHORIZE_PATH = "/app-auth/authorize";
+export const APP_AUTH_RETURN_TO_KEY = "eliza_app_auth_return_to";
+export function buildAppAuthorizeReturnTo(search) {
+    const normalizedSearch = search?.startsWith("?")
+        ? search
+        : search
+            ? `?${search}`
+            : "";
+    return `${APP_AUTHORIZE_PATH}${normalizedSearch}`;
+}
+export function buildAppAuthorizeLoginHref(search) {
+    return `/login?returnTo=${encodeURIComponent(buildAppAuthorizeReturnTo(search))}`;
+}
+function clearAppAuthorizeResponseParams(url) {
+    url.searchParams.delete("token");
+    url.searchParams.delete("code");
+    url.searchParams.delete("error");
+    url.searchParams.delete("error_description");
+}
+export function buildAppAuthorizeCompletionRedirect(input) {
+    const url = new URL(input.redirectUri);
+    clearAppAuthorizeResponseParams(url);
+    url.searchParams.set("code", input.code);
+    if (input.state != null)
+        url.searchParams.set("state", input.state);
+    return url.toString();
+}
+export function buildAppAuthorizeCancelRedirect(input) {
+    const url = new URL(input.redirectUri);
+    clearAppAuthorizeResponseParams(url);
+    url.searchParams.set("error", "access_denied");
+    url.searchParams.set("error_description", "User denied authorization");
+    if (input.state != null)
+        url.searchParams.set("state", input.state);
+    return url.toString();
+}
+export function storeCurrentAppAuthorizeReturnTo() {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(APP_AUTH_RETURN_TO_KEY, window.location.href);
+    }
+    catch {
+        // Best effort. Browsers can deny storage; callers should still handle
+        // missing app-auth context explicitly.
+    }
+}
+export function clearStoredAppAuthorizeReturnTo() {
+    if (typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.removeItem(APP_AUTH_RETURN_TO_KEY);
+    }
+    catch {
+        // Best effort. A stale value is harmless because reads validate origin
+        // and path, but clearing avoids surprising later email callbacks.
+    }
+}
+export function readStoredAppAuthorizeReturnTo() {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const stored = window.localStorage.getItem(APP_AUTH_RETURN_TO_KEY);
+        if (!stored)
+            return null;
+        const url = new URL(stored, window.location.origin);
+        if (url.origin !== window.location.origin)
+            return null;
+        if (url.pathname !== APP_AUTHORIZE_PATH)
+            return null;
+        return `${url.pathname}${url.search}${url.hash}`;
+    }
+    catch {
+        return null;
+    }
+}

package/cloud-ui/components/brand/brand-button.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Brand button: flat fills, theme-token driven, xs rounding.
+ *
+ * @param props.asChild - If true, renders as a child component using Radix Slot
+ */
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const brandButtonVariants: (props?: ({
+    variant?: "outline" | "ghost" | "icon" | "primary" | "icon-primary" | null | undefined;
+    size?: "sm" | "lg" | "icon" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BrandButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof brandButtonVariants> {
+    asChild?: boolean;
+}
+declare const BrandButton: React.ForwardRefExoticComponent<BrandButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { BrandButton, brandButtonVariants };
+//# sourceMappingURL=brand-button.d.ts.map

package/cloud-ui/components/brand/brand-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/brand/brand-button.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,mBAAmB;;;8EA0BxB,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,WAAW,4FAWhB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAC"}

package/cloud-ui/components/brand/brand-button.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Brand button: flat fills, theme-token driven, xs rounding.
+ *
+ * @param props.asChild - If true, renders as a child component using Radix Slot
+ */
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const brandButtonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/30 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer", {
+    variants: {
+        variant: {
+            primary: "bg-accent text-accent-foreground hover:bg-background hover:text-foreground active:bg-background/90",
+            ghost: "bg-transparent text-txt/70 hover:bg-surface hover:text-txt",
+            outline: "bg-bg-elevated text-txt hover:bg-foreground hover:text-background",
+            icon: "h-10 w-10 bg-bg-elevated hover:bg-foreground hover:text-background",
+            "icon-primary": "size-10 aspect-square bg-accent-subtle text-accent hover:bg-foreground hover:text-background active:bg-foreground/90 disabled:bg-bg-muted disabled:opacity-50",
+        },
+        size: {
+            sm: "h-8 px-3 text-xs",
+            md: "h-10 px-4 py-2",
+            lg: "h-12 px-6 py-3",
+            icon: "size-10 aspect-square",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "md",
+    },
+});
+const BrandButton = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { className: cn(brandButtonVariants({ variant, size, className })), ref: ref, ...props }));
+});
+BrandButton.displayName = "BrandButton";
+export { BrandButton, brandButtonVariants };

package/cloud-ui/components/brand/brand-card.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Brand card: flat surface, theme-token driven, xs rounding, with optional corner brackets.
+ *
+ * @param props.hover - Enable hover treatment (border + bg shift)
+ * @param props.corners - Render corner brackets
+ * @param props.cornerSize - Corner bracket size
+ * @param props.cornerColor - Corner bracket color override (defaults to currentColor)
+ * @param props.asChild - If true, render as Radix Slot child
+ */
+import type * as React from "react";
+interface BrandCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    hover?: boolean;
+    corners?: boolean;
+    cornerSize?: "sm" | "md" | "lg" | "xl";
+    cornerColor?: string;
+    asChild?: boolean;
+}
+export declare function BrandCard({ children, className, hover, corners, cornerSize, cornerColor, asChild, ...props }: BrandCardProps): import("react/jsx-runtime").JSX.Element;
+interface AgentCardProps {
+    title: string;
+    description: string;
+    icon: React.ReactNode;
+    color: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+export declare function AgentCard({ title, description, icon, color, action, className, }: AgentCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=brand-card.d.ts.map

package/cloud-ui/components/brand/brand-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-card.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/brand/brand-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,KAAa,EACb,OAAc,EACd,UAAiB,EACjB,WAAW,EACX,OAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,2CAiBhB;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,MAAM,EACN,SAAS,GACV,EAAE,cAAc,2CAmBhB"}

package/cloud-ui/components/brand/brand-card.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Brand card: flat surface, theme-token driven, xs rounding, with optional corner brackets.
+ *
+ * @param props.hover - Enable hover treatment (border + bg shift)
+ * @param props.corners - Render corner brackets
+ * @param props.cornerSize - Corner bracket size
+ * @param props.cornerColor - Corner bracket color override (defaults to currentColor)
+ * @param props.asChild - If true, render as Radix Slot child
+ */
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/utils.js";
+import { CornerBrackets } from "./corner-brackets.js";
+export function BrandCard({ children, className, hover = false, corners = true, cornerSize = "md", cornerColor, asChild = false, ...props }) {
+    const Component = asChild ? Slot : "div";
+    return (_jsxs(Component, { className: cn("relative rounded-sm border border-border bg-bg-elevated p-4 md:p-6 text-txt", hover &&
+            "group transition-colors duration-200 hover:border-border-strong hover:bg-bg-hover", className), ...props, children: [corners && _jsx(CornerBrackets, { size: cornerSize, color: cornerColor }), children] }));
+}
+export function AgentCard({ title, description, icon, color, action, className, }) {
+    return (_jsxs(BrandCard, { hover: true, className: cn("group", className), children: [_jsx("div", { className: "mb-4 inline-flex rounded-sm border border-current/15 p-3", style: {
+                    backgroundColor: `${color}20`,
+                    color: color,
+                }, children: icon }), _jsx("h3", { className: "text-xl font-bold text-txt-strong mb-2", children: title }), _jsx("p", { className: "text-muted-foreground text-sm mb-4", children: description }), action && action] }));
+}

package/cloud-ui/components/brand/brand-tabs-responsive.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Brand Tabs Responsive Component
+ * Automatically switches between tabs (desktop) and dropdown (mobile)
+ *
+ * IMPORTANT: Always provide a unique `id` prop to prevent hydration errors
+ *
+ * @example
+ * <BrandTabsResponsive
+ *   id="my-tabs"
+ *   tabs={[
+ *     { value: "tab1", label: "Tab 1", icon: <Icon /> },
+ *     { value: "tab2", label: "Tab 2", icon: <Icon /> }
+ *   ]}
+ *   value={activeTab}
+ *   onValueChange={setActiveTab}
+ * >
+ *   <BrandTabsContent value="tab1">Content 1</BrandTabsContent>
+ *   <BrandTabsContent value="tab2">Content 2</BrandTabsContent>
+ * </BrandTabsResponsive>
+ */
+import * as React from "react";
+export interface TabItem {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+interface BrandTabsResponsiveProps {
+    id: string;
+    tabs: TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+    breakpoint?: "sm" | "md" | "lg";
+}
+export declare function BrandTabsResponsive({ id, tabs, value, defaultValue, onValueChange, children, className, breakpoint, }: BrandTabsResponsiveProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=brand-tabs-responsive.d.ts.map

package/cloud-ui/components/brand/brand-tabs-responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-tabs-responsive.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/brand/brand-tabs-responsive.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,wBAAwB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,EAAE,EACF,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAiB,GAClB,EAAE,wBAAwB,kDAmG1B"}

package/cloud-ui/components/brand/brand-tabs-responsive.js

@@ -0,0 +1,38 @@
+/**
+ * Brand Tabs Responsive Component
+ * Automatically switches between tabs (desktop) and dropdown (mobile)
+ *
+ * IMPORTANT: Always provide a unique `id` prop to prevent hydration errors
+ *
+ * @example
+ * <BrandTabsResponsive
+ *   id="my-tabs"
+ *   tabs={[
+ *     { value: "tab1", label: "Tab 1", icon: <Icon /> },
+ *     { value: "tab2", label: "Tab 2", icon: <Icon /> }
+ *   ]}
+ *   value={activeTab}
+ *   onValueChange={setActiveTab}
+ * >
+ *   <BrandTabsContent value="tab1">Content 1</BrandTabsContent>
+ *   <BrandTabsContent value="tab2">Content 2</BrandTabsContent>
+ * </BrandTabsResponsive>
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../../components/ui/select.js";
+import { cn } from "../../lib/utils.js";
+export function BrandTabsResponsive({ id, tabs, value, defaultValue, onValueChange, children, className, breakpoint = "md", // Default to medium breakpoint
+ }) {
+    const [isMounted, setIsMounted] = React.useState(false);
+    React.useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    // Prevent hydration mismatch by not rendering until mounted
+    if (!isMounted) {
+        return null;
+    }
+    return (_jsxs(TabsPrimitive.Root, { id: id, value: value, defaultValue: defaultValue, onValueChange: onValueChange, className: cn("w-full", className), children: [_jsx("div", { className: cn("block", breakpoint === "sm" && "sm:hidden", breakpoint === "md" && "md:hidden", breakpoint === "lg" && "lg:hidden"), children: _jsxs(Select, { value: value || defaultValue, onValueChange: onValueChange, children: [_jsx(SelectTrigger, { className: cn("w-full h-8 rounded-sm border border-border bg-bg-elevated", "text-txt text-xs px-3 py-1", "hover:bg-bg-hover transition-colors"), children: _jsx(SelectValue, { children: tabs.find((tab) => tab.value === (value || defaultValue))?.label }) }), _jsx(SelectContent, { className: "bg-bg-elevated border-border", children: tabs.map((tab) => (_jsx(SelectItem, { value: tab.value, disabled: tab.disabled, className: cn("text-txt text-xs cursor-pointer", "hover:bg-bg-hover focus:bg-bg-hover", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"), children: _jsxs("div", { className: "flex items-center gap-2", children: [tab.icon, tab.label] }) }, tab.value))) })] }) }), _jsx(TabsPrimitive.List, { className: cn("hidden", breakpoint === "sm" && "sm:inline-flex", breakpoint === "md" && "md:inline-flex", breakpoint === "lg" && "lg:inline-flex", "h-8 lg:h-9 items-center justify-center rounded-sm bg-bg-elevated border border-border p-0"), children: tabs.map((tab) => (_jsxs(TabsPrimitive.Trigger, { value: tab.value, disabled: tab.disabled, className: cn("inline-flex items-center gap-1.5 lg:gap-2 rounded-sm px-2.5 lg:px-4 xl:px-6 py-1 lg:py-1.5 text-xs lg:text-sm font-medium transition-colors whitespace-nowrap", "border-b-2 border-transparent", "text-txt/70 hover:text-txt", "data-[state=active]:border-txt data-[state=active]:bg-bg-hover data-[state=active]:text-txt", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50"), children: [_jsx("span", { className: "[&>svg]:h-3.5 [&>svg]:w-3.5 lg:[&>svg]:h-4 lg:[&>svg]:w-4", children: tab.icon }), _jsx("span", { className: "hidden lg:inline", children: tab.label })] }, tab.value))) }), children] }));
+}

package/cloud-ui/components/brand/brand-tabs.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Brand tabs: flat, token-driven, with bottom-border active state.
+ * Requires a unique `id` on the consumer to avoid hydration mismatches when used in pairs.
+ */
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+declare const BrandTabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const BrandTabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const BrandTabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const BrandTabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SimpleBrandTabsProps {
+    tabs: string[];
+    activeTab: string;
+    onTabChange: (tab: string) => void;
+    className?: string;
+}
+export declare function SimpleBrandTabs({ tabs, activeTab, onTabChange, className, }: SimpleBrandTabsProps): import("react/jsx-runtime").JSX.Element;
+export { BrandTabs, BrandTabsContent, BrandTabsList, BrandTabsTrigger };
+//# sourceMappingURL=brand-tabs.d.ts.map

package/cloud-ui/components/brand/brand-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/brand/brand-tabs.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,SAAS,gGAAqB,CAAC;AAErC,QAAA,MAAM,aAAa,uJAYjB,CAAC;AAGH,QAAA,MAAM,gBAAgB,gKAgBpB,CAAC;AAGH,QAAA,MAAM,gBAAgB,0JAYpB,CAAC;AAGH,UAAU,oBAAoB;IAC5B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,SAAS,EACT,WAAW,EACX,SAAS,GACV,EAAE,oBAAoB,2CAetB;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}

package/cloud-ui/components/brand/brand-tabs.js

@@ -0,0 +1,20 @@
+/**
+ * Brand tabs: flat, token-driven, with bottom-border active state.
+ * Requires a unique `id` on the consumer to avoid hydration mismatches when used in pairs.
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const BrandTabs = TabsPrimitive.Root;
+const BrandTabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-9 items-center justify-center rounded-sm border border-border bg-bg-elevated p-0", className), ...props })));
+BrandTabsList.displayName = TabsPrimitive.List.displayName;
+const BrandTabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center gap-2 rounded-sm px-6 py-1.5 text-sm font-medium transition-colors whitespace-nowrap", "border-b-2 border-transparent text-txt/70 hover:text-txt", "data-[state=active]:border-txt data-[state=active]:bg-bg-hover data-[state=active]:text-txt", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", className), ...props })));
+BrandTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const BrandTabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-8 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props })));
+BrandTabsContent.displayName = TabsPrimitive.Content.displayName;
+export function SimpleBrandTabs({ tabs, activeTab, onTabChange, className, }) {
+    return (_jsx("div", { className: cn("flex flex-wrap gap-0", className), children: tabs.map((tab) => (_jsx("button", { type: "button", onClick: () => onTabChange(tab), className: cn("brand-tab", activeTab === tab && "brand-tab-active"), children: tab }, tab))) }));
+}
+export { BrandTabs, BrandTabsContent, BrandTabsList, BrandTabsTrigger };