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

package/cloud-ui/components/code/prism-light.js

@@ -0,0 +1,45 @@
+/// <reference path="../../types/react-syntax-highlighter.d.ts" />
+// Subset of grammars registered for the cloud-frontend code surfaces
+// (docs, blog, api-explorer, sensitive requests, chat code blocks,
+// character JSON editor). The full Prism bundle ships ~280 grammars and
+// dominates the docs vendor chunk; registering only what we use cuts the
+// shipped grammars by ~95%.
+import bash from "react-syntax-highlighter/dist/esm/languages/prism/bash";
+import css from "react-syntax-highlighter/dist/esm/languages/prism/css";
+import javascript from "react-syntax-highlighter/dist/esm/languages/prism/javascript";
+import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
+import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
+import markdown from "react-syntax-highlighter/dist/esm/languages/prism/markdown";
+import markup from "react-syntax-highlighter/dist/esm/languages/prism/markup";
+import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
+import sql from "react-syntax-highlighter/dist/esm/languages/prism/sql";
+import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
+import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
+import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
+import * as PrismLightModule from "react-syntax-highlighter/dist/esm/prism-light";
+const SyntaxHighlighter = "default" in PrismLightModule ? PrismLightModule.default : PrismLightModule;
+const registerLanguage = SyntaxHighlighter.registerLanguage;
+if (typeof registerLanguage === "function") {
+    registerLanguage("bash", bash);
+    registerLanguage("shell", bash);
+    registerLanguage("sh", bash);
+    registerLanguage("css", css);
+    registerLanguage("javascript", javascript);
+    registerLanguage("js", javascript);
+    registerLanguage("json", json);
+    registerLanguage("jsx", jsx);
+    registerLanguage("markdown", markdown);
+    registerLanguage("md", markdown);
+    registerLanguage("markup", markup);
+    registerLanguage("html", markup);
+    registerLanguage("xml", markup);
+    registerLanguage("python", python);
+    registerLanguage("py", python);
+    registerLanguage("sql", sql);
+    registerLanguage("tsx", tsx);
+    registerLanguage("typescript", typescript);
+    registerLanguage("ts", typescript);
+    registerLanguage("yaml", yaml);
+    registerLanguage("yml", yaml);
+}
+export { SyntaxHighlighter };

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

@@ -0,0 +1,85 @@
+import type * as React from "react";
+type ConnectionCardStatus = "loading" | "not-configured" | "connected" | "disconnected";
+interface ConnectionCardProps {
+    /** Integration name (e.g. "Discord Bot") */
+    name: string;
+    /** Icon element for the integration */
+    icon: React.ReactNode;
+    /** Brand accent color class (e.g. "text-[#5865F2]") */
+    brandColorClass?: string;
+    /** Short description of the integration */
+    description: string;
+    /** Current connection status */
+    status: ConnectionCardStatus;
+    /** Content shown when connected */
+    connectedContent?: React.ReactNode;
+    /** Content shown when disconnected (setup form) */
+    setupContent?: React.ReactNode;
+    /** Content shown when not configured */
+    notConfiguredMessage?: string;
+    /** Status badge shown in the header when connected */
+    statusBadge?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function ConnectionLoadingCard({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ConnectionConnectedBadge({ label, className, }: {
+    label?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+interface ConnectionIdentityPanelProps {
+    icon: React.ReactNode;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    children?: React.ReactNode;
+    iconClassName?: string;
+    className?: string;
+    actions?: React.ReactNode;
+}
+declare function ConnectionIdentityPanel({ icon, title, subtitle, children, iconClassName, className, actions, }: ConnectionIdentityPanelProps): import("react/jsx-runtime").JSX.Element;
+interface ConnectionCalloutProps {
+    title?: React.ReactNode;
+    items?: React.ReactNode[];
+    children?: React.ReactNode;
+    tone?: "blue" | "green" | "red" | "yellow" | "muted";
+    className?: string;
+}
+declare function ConnectionCallout({ title, items, children, tone, className, }: ConnectionCalloutProps): import("react/jsx-runtime").JSX.Element;
+interface ConnectionInstructionsProps {
+    title: React.ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: React.ReactNode;
+    triggerClassName?: string;
+    contentClassName?: string;
+}
+declare function ConnectionInstructions({ title, open, onOpenChange, children, triggerClassName, contentClassName, }: ConnectionInstructionsProps): import("react/jsx-runtime").JSX.Element;
+interface ConnectionCopyRowProps {
+    label: React.ReactNode;
+    value: string;
+    onCopied?: (value: string) => void;
+    copyLabel?: string;
+    className?: string;
+}
+declare function ConnectionCopyRow({ label, value, onCopied, copyLabel, className, }: ConnectionCopyRowProps): import("react/jsx-runtime").JSX.Element;
+interface ConnectionDisconnectActionProps {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    onDisconnect: () => void;
+    isDisconnecting?: boolean;
+    buttonLabel?: string;
+    confirmLabel?: string;
+    triggerIcon?: React.ReactNode;
+}
+declare function ConnectionDisconnectAction({ title, description, onDisconnect, isDisconnecting, buttonLabel, confirmLabel, triggerIcon, }: ConnectionDisconnectActionProps): import("react/jsx-runtime").JSX.Element;
+declare function ConnectionFooterActions({ note, children, className, }: {
+    note?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ConnectionCard({ name, icon, description, status, connectedContent, setupContent, notConfiguredMessage, statusBadge, className, }: ConnectionCardProps): import("react/jsx-runtime").JSX.Element;
+export type { ConnectionCardProps, ConnectionCardStatus };
+export { ConnectionCallout, ConnectionCard, ConnectionConnectedBadge, ConnectionCopyRow, ConnectionDisconnectAction, ConnectionFooterActions, ConnectionIdentityPanel, ConnectionInstructions, ConnectionLoadingCard, };
+//# sourceMappingURL=connection-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"connection-card.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud-ui/components/connection-card.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,58 @@
+/**
+ * Connection card layout component for platform integration settings.
+ * Provides a consistent shell for Discord, Telegram, Twitter, etc. connection UIs.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, ChevronDown, Copy, Loader2, XCircle } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "../../components/ui/alert-dialog.js";
+import { Badge } from "../../components/ui/badge.js";
+import { Button } from "../../components/ui/button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../../components/ui/collapsible.js";
+import { Label } from "../../components/ui/label.js";
+import { cn } from "../lib/utils.js";
+function ConnectionLoadingCard({ className }) {
+    return (_jsx("div", { className: cn("rounded-sm border bg-card text-card-foreground ", className), children: _jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }) }));
+}
+function ConnectionConnectedBadge({ label = "Connected", className, }) {
+    return (_jsxs(Badge, { variant: "default", className: cn("bg-green-500", className), children: [_jsx(CheckCircle, { className: "h-3 w-3 mr-1" }), label] }));
+}
+function ConnectionIdentityPanel({ icon, title, subtitle, children, iconClassName, className, actions, }) {
+    return (_jsxs("div", { className: cn("flex items-center gap-4 p-4 bg-muted rounded-sm", className), children: [_jsx("div", { className: cn("h-12 w-12 rounded-full flex items-center justify-center shrink-0", iconClassName), children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [title && _jsx("div", { className: "font-semibold truncate", children: title }), subtitle && (_jsx("div", { className: "text-sm text-muted-foreground", children: subtitle })), children] }), actions] }));
+}
+const calloutToneClassName = {
+    // Brand rule: blue is banned. Existing `tone="blue"` call sites now
+    // render as a neutral informational callout instead.
+    blue: "bg-white/5 border-white/15 text-foreground dark:text-white/80",
+    green: "bg-green-500/10 border-green-500/30 text-green-700 dark:text-green-400",
+    red: "bg-red-500/10 border-red-500/30 text-red-700 dark:text-red-400",
+    yellow: "bg-yellow-500/10 border-yellow-500/30 text-yellow-700 dark:text-yellow-400",
+    muted: "bg-muted border-transparent text-foreground",
+};
+function ConnectionCallout({ title, items, children, tone = "muted", className, }) {
+    return (_jsxs("div", { className: cn("p-3 border rounded-sm", calloutToneClassName[tone], className), children: [title && _jsx("p", { className: "text-sm font-medium mb-2", children: title }), items && items.length > 0 && (_jsx("ul", { className: "text-xs text-muted-foreground space-y-1", children: items.map((item) => (_jsxs("li", { children: ["\u2022 ", item] }, String(item)))) })), children] }));
+}
+function ConnectionInstructions({ title, open, onOpenChange, children, triggerClassName, contentClassName, }) {
+    return (_jsxs(Collapsible, { open: open, onOpenChange: onOpenChange, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: cn("w-full justify-between p-4 h-auto bg-muted", triggerClassName), children: [_jsx("span", { className: "font-medium", children: title }), _jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", open && "rotate-180") })] }) }), _jsx(CollapsibleContent, { className: cn("p-4 bg-muted rounded-b-lg border-t", contentClassName), children: children })] }));
+}
+function ConnectionCopyRow({ label, value, onCopied, copyLabel = "Copy", className, }) {
+    return (_jsxs("div", { className: cn("p-3 bg-muted rounded-sm space-y-2", className), children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 text-xs bg-background p-2 rounded-sm border overflow-x-auto", children: value }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            void navigator.clipboard.writeText(value);
+                            onCopied?.(value);
+                        }, children: [_jsx(Copy, { className: "h-4 w-4 mr-1" }), copyLabel] })] })] }));
+}
+function ConnectionDisconnectAction({ title, description, onDisconnect, isDisconnecting = false, buttonLabel = "Disconnect", confirmLabel = "Disconnect", triggerIcon, }) {
+    return (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "text-red-600 hover:text-red-700", disabled: isDisconnecting, children: [isDisconnecting ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin mr-1" })) : ((triggerIcon ?? _jsx(XCircle, { className: "h-4 w-4 mr-1" }))), buttonLabel] }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { onClick: onDisconnect, className: "bg-red-600 hover:bg-red-700", children: confirmLabel })] })] })] }));
+}
+function ConnectionFooterActions({ note, children, className, }) {
+    return (_jsxs("div", { className: cn("flex items-center justify-between pt-2 border-t", className), children: [note && _jsx("div", { className: "text-sm text-muted-foreground", children: note }), children] }));
+}
+function ConnectionCard({ name, icon, description, status, connectedContent, setupContent, notConfiguredMessage = "This integration is not configured. Please contact your administrator.", statusBadge, className, }) {
+    if (status === "loading") {
+        return _jsx(ConnectionLoadingCard, { className: className });
+    }
+    return (_jsxs("div", { "data-slot": "connection-card", className: cn("rounded-sm border bg-card text-card-foreground ", className), children: [_jsx("div", { className: "flex flex-col space-y-1.5 p-6", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsxs("h3", { className: "flex items-center gap-2 text-2xl font-semibold leading-none tracking-tight", children: [_jsx("span", { className: "[&>svg]:h-5 [&>svg]:w-5", children: icon }), name] }), _jsx("p", { className: "text-sm text-muted-foreground mt-1.5", children: status === "not-configured"
+                                        ? `${name} integration is not configured`
+                                        : description })] }), status === "connected" && statusBadge] }) }), _jsxs("div", { className: "p-6 pt-0", children: [status === "not-configured" && (_jsx("div", { className: "p-4 bg-muted rounded-sm", children: _jsx("p", { className: "text-sm text-muted-foreground", children: notConfiguredMessage }) })), status === "connected" && connectedContent, status === "disconnected" && setupContent] })] }));
+}
+export { ConnectionCallout, ConnectionCard, ConnectionConnectedBadge, ConnectionCopyRow, ConnectionDisconnectAction, ConnectionFooterActions, ConnectionIdentityPanel, ConnectionInstructions, ConnectionLoadingCard, };

package/cloud-ui/components/dashboard/cloud-dashboard-components.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+interface DashboardActionLinkProps {
+    to: string;
+    className?: string;
+    children: ReactNode;
+}
+interface DashboardActionCardsProps {
+    /** null = balance unavailable. */
+    creditBalance: number | null;
+    className?: string;
+    renderLink?: (props: DashboardActionLinkProps) => ReactNode;
+}
+interface AppsEmptyStateProps {
+    /** Override the default app-first messaging if needed. */
+    description?: string;
+    /** Optional CTA. */
+    action?: ReactNode;
+}
+interface DashboardRoutePageWrapperProps {
+    children: ReactNode;
+}
+export declare function DashboardActionCards({ creditBalance, className, renderLink, }: DashboardActionCardsProps): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardActionCardsSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardPageWrapper({ children, }: DashboardRoutePageWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppsPageWrapper({ children }: DashboardRoutePageWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContainersPageWrapper({ children, }: DashboardRoutePageWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElizaAgentsPageWrapper({ children, }: DashboardRoutePageWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppsEmptyState({ description, action }: AppsEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppsSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function ContainersSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function ContainersEmptyState(): import("react/jsx-runtime").JSX.Element;
+export type { AppsEmptyStateProps, DashboardActionCardsProps, DashboardRoutePageWrapperProps, };
+//# sourceMappingURL=cloud-dashboard-components.d.ts.map

package/cloud-ui/components/dashboard/cloud-dashboard-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cloud-dashboard-components.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/dashboard/cloud-dashboard-components.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,UAAU,wBAAwB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,yBAAyB;IACjC,kCAAkC;IAClC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAC7D;AAED,UAAU,mBAAmB;IAC3B,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,8BAA8B;IACtC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsBD,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,SAAS,EACT,UAAiC,GAClC,EAAE,yBAAyB,2CA2F3B;AAED,wBAAgB,4BAA4B,4CAc3C;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,GACT,EAAE,8BAA8B,2CAEhC;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,8BAA8B,2CAE3E;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,GACT,EAAE,8BAA8B,2CAEhC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,GACT,EAAE,8BAA8B,2CAEhC;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CAS1E;AAED,wBAAgB,YAAY,4CAE3B;AAED,wBAAgB,kBAAkB,4CAkBjC;AAED,wBAAgB,oBAAoB,4CA6DnC;AAED,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,8BAA8B,GAC/B,CAAC"}

package/cloud-ui/components/dashboard/cloud-dashboard-components.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRight, BookOpen, Bot, Check, Code, Copy, CreditCard, KeyRound, Rocket, Server, Store, Terminal, Wallet, } from "lucide-react";
+import { useState } from "react";
+import { EmptyState } from "../../../components/ui/empty-state.js";
+import { Skeleton } from "../../../components/ui/skeleton.js";
+import { ListSkeleton } from "../../../components/ui/skeleton-layouts.js";
+import { cn } from "../../lib/utils.js";
+import { BrandButton } from "../brand/brand-button.js";
+import { DashboardTableSkeleton } from "../data-list/dashboard-table-skeleton.js";
+import { DashboardRoutePage } from "../layout/dashboard-route-page.js";
+const ACTION_CARD_SKELETON_IDS = [
+    "agent",
+    "api",
+    "billing",
+    "instances",
+    "apps",
+];
+function DefaultDashboardLink({ to, className, children, }) {
+    return (_jsx("a", { href: to, className: className, children: children }));
+}
+export function DashboardActionCards({ creditBalance, className, renderLink = DefaultDashboardLink, }) {
+    const formattedBalance = creditBalance === null
+        ? "-"
+        : creditBalance >= 1
+            ? `$${creditBalance.toFixed(2)}`
+            : creditBalance > 0
+                ? `$${creditBalance.toFixed(4)}`
+                : "$0.00";
+    const Link = renderLink;
+    return (_jsxs("div", { className: cn("grid gap-3 sm:grid-cols-2 xl:grid-cols-5", className), children: [_jsxs(Link, { to: "/dashboard/my-agents", className: "group relative flex min-h-[148px] flex-col justify-between rounded-sm border border-white/10 bg-[#FF5800] p-5 text-black transition-colors hover:bg-black hover:text-white sm:col-span-2 xl:col-span-1", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx(Rocket, { className: "h-5 w-5" }), _jsx(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-1" })] }), _jsx("h3", { className: "text-base font-semibold", children: "My Agent" })] }), _jsxs("div", { className: "group relative flex min-h-[148px] flex-col justify-between rounded-sm border border-white/10 bg-[#0B35F1] p-5 text-white sm:col-span-2 xl:col-span-1", children: [_jsx(Code, { className: "h-5 w-5" }), _jsxs("div", { children: [_jsx("h3", { className: "text-base font-semibold", children: "API Access" }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-3 text-xs font-medium", children: [_jsxs(Link, { to: "/dashboard/api-keys", className: "inline-flex items-center gap-1.5 hover:text-[#FF5800]", children: [_jsx(KeyRound, { className: "h-3 w-3" }), "Keys"] }), _jsxs(Link, { to: "/docs", className: "inline-flex items-center gap-1.5 hover:text-[#FF5800]", children: [_jsx(BookOpen, { className: "h-3 w-3" }), "Docs"] }), _jsxs(Link, { to: "/dashboard/api-explorer", className: "inline-flex items-center gap-1.5 hover:text-[#FF5800]", children: [_jsx(Bot, { className: "h-3 w-3" }), "Explorer"] })] })] })] }), _jsxs(Link, { to: "/dashboard/billing", className: "group relative flex min-h-[148px] flex-col justify-between rounded-sm border border-white/10 bg-black p-5 text-white transition-colors hover:bg-white/[0.06]", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Wallet, { className: "h-5 w-5" }), _jsx("span", { className: "rounded-sm bg-[#FF5800] px-2 py-0.5 text-xs font-semibold text-black", children: formattedBalance })] }), _jsx("h3", { className: "text-base font-semibold", children: "Billing" })] }), _jsxs(Link, { to: "/dashboard/agents", className: "group relative flex min-h-[148px] flex-col justify-between rounded-sm border border-white/10 bg-black p-5 text-white transition-colors hover:bg-white/[0.06]", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Server, { className: "h-5 w-5" }), _jsx(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-1" })] }), _jsx("h3", { className: "text-base font-semibold", children: "Instances" })] }), _jsxs(Link, { to: "/dashboard/apps", className: "group relative flex min-h-[148px] flex-col justify-between rounded-sm border border-white/10 bg-black p-5 text-white transition-colors hover:bg-white/[0.06]", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Store, { className: "h-5 w-5" }), _jsx(CreditCard, { className: "h-4 w-4" })] }), _jsx("h3", { className: "text-base font-semibold", children: "Apps & Monetization" })] })] }));
+}
+export function DashboardActionCardsSkeleton() {
+    return (_jsx("div", { className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-5", children: ACTION_CARD_SKELETON_IDS.map((id) => (_jsxs("div", { className: "flex min-h-[148px] flex-col justify-between rounded-sm border border-white/10 bg-white/5 p-5", children: [_jsx(Skeleton, { className: "h-5 w-5" }), _jsx(Skeleton, { className: "h-5 w-28" })] }, id))) }));
+}
+export function DashboardPageWrapper({ children, }) {
+    return _jsx(DashboardRoutePage, { title: "Dashboard", children: children });
+}
+export function AppsPageWrapper({ children }) {
+    return _jsx(DashboardRoutePage, { title: "My Apps", children: children });
+}
+export function ContainersPageWrapper({ children, }) {
+    return _jsx(DashboardRoutePage, { title: "Containers", children: children });
+}
+export function ElizaAgentsPageWrapper({ children, }) {
+    return _jsx(DashboardRoutePage, { title: "Instances", children: children });
+}
+export function AppsEmptyState({ description, action }) {
+    return (_jsx(EmptyState, { title: "No apps yet", description: description, variant: "minimal", action: action }));
+}
+export function AppsSkeleton() {
+    return _jsx(ListSkeleton, { rows: 3 });
+}
+export function ContainersSkeleton() {
+    return (_jsx(DashboardTableSkeleton, { columns: [
+            { key: "name", label: "Name", skeletonClassName: "w-32" },
+            { key: "status", label: "Status", skeletonClassName: "h-6 w-20" },
+            { key: "port", label: "Port", skeletonClassName: "w-12" },
+            { key: "instances", label: "Instances", skeletonClassName: "w-8" },
+            { key: "deployed", label: "Deployed", skeletonClassName: "w-24" },
+            {
+                key: "actions",
+                label: "Actions",
+                cellClassName: "text-right",
+                skeletonClassName: "ml-auto h-8 w-20",
+            },
+        ] }));
+}
+export function ContainersEmptyState() {
+    const [copiedIndex, setCopiedIndex] = useState(null);
+    const commands = ["bun i -g elizaos", "elizaos deploy"];
+    const handleCopy = async (text, index) => {
+        await navigator.clipboard.writeText(text);
+        setCopiedIndex(index);
+        setTimeout(() => setCopiedIndex(null), 2000);
+    };
+    return (_jsxs("div", { className: "flex min-h-[400px] flex-col items-center justify-center gap-6 rounded-sm bg-neutral-900 py-12", children: [_jsx("div", { className: "space-y-2 text-center", children: _jsx("h3", { className: "text-xl font-medium text-white", children: "No containers yet" }) }), _jsx("div", { className: "flex w-full max-w-sm flex-col overflow-hidden rounded-sm border border-white/10 bg-black/60", children: commands.map((cmd, index) => (_jsxs("div", { className: cn("group flex items-center gap-3 px-4 py-3", index < commands.length - 1 && "border-b border-white/5"), children: [_jsx("span", { className: "select-none text-neutral-600", children: "$" }), _jsx("code", { className: "flex-1 font-mono text-sm text-neutral-300", children: cmd }), _jsx("button", { type: "button", onClick: () => handleCopy(cmd, index), className: "rounded-sm text-neutral-600 transition-colors hover:text-neutral-300", "aria-label": `Copy ${cmd}`, children: copiedIndex === index ? (_jsx(Check, { className: "h-4 w-4 text-green-500" })) : (_jsx(Copy, { className: "h-4 w-4" })) })] }, cmd))) }), _jsx(BrandButton, { variant: "outline", asChild: true, className: "h-10 border-neutral-700 text-neutral-400 hover:border-neutral-600 hover:text-white", children: _jsxs("a", { href: "https://elizaos.github.io/eliza/docs/cli", target: "_blank", rel: "noopener noreferrer", children: [_jsx(Terminal, { className: "h-4 w-4" }), "CLI Documentation"] }) })] }));
+}

package/cloud-ui/components/dashboard/dashboard-route-error.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Dashboard route error fallback. Used with a React error boundary around
+ * dashboard routes when not using a data router.
+ */
+export declare function DashboardRouteError({ message }: {
+    message: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dashboard-route-error.d.ts.map

package/cloud-ui/components/dashboard/dashboard-route-error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-route-error.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/dashboard/dashboard-route-error.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,2CAwCnE"}

package/cloud-ui/components/dashboard/dashboard-route-error.helpers.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Non-component helper for the dashboard route error surface. Kept out of
+ * dashboard-route-error.tsx so that file exports only the React component and
+ * stays React Fast Refresh-compatible.
+ */
+export declare function formatDashboardRouteErrorMessage(error: Error | string | null | undefined): string;
+//# sourceMappingURL=dashboard-route-error.helpers.d.ts.map

package/cloud-ui/components/dashboard/dashboard-route-error.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-route-error.helpers.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/dashboard/dashboard-route-error.helpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GACvC,MAAM,CAIR"}

package/cloud-ui/components/dashboard/dashboard-route-error.helpers.js

@@ -0,0 +1,12 @@
+/**
+ * Non-component helper for the dashboard route error surface. Kept out of
+ * dashboard-route-error.tsx so that file exports only the React component and
+ * stays React Fast Refresh-compatible.
+ */
+export function formatDashboardRouteErrorMessage(error) {
+    if (error instanceof Error)
+        return error.message;
+    if (typeof error === "string")
+        return error;
+    return "An unexpected error occurred while loading this page.";
+}

package/cloud-ui/components/dashboard/dashboard-route-error.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+/**
+ * Dashboard route error fallback. Used with a React error boundary around
+ * dashboard routes when not using a data router.
+ */
+export function DashboardRouteError({ message }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center min-h-[400px] gap-4 text-white", children: [_jsx("div", { className: "flex items-center justify-center w-16 h-16 rounded-sm border border-red-500/25 bg-red-500/10", children: _jsx("svg", { className: "h-8 w-8 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" }) }) }), _jsxs("div", { className: "text-center space-y-2", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Something went wrong" }), _jsx("p", { className: "text-sm text-white/50 max-w-md", children: message })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx("button", { type: "button", onClick: () => window.location.reload(), className: "rounded-sm px-4 py-2 text-sm border border-accent/40 bg-accent/10 text-accent hover:bg-accent/20 transition-colors", children: "Try again" }), _jsx(Link, { to: "/dashboard/agents", className: "rounded-sm px-4 py-2 text-sm border border-white/10 bg-white/5 text-white/70 hover:bg-white/10 transition-colors", children: "Go to Dashboard" })] })] }));
+}

package/cloud-ui/components/dashboard/route-placeholders.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared placeholders + skeletons used across dashboard routes (SPA).
+ */
+/**
+ * Generic dashboard page skeleton. Matches the rough silhouette of most
+ * dashboard pages (page header + a row of stat cards + a list/table) so the
+ * Suspense fallback during route-chunk loads doesn't visually flash.
+ */
+export declare function DashboardLoadingState({ label }: {
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardErrorState({ message }: {
+    message: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=route-placeholders.d.ts.map

package/cloud-ui/components/dashboard/route-placeholders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-placeholders.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/dashboard/route-placeholders.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAQH;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAyBlE;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,2CASnE"}

package/cloud-ui/components/dashboard/route-placeholders.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shared placeholders + skeletons used across dashboard routes (SPA).
+ */
+import { Skeleton } from "../../../components/ui/skeleton.js";
+function SkeletonBlock({ className }) {
+    return _jsx(Skeleton, { className: className });
+}
+/**
+ * Generic dashboard page skeleton. Matches the rough silhouette of most
+ * dashboard pages (page header + a row of stat cards + a list/table) so the
+ * Suspense fallback during route-chunk loads doesn't visually flash.
+ */
+export function DashboardLoadingState({ label }) {
+    return (_jsxs("div", { className: "space-y-6", "aria-busy": "true", "aria-label": label ?? "Loading", role: "status", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(SkeletonBlock, { className: "h-7 w-56" }), _jsx(SkeletonBlock, { className: "h-4 w-80 max-w-full" })] }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4", children: [_jsx(SkeletonBlock, { className: "h-24 w-full" }), _jsx(SkeletonBlock, { className: "h-24 w-full" }), _jsx(SkeletonBlock, { className: "h-24 w-full" }), _jsx(SkeletonBlock, { className: "h-24 w-full" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(SkeletonBlock, { className: "h-12 w-full" }), _jsx(SkeletonBlock, { className: "h-12 w-full" }), _jsx(SkeletonBlock, { className: "h-12 w-full" })] })] }));
+}
+export function DashboardErrorState({ message }) {
+    return (_jsxs("div", { className: "mx-auto max-w-prose space-y-3 p-12 text-sm text-red-300", children: [_jsx("h1", { className: "text-lg font-semibold text-red-100", children: "Something went wrong" }), _jsx("p", { children: message })] }));
+}

package/cloud-ui/components/data-list/api-keys-summary.d.ts

@@ -0,0 +1,12 @@
+export interface ApiKeysSummaryData {
+    totalKeys: number;
+    activeKeys: number;
+    monthlyUsage: number;
+    rateLimit: number;
+    lastGeneratedAt?: string | null;
+}
+export interface ApiKeysSummaryProps {
+    summary: ApiKeysSummaryData;
+}
+export declare function ApiKeysSummary({ summary }: ApiKeysSummaryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=api-keys-summary.d.ts.map

package/cloud-ui/components/data-list/api-keys-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-keys-summary.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/data-list/api-keys-summary.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,kBAAkB,CAAC;CAC7B;AAOD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CA4B9D"}

package/cloud-ui/components/data-list/api-keys-summary.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CalendarClock, KeyRound, ShieldCheck, Signal } from "lucide-react";
+import { KeyMetricsGrid } from "../brand/key-metrics-grid.js";
+const numberFormatter = new Intl.NumberFormat("en-US", {
+    notation: "compact",
+    maximumFractionDigits: 1,
+});
+export function ApiKeysSummary({ summary }) {
+    const metrics = [
+        {
+            label: "Total keys",
+            value: numberFormatter.format(summary.totalKeys),
+            icon: KeyRound,
+        },
+        {
+            label: "Active keys",
+            value: numberFormatter.format(summary.activeKeys),
+            icon: ShieldCheck,
+        },
+        {
+            label: "Monthly usage",
+            value: numberFormatter.format(summary.monthlyUsage),
+            helper: `Requests this month - ${summary.rateLimit.toLocaleString()} rpm`,
+            icon: Signal,
+        },
+        {
+            label: "Last generated",
+            value: summary.lastGeneratedAt
+                ? new Date(summary.lastGeneratedAt).toLocaleDateString()
+                : "Not yet",
+            icon: CalendarClock,
+        },
+    ];
+    return _jsx(KeyMetricsGrid, { metrics: metrics });
+}

package/cloud-ui/components/data-list/api-keys-table.d.ts

@@ -0,0 +1,22 @@
+export type ApiKeyStatus = "active" | "inactive" | "expired";
+export interface ApiKeyDisplay {
+    id: string;
+    name: string;
+    description?: string | null;
+    keyPrefix: string;
+    status: ApiKeyStatus;
+    lastUsedAt?: string | null;
+    createdAt: string;
+    usageCount: number;
+    rateLimit: number;
+    expiresAt?: string | null;
+}
+export interface ApiKeysTableProps {
+    keys: ApiKeyDisplay[];
+    onCopyKey?: (id: string) => void;
+    onDisableKey?: (id: string) => void;
+    onDeleteKey?: (id: string) => void;
+    onRegenerateKey?: (id: string) => void;
+}
+export declare function ApiKeysTable({ keys, onCopyKey, onDisableKey, onDeleteKey, onRegenerateKey, }: ApiKeysTableProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=api-keys-table.d.ts.map

package/cloud-ui/components/data-list/api-keys-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-keys-table.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/data-list/api-keys-table.tsx"],"names":[],"mappings":"AAuBA,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AA6ED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,EAAE,iBAAiB,kDAuLnB"}

package/cloud-ui/components/data-list/api-keys-table.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CalendarClock, Copy, RefreshCw, ShieldOff, Trash2, } from "lucide-react";
+import { StatusBadge } from "../../../components/ui/status-badge.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../../../components/ui/table.js";
+import { BrandButton } from "../brand/brand-button.js";
+import { DashboardDataListDesktop, DashboardDataListMobile, } from "./dashboard-data-list.js";
+import { ListActionMenu } from "./list-action-menu.js";
+function getStatusVariant(status) {
+    switch (status) {
+        case "active":
+            return "success";
+        case "expired":
+            return "warning";
+        default:
+            return "neutral";
+    }
+}
+function getStatusLabel(status) {
+    switch (status) {
+        case "active":
+            return "Active";
+        case "expired":
+            return "Expired";
+        default:
+            return "Inactive";
+    }
+}
+function formatDate(value) {
+    if (!value)
+        return "-";
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return "-";
+    return date.toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+}
+function renderActions(key, handlers, triggerClassName) {
+    return (_jsx(ListActionMenu, { label: "Manage key", triggerClassName: triggerClassName, items: [
+            {
+                label: "Copy key",
+                icon: Copy,
+                onSelect: () => handlers.onCopyKey?.(key.id),
+            },
+            {
+                label: "Regenerate key",
+                icon: RefreshCw,
+                onSelect: () => handlers.onRegenerateKey?.(key.id),
+            },
+            { type: "separator" },
+            {
+                label: key.status === "active" ? "Disable key" : "Enable key",
+                icon: ShieldOff,
+                onSelect: () => handlers.onDisableKey?.(key.id),
+            },
+            {
+                label: "Delete key",
+                icon: Trash2,
+                destructive: true,
+                onSelect: () => handlers.onDeleteKey?.(key.id),
+            },
+        ] }));
+}
+export function ApiKeysTable({ keys, onCopyKey, onDisableKey, onDeleteKey, onRegenerateKey, }) {
+    if (keys.length === 0) {
+        return null;
+    }
+    const handlers = {
+        onCopyKey,
+        onDisableKey,
+        onDeleteKey,
+        onRegenerateKey,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DashboardDataListMobile, { className: "space-y-3", children: keys.map((key) => (_jsxs("div", { className: "space-y-3 rounded-sm border border-white/10 bg-black/40 p-4", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate font-semibold text-white", children: key.name }), _jsx(StatusBadge, { status: getStatusVariant(key.status), label: getStatusLabel(key.status) })] }), key.description ? (_jsx("p", { className: "line-clamp-2 text-xs text-white/60", children: key.description })) : null] }), renderActions(key, handlers)] }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 text-xs text-white/60", children: [_jsx("span", { className: "rounded-sm border border-white/10 bg-black/60 px-1.5 py-0.5 font-mono text-xs text-white", children: `${key.keyPrefix}.......` }), _jsxs(BrandButton, { variant: "ghost", size: "sm", className: "h-8 px-2", onClick: () => onCopyKey?.(key.id), children: [_jsx(Copy, { className: "mr-1 h-3.5 w-3.5" }), "Copy"] }), _jsxs(BrandButton, { variant: "ghost", size: "sm", className: "h-8 px-2", onClick: () => onRegenerateKey?.(key.id), children: [_jsx(RefreshCw, { className: "mr-1 h-3.5 w-3.5" }), "Regenerate"] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3 border-t border-white/10 pt-3 text-xs", children: [_jsxs("div", { children: [_jsx("p", { className: "text-white/40", children: "Usage" }), _jsxs("p", { className: "mt-1 font-medium text-white", children: [key.usageCount.toLocaleString(), " requests"] }), _jsxs("p", { className: "mt-0.5 text-white/74", children: [key.rateLimit.toLocaleString(), " / min"] })] }), _jsxs("div", { children: [_jsx("p", { className: "text-white/40", children: "Timeline" }), _jsxs("p", { className: "mt-1 text-white/60", children: ["Created ", formatDate(key.createdAt)] }), _jsxs("p", { className: "mt-0.5 text-white/60", children: ["Last used ", formatDate(key.lastUsedAt)] })] })] })] }, key.id))) }), _jsx(DashboardDataListDesktop, { className: "border-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Key" }), _jsx(TableHead, { children: "Usage" }), _jsx(TableHead, { children: "Timeline" }), _jsx(TableHead, { className: "text-right", children: "Actions" })] }) }), _jsx(TableBody, { children: keys.map((key) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-semibold text-white", children: key.name }), _jsx(StatusBadge, { status: getStatusVariant(key.status), label: getStatusLabel(key.status) })] }), key.description ? (_jsx("p", { className: "text-xs text-white/60", children: key.description })) : null, _jsxs("div", { className: "flex items-center gap-2 text-xs text-white/60", children: [_jsx("span", { className: "rounded-sm border border-white/10 bg-black/60 px-1.5 py-0.5 font-mono text-xs text-white", children: `${key.keyPrefix}.......` }), _jsxs(BrandButton, { variant: "ghost", size: "sm", className: "h-8 px-2", onClick: () => onCopyKey?.(key.id), children: [_jsx(Copy, { className: "mr-1 h-3.5 w-3.5" }), "Copy"] }), _jsxs(BrandButton, { variant: "ghost", size: "sm", className: "h-8 px-2", onClick: () => onRegenerateKey?.(key.id), children: [_jsx(RefreshCw, { className: "mr-1 h-3.5 w-3.5" }), "Regenerate"] })] })] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("span", { className: "font-medium text-white", children: [key.usageCount.toLocaleString(), " requests"] }), _jsxs("p", { className: "text-xs text-white/74", children: ["Rate limit ", key.rateLimit.toLocaleString(), " / min"] })] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "flex flex-col gap-2 text-xs text-white/60", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CalendarClock, { className: "h-3.5 w-3.5 text-[#FF5800]" }), _jsxs("span", { children: ["Created ", formatDate(key.createdAt)] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CalendarClock, { className: "h-3.5 w-3.5 text-[#FF5800]" }), _jsxs("span", { children: ["Last used ", formatDate(key.lastUsedAt)] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CalendarClock, { className: "h-3.5 w-3.5 text-[#FF5800]" }), _jsx("span", { children: key.expiresAt
+                                                                ? `Expires ${formatDate(key.expiresAt)}`
+                                                                : "No expiry" })] })] }) }), _jsx(TableCell, { className: "text-right", children: renderActions(key, handlers, "h-9 w-9") })] }, key.id))) })] }) })] }));
+}

package/cloud-ui/components/data-list/apps-list-view.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export interface AppsListItem {
+    id: string;
+    name: string;
+    app_url: string;
+    website_url?: string | null;
+    is_active: boolean;
+    affiliate_code?: string | null;
+    total_users: number;
+    total_requests: number;
+    updated_at: string | Date;
+}
+export interface AppsListLinkRenderProps {
+    app: AppsListItem;
+    className?: string;
+    children: ReactNode;
+}
+export interface AppsListViewProps {
+    apps: AppsListItem[];
+    deletingId?: string | null;
+    renderAppLink: (props: AppsListLinkRenderProps) => ReactNode;
+    onCopyUrl?: (app: AppsListItem) => void;
+    onDeleteApp?: (app: AppsListItem) => void;
+}
+export declare function AppsListView({ apps, deletingId, renderAppLink, onCopyUrl, onDeleteApp, }: AppsListViewProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=apps-list-view.d.ts.map