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

package/cloud/analytics/_components/model-breakdown.js

@@ -0,0 +1,69 @@
+/**
+ * Model breakdown: cost / usage per AI model, expandable table.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/analytics/_components/model-breakdown.tsx`.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useState } from "react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, } from "../../../cloud-ui/index.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+import { toSuccessRatePercent } from "../lib/format.js";
+const numberFormatter = new Intl.NumberFormat();
+const formatCurrency = (amount) => {
+    return `${amount.toFixed(2)}`;
+};
+const formatTokens = (tokens) => {
+    if (tokens >= 1000000)
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    if (tokens >= 1000)
+        return `${(tokens / 1000).toFixed(1)}K`;
+    return tokens.toString();
+};
+export function ModelBreakdown({ models }) {
+    const t = useCloudT();
+    const [expanded, setExpanded] = useState(false);
+    const displayLimit = 5;
+    const displayedModels = expanded ? models : models.slice(0, displayLimit);
+    const hasMore = models.length > displayLimit;
+    if (models.length === 0) {
+        return (_jsx(Card, { className: "border-border/70 bg-background/60 shadow-sm", children: _jsxs(CardHeader, { className: "p-6 pb-5", children: [_jsx(CardTitle, { className: "text-base font-semibold", children: t("cloud.analytics.modelBreakdown.title", {
+                            defaultValue: "Model breakdown",
+                        }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: t("cloud.analytics.modelBreakdown.noData", {
+                            defaultValue: "No model data available for the selected period.",
+                        }) })] }) }));
+    }
+    const totalCost = models.reduce((sum, m) => sum + m.totalCost, 0);
+    const totalRequests = models.reduce((sum, m) => sum + m.totalRequests, 0);
+    return (_jsxs(Card, { className: "border-border/70 bg-background/60 shadow-sm", children: [_jsxs(CardHeader, { className: "flex flex-col gap-3 p-6 pb-5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(CardTitle, { className: "text-base font-semibold", children: t("cloud.analytics.modelBreakdown.title", {
+                                    defaultValue: "Model breakdown",
+                                }) }), _jsx(Badge, { variant: "outline", className: "rounded-full text-xs", children: t("cloud.analytics.modelBreakdown.count", {
+                                    defaultValue: "{{n}} model{{plural}}",
+                                    n: models.length,
+                                    plural: models.length !== 1 ? "s" : "",
+                                }) })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: t("cloud.analytics.modelBreakdown.subtitle", {
+                            defaultValue: "Detailed usage statistics and cost analysis per model with efficiency metrics.",
+                        }) })] }), _jsx(CardContent, { className: "border-t border-border/60 p-6", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border/50", children: [_jsx("th", { className: "pb-3 text-left font-medium text-muted-foreground", children: t("cloud.analytics.modelBreakdown.col.model", {
+                                                        defaultValue: "Model",
+                                                    }) }), _jsx("th", { className: "pb-3 text-left font-medium text-muted-foreground", children: t("cloud.analytics.modelBreakdown.col.provider", {
+                                                        defaultValue: "Provider",
+                                                    }) }), _jsx("th", { className: "pb-3 text-right font-medium text-muted-foreground", children: t("cloud.analytics.modelBreakdown.col.requests", {
+                                                        defaultValue: "Requests",
+                                                    }) }), _jsx("th", { className: "pb-3 text-right font-medium text-muted-foreground", children: t("cloud.analytics.modelBreakdown.col.cost", {
+                                                        defaultValue: "Cost",
+                                                    }) }), _jsx("th", { className: "pb-3 text-right font-medium text-muted-foreground", children: t("cloud.analytics.modelBreakdown.col.tokens", {
+                                                        defaultValue: "Tokens",
+                                                    }) }), _jsx("th", { className: "pb-3 text-right font-medium text-muted-foreground", children: t("cloud.analytics.modelBreakdown.col.success", {
+                                                        defaultValue: "Success",
+                                                    }) })] }) }), _jsx("tbody", { children: displayedModels.map((model) => (_jsxs("tr", { className: "border-b border-border/30 last:border-0", children: [_jsx("td", { className: "py-3 font-medium text-foreground", children: model.model }), _jsx("td", { className: "py-3 text-muted-foreground", children: model.provider }), _jsx("td", { className: "py-3 text-right tabular-nums text-foreground", children: numberFormatter.format(model.totalRequests) }), _jsxs("td", { className: "py-3 text-right tabular-nums text-foreground", children: ["$", formatCurrency(model.totalCost)] }), _jsx("td", { className: "py-3 text-right tabular-nums text-muted-foreground", children: formatTokens(model.totalTokens) }), _jsx("td", { className: "py-3 text-right tabular-nums", children: _jsxs("span", { className: "text-green-600 dark:text-green-400", children: [toSuccessRatePercent(model.successRate).toFixed(1), "%"] }) })] }, `${model.model}-${model.provider}`))) })] }) }), hasMore && (_jsx("div", { className: "flex justify-center pt-2", children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => setExpanded(!expanded), className: "gap-2", children: expanded ? (_jsxs(_Fragment, { children: [_jsx(ChevronUp, { className: "h-4 w-4" }), t("cloud.analytics.modelBreakdown.showLess", {
+                                            defaultValue: "Show less",
+                                        })] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDown, { className: "h-4 w-4" }), t("cloud.analytics.modelBreakdown.showMore", {
+                                            defaultValue: "Show {{n}} more",
+                                            n: models.length - displayLimit,
+                                        })] })) }) })), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-sm border border-border/60 bg-muted/30 p-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t("cloud.analytics.modelBreakdown.totalRequests", {
+                                                defaultValue: "Total requests",
+                                            }) }), _jsx("p", { className: "text-lg font-semibold text-foreground", children: numberFormatter.format(totalRequests) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t("cloud.analytics.modelBreakdown.totalCost", {
+                                                defaultValue: "Total cost",
+                                            }) }), _jsxs("p", { className: "text-lg font-semibold text-foreground", children: ["$", formatCurrency(totalCost)] })] })] })] }) })] }));
+}

package/cloud/analytics/_components/projections-chart.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Projections chart: historical + projected cost trend with low-balance /
+ * high-burn alerts.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/analytics/_components/projections-chart.tsx`.
+ */
+import type { ProjectionsDataDto } from "@elizaos/cloud-shared/types";
+interface ProjectionsChartProps {
+    data: ProjectionsDataDto;
+}
+export declare function ProjectionsChart({ data }: ProjectionsChartProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=projections-chart.d.ts.map

package/cloud/analytics/_components/projections-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"projections-chart.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/analytics/_components/projections-chart.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AA6BtE,UAAU,qBAAqB;IAC7B,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,2CAqT/D"}

package/cloud/analytics/_components/projections-chart.js

@@ -0,0 +1,123 @@
+/**
+ * Projections chart: historical + projected cost trend with low-balance /
+ * high-burn alerts.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/analytics/_components/projections-chart.tsx`.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatUsd as formatCurrency } from "@elizaos/shared/utils/format";
+import { format } from "date-fns";
+import { Activity, AlertTriangle, Info, TrendingUp } from "lucide-react";
+import { useMemo } from "react";
+import { Area, AreaChart, CartesianGrid, Line, ReferenceLine, XAxis, YAxis, } from "recharts";
+import { Alert, AlertDescription, AlertTitle, Badge, Card, CardContent, CardHeader, CardTitle, ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../../cloud-ui/index.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+export function ProjectionsChart({ data }) {
+    const t = useCloudT();
+    const { projections, alerts, creditBalance } = data;
+    const chartConfig = {
+        historical: {
+            label: t("cloud.projectionsChart.historical", {
+                defaultValue: "Historical",
+            }),
+            color: "#FF5800",
+        },
+        projected: {
+            label: t("cloud.projectionsChart.projected", {
+                defaultValue: "Projected",
+            }),
+            color: "#F59E0B",
+        },
+    };
+    const chartData = useMemo(() => {
+        return projections.map((point) => ({
+            date: format(new Date(point.timestamp), "MMM d"),
+            fullDate: format(new Date(point.timestamp), "MMM d, yyyy"),
+            cost: point.totalCost,
+            requests: point.totalRequests,
+            isProjected: point.isProjected,
+            confidence: point.confidence,
+        }));
+    }, [projections]);
+    const todayIndex = chartData.findIndex((d) => !d.isProjected);
+    const lastHistoricalDate = todayIndex >= 0
+        ? chartData[chartData.length - todayIndex - 1]?.fullDate
+        : "";
+    const getAlertIcon = (type) => {
+        switch (type) {
+            case "danger":
+                return AlertTriangle;
+            case "warning":
+                return TrendingUp;
+            case "info":
+                return Info;
+        }
+    };
+    const getAlertVariant = (type) => {
+        switch (type) {
+            case "danger":
+                return "destructive";
+            case "warning":
+                return "default";
+            case "info":
+                return "default";
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "border-border/70 bg-background/60 shadow-sm", children: [_jsx(CardHeader, { className: "flex flex-col gap-3 p-6 pb-5", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(CardTitle, { className: "text-base font-semibold", children: t("cloud.projectionsChart.title", {
+                                        defaultValue: "Usage projections",
+                                    }) }), _jsx(Badge, { variant: "outline", className: "rounded-full text-xs", title: t("cloud.projectionsChart.predictiveAnalytics", {
+                                        defaultValue: "Predictive analytics",
+                                    }), children: _jsx(Activity, { className: "mr-1 h-3 w-3" }) })] }) }), _jsx(CardContent, { className: "border-t border-border/60 p-6", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "rounded-sm border border-border/60 bg-muted/30 p-4", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("cloud.projectionsChart.balance", {
+                                                        defaultValue: "Balance",
+                                                    }) }), _jsx("p", { className: "mt-1 text-lg font-semibold text-foreground", children: formatCurrency(creditBalance) })] }), _jsxs("div", { className: "rounded-sm border border-border/60 bg-muted/30 p-4", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("cloud.projectionsChart.historicalPoints", {
+                                                        defaultValue: "Historical points",
+                                                    }) }), _jsx("p", { className: "mt-1 text-lg font-semibold text-foreground", children: chartData.filter((d) => !d.isProjected).length })] }), _jsxs("div", { className: "rounded-sm border border-border/60 bg-muted/30 p-4", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("cloud.projectionsChart.projectedPoints", {
+                                                        defaultValue: "Projected points",
+                                                    }) }), _jsx("p", { className: "mt-1 text-lg font-semibold text-foreground", children: chartData.filter((d) => d.isProjected).length })] })] }), _jsx(ChartContainer, { config: chartConfig, className: "h-[340px] w-full rounded-sm border border-border/70 bg-background/70 p-5 sm:p-6", children: _jsxs(AreaChart, { data: chartData, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "fill-historical", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: chartConfig.historical.color, stopOpacity: 0.3 }), _jsx("stop", { offset: "95%", stopColor: chartConfig.historical.color, stopOpacity: 0.05 })] }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), _jsx(XAxis, { dataKey: "date", tickLine: false, axisLine: false, minTickGap: 24 }), _jsx(YAxis, { tickLine: false, axisLine: false, width: 70, tickFormatter: (value) => {
+                                                    if (value >= 1000) {
+                                                        return `$${(value / 1000).toFixed(1)}k`;
+                                                    }
+                                                    return `$${value.toFixed(0)}`;
+                                                } }), _jsx(ChartTooltip, { cursor: { strokeDasharray: "4 4" }, content: _jsx(ChartTooltipContent, { hideIndicator: true, formatter: (value) => {
+                                                        const numeric = Number(value);
+                                                        return formatCurrency(numeric);
+                                                    }, labelFormatter: (_, payload) => {
+                                                        const source = payload?.[0];
+                                                        if (source &&
+                                                            typeof source === "object" &&
+                                                            "payload" in source) {
+                                                            const inner = source;
+                                                            const fullDate = inner.payload?.fullDate ?? "";
+                                                            const isProjected = inner.payload?.isProjected;
+                                                            const confidence = inner.payload?.confidence;
+                                                            if (isProjected && confidence) {
+                                                                return t("cloud.projectionsChart.confidenceLabel", {
+                                                                    date: fullDate,
+                                                                    confidence,
+                                                                    defaultValue: "{{date}} ({{confidence}}% confidence)",
+                                                                });
+                                                            }
+                                                            return fullDate;
+                                                        }
+                                                        return "";
+                                                    } }) }), _jsx(Area, { type: "monotone", dataKey: "cost", stroke: chartConfig.historical.color, fill: "url(#fill-historical)", strokeWidth: 2, dot: false, name: t("cloud.projectionsChart.cost", {
+                                                    defaultValue: "Cost",
+                                                }) }), _jsx(Line, { type: "monotone", dataKey: "cost", stroke: chartConfig.projected.color, strokeWidth: 2, strokeDasharray: "5 5", dot: false, connectNulls: false }), lastHistoricalDate && (_jsx(ReferenceLine, { x: lastHistoricalDate, stroke: "#6B7280", strokeDasharray: "2 2", label: {
+                                                    value: t("cloud.projectionsChart.today", {
+                                                        defaultValue: "Today",
+                                                    }),
+                                                    position: "top",
+                                                } }))] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-3 w-3 rounded-full", style: { backgroundColor: chartConfig.historical.color } }), _jsx("span", { className: "text-muted-foreground", children: t("cloud.projectionsChart.historicalData", {
+                                                        defaultValue: "Historical data",
+                                                    }) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-3 w-3 rounded-full opacity-70", style: { backgroundColor: chartConfig.projected.color } }), _jsx("span", { className: "text-muted-foreground", children: t("cloud.projectionsChart.projectedVariance", {
+                                                        defaultValue: "Projected (with variance)",
+                                                    }) })] })] })] }) })] }), alerts.length > 0 && (_jsxs(Card, { className: "border-border/70 bg-background/60 shadow-sm", children: [_jsx(CardHeader, { className: "p-6 pb-5", children: _jsx(CardTitle, { className: "text-base font-semibold", children: t("cloud.projectionsChart.projectionAlerts", {
+                                defaultValue: "Projection alerts",
+                            }) }) }), _jsx(CardContent, { className: "border-t border-border/60 p-6", children: _jsx("div", { className: "space-y-3", children: alerts.map((alert, index) => {
+                                const Icon = getAlertIcon(alert.type);
+                                const severity = alert.severity ??
+                                    (alert.type === "danger" ? "critical" : alert.type);
+                                return (_jsxs(Alert, { "data-alert-event-id": alert.eventId, "data-alert-severity": severity, variant: getAlertVariant(alert.type), children: [_jsx(Icon, { className: "h-4 w-4" }), _jsx(AlertTitle, { children: alert.title }), _jsxs(AlertDescription, { className: "mt-2", children: [alert.message, alert.projectedValue !== undefined && (_jsxs("span", { className: "ml-2 font-medium", children: ["(", formatCurrency(alert.projectedValue), ")"] }))] })] }, alert.eventId ?? index));
+                            }) }) })] }))] }));
+}

package/cloud/analytics/_components/provider-breakdown.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Provider breakdown: cost distribution per AI provider with progress bars.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/analytics/_components/provider-breakdown.tsx`.
+ */
+import type { EnhancedAnalyticsDataDto } from "@elizaos/cloud-shared/types";
+interface ProviderBreakdownProps {
+    providers: EnhancedAnalyticsDataDto["providerBreakdown"];
+}
+export declare function ProviderBreakdown({ providers }: ProviderBreakdownProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=provider-breakdown.d.ts.map

package/cloud/analytics/_components/provider-breakdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-breakdown.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/analytics/_components/provider-breakdown.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAY5E,UAAU,sBAAsB;IAC9B,SAAS,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;CAC1D;AAQD,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAyHtE"}

package/cloud/analytics/_components/provider-breakdown.js

@@ -0,0 +1,48 @@
+/**
+ * Provider breakdown: cost distribution per AI provider with progress bars.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/analytics/_components/provider-breakdown.tsx`.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Card, CardContent, CardHeader, CardTitle, Progress, } from "../../../cloud-ui/index.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+import { toSuccessRatePercent } from "../lib/format.js";
+const numberFormatter = new Intl.NumberFormat();
+const formatCurrency = (amount) => {
+    return `${amount.toFixed(2)}`;
+};
+export function ProviderBreakdown({ providers }) {
+    const t = useCloudT();
+    if (providers.length === 0) {
+        return (_jsx(Card, { className: "border-border/70 bg-background/60 shadow-sm", children: _jsxs(CardHeader, { className: "p-6 pb-5", children: [_jsx(CardTitle, { className: "text-base font-semibold", children: t("cloud.analytics.providerBreakdown.title", {
+                            defaultValue: "Provider breakdown",
+                        }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: t("cloud.analytics.providerBreakdown.noData", {
+                            defaultValue: "No provider data available for the selected period.",
+                        }) })] }) }));
+    }
+    const totalCost = providers.reduce((sum, p) => sum + p.totalCost, 0);
+    return (_jsxs(Card, { className: "border-border/70 bg-background/60 shadow-sm", children: [_jsxs(CardHeader, { className: "flex flex-col gap-3 p-6 pb-5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(CardTitle, { className: "text-base font-semibold", children: t("cloud.analytics.providerBreakdown.title", {
+                                    defaultValue: "Provider breakdown",
+                                }) }), _jsx(Badge, { variant: "outline", className: "rounded-full text-xs", children: t("cloud.analytics.providerBreakdown.count", {
+                                    defaultValue: "{{n}} provider{{plural}}",
+                                    n: providers.length,
+                                    plural: providers.length !== 1 ? "s" : "",
+                                }) })] }), _jsx("p", { className: "text-sm text-muted-foreground", children: t("cloud.analytics.providerBreakdown.subtitle", {
+                            defaultValue: "Usage distribution across AI providers with cost allocation and success metrics.",
+                        }) })] }), _jsxs(CardContent, { className: "border-t border-border/60 p-6", children: [_jsx("div", { className: "space-y-6", children: providers.map((provider, index) => (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "flex items-start justify-between gap-4", children: _jsxs("div", { className: "flex-1 space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-foreground", children: provider.provider }), _jsxs(Badge, { variant: "outline", className: "rounded-full bg-background/80 text-xs", children: [provider.percentage.toFixed(1), "%"] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: [_jsx("span", { children: t("cloud.analytics.providerBreakdown.requestsCount", {
+                                                            defaultValue: "{{n}} requests",
+                                                            n: numberFormatter.format(provider.totalRequests),
+                                                        }) }), _jsx("span", { children: t("cloud.analytics.providerBreakdown.spent", {
+                                                            defaultValue: "$" + "{{c}} spent",
+                                                            c: formatCurrency(provider.totalCost),
+                                                        }) }), _jsx("span", { children: t("cloud.analytics.providerBreakdown.tokensCount", {
+                                                            defaultValue: "{{n}} tokens",
+                                                            n: numberFormatter.format(provider.totalTokens),
+                                                        }) }), _jsx("span", { className: "text-green-600 dark:text-green-400", children: t("cloud.analytics.providerBreakdown.successPct", {
+                                                            defaultValue: "{{p}}% success",
+                                                            p: toSuccessRatePercent(provider.successRate).toFixed(1),
+                                                        }) })] })] }) }), _jsx(Progress, { value: provider.percentage, className: "h-2" }), index < providers.length - 1 && (_jsx("div", { className: "border-b border-border/50" }))] }, provider.provider))) }), _jsx("div", { className: "mt-6 rounded-sm border border-border/60 bg-muted/30 p-4", children: _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "font-medium text-muted-foreground", children: t("cloud.analytics.providerBreakdown.totalAcross", {
+                                        defaultValue: "Total across all providers",
+                                    }) }), _jsxs("span", { className: "font-semibold text-foreground", children: ["$", formatCurrency(totalCost)] })] }) })] })] }));
+}

package/cloud/analytics/_components/usage-chart.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Usage chart: time-series analytics with a toggleable focus metric
+ * (requests / cost / success rate).
+ *
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/analytics/_components/usage-chart.tsx`.
+ */
+interface UsageChartProps {
+    data: Array<{
+        timestamp: Date | string;
+        totalRequests: number;
+        totalCost: number;
+        successRatePercent: number;
+    }>;
+    granularity: "hour" | "day" | "week" | "month";
+}
+export declare function UsageChart({ data, granularity }: UsageChartProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=usage-chart.d.ts.map

package/cloud/analytics/_components/usage-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usage-chart.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/analytics/_components/usage-chart.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAoBH,UAAU,eAAe;IACvB,IAAI,EAAE,KAAK,CAAC;QACV,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;QACzB,aAAa,EAAE,MAAM,CAAC;QACtB,SAAS,EAAE,MAAM,CAAC;QAClB,kBAAkB,EAAE,MAAM,CAAC;KAC5B,CAAC,CAAC;IACH,WAAW,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;CAChD;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,eAAe,2CAkNhE"}

package/cloud/analytics/_components/usage-chart.js

@@ -0,0 +1,117 @@
+/**
+ * Usage chart: time-series analytics with a toggleable focus metric
+ * (requests / cost / success rate).
+ *
+ * Ported from `@elizaos/cloud-frontend/src/dashboard/analytics/_components/usage-chart.tsx`.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatUsd } from "@elizaos/shared/utils/format";
+import { format } from "date-fns";
+import { useCallback, useMemo, useState } from "react";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { Badge, Button, ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../../cloud-ui/index.js";
+import { cn } from "../../../lib/utils.js";
+import { useCloudT } from "../../shell/CloudI18nProvider.js";
+export function UsageChart({ data, granularity }) {
+    const t = useCloudT();
+    const chartConfig = {
+        // Brand palette: orange + black + white + green (success). No blue,
+        // no indigo. Each metric gets a distinct hue but all stay on-palette.
+        requests: {
+            label: t("cloud.analytics.usageChart.requests", {
+                defaultValue: "Requests",
+            }),
+            color: "#FF5800",
+        },
+        cost: {
+            label: t("cloud.analytics.usageChart.costUsd", {
+                defaultValue: "Cost (USD)",
+            }),
+            color: "#22C55E",
+        },
+        successRate: {
+            label: t("cloud.analytics.usageChart.successRatePct", {
+                defaultValue: "Success rate (%)",
+            }),
+            color: "#FBBF24",
+        },
+    };
+    const [activeMetric, setActiveMetric] = useState("requests");
+    const formatDate = useCallback((date) => {
+        const formatMap = {
+            hour: "MMM d, HH:mm",
+            day: "MMM d",
+            week: "MMM d",
+            month: "MMM yyyy",
+        };
+        return format(date, formatMap[granularity]);
+    }, [granularity]);
+    const detailedDate = useCallback((date) => format(date, "MMM d, yyyy · HH:mm"), []);
+    const chartData = useMemo(() => data.map((point) => {
+        const timestamp = new Date(point.timestamp);
+        return {
+            timestamp,
+            label: formatDate(timestamp),
+            fullLabel: detailedDate(timestamp),
+            requests: point.totalRequests,
+            cost: point.totalCost,
+            successRate: point.successRatePercent,
+        };
+    }), 
+    // formatDate depends on granularity, so both are needed
+    [data, formatDate, detailedDate]);
+    const latestPoint = chartData.at(-1);
+    const activeColor = chartConfig[activeMetric].color;
+    const formatMetricValue = (value) => {
+        if (value === undefined)
+            return "–";
+        if (activeMetric === "successRate") {
+            return `${value.toFixed(1)}%`;
+        }
+        if (activeMetric === "cost") {
+            return formatUsd(value);
+        }
+        return value.toLocaleString();
+    };
+    const yAxisProps = useMemo(() => {
+        if (activeMetric === "successRate") {
+            return {
+                domain: [0, 100],
+                tickFormatter: (value) => `${value}%`,
+            };
+        }
+        return {
+            tickFormatter: (value) => value >= 1000 ? `${(value / 1000).toFixed(1)}k` : `${value}`,
+        };
+    }, [activeMetric]);
+    return (_jsxs("div", { className: "flex flex-col gap-7 lg:gap-8", children: [_jsxs("div", { className: "flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-muted-foreground/80", children: t("cloud.analytics.usageChart.focusMetric", {
+                                    defaultValue: "Focus metric",
+                                }) }), _jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-2xl font-semibold text-foreground", children: formatMetricValue(latestPoint?.[activeMetric]) }), _jsx(Badge, { variant: "outline", className: "rounded-full bg-background/80 text-xs", children: t("cloud.analytics.usageChart.latestDataPoint", {
+                                            defaultValue: "Latest data point",
+                                        }) })] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-3", children: Object.keys(chartConfig).map((metric) => {
+                            const isActive = metric === activeMetric;
+                            const color = chartConfig[metric].color;
+                            return (_jsx(Button, { variant: isActive ? "default" : "outline", size: "sm", className: cn("rounded-full text-xs font-medium", !isActive && "border-border/60 bg-background/60"), style: isActive
+                                    ? { backgroundColor: color, borderColor: color }
+                                    : undefined, onClick: () => setActiveMetric(metric), children: chartConfig[metric].label }, metric));
+                        }) })] }), _jsx(ChartContainer, { config: chartConfig, className: "h-[340px] w-full rounded-sm border border-border/70 bg-background/70 p-5 sm:p-6", children: _jsxs(AreaChart, { data: chartData, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `fill-${activeMetric}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: activeColor, stopOpacity: 0.3 }), _jsx("stop", { offset: "95%", stopColor: activeColor, stopOpacity: 0.05 })] }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), _jsx(XAxis, { dataKey: "label", tickLine: false, axisLine: false, minTickGap: 24 }), _jsx(YAxis, { tickLine: false, axisLine: false, width: 70, ...yAxisProps }), _jsx(ChartTooltip, { cursor: { strokeDasharray: "4 4" }, content: _jsx(ChartTooltipContent, { hideIndicator: true, formatter: (value) => {
+                                    const numeric = Number(value);
+                                    if (activeMetric === "successRate") {
+                                        return `${numeric.toFixed(1)}%`;
+                                    }
+                                    if (activeMetric === "cost") {
+                                        return formatUsd(numeric);
+                                    }
+                                    return numeric.toLocaleString();
+                                }, labelFormatter: (_, payload) => {
+                                    const source = payload?.[0];
+                                    if (source &&
+                                        typeof source === "object" &&
+                                        "payload" in source) {
+                                        const inner = source.payload;
+                                        return inner?.fullLabel ?? "";
+                                    }
+                                    return "";
+                                } }) }), _jsx(Area, { type: "monotone", dataKey: activeMetric, stroke: activeColor, fill: `url(#fill-${activeMetric})`, strokeWidth: 2, dot: false })] }) })] }));
+}

package/cloud/analytics/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Analytics cloud domain — per-user usage + cost view.
+ *
+ * Mounts at `/dashboard/analytics` (the canonical home; cloud-frontend's
+ * degraded `settings analytics-tab` is intentionally not ported). The route is
+ * code-split via `React.lazy` so the recharts/date-fns chart bundle only loads
+ * when the view is opened.
+ *
+ * The Wave-3 settings section and the app shell consume {@link AnalyticsPage}
+ * (default export) / this module's `registerCloudRoute` side effect.
+ */
+export declare const ANALYTICS_ROUTE_PATH = "dashboard/analytics";
+declare const AnalyticsPage: import("react").LazyExoticComponent<typeof import("./Page").default>;
+export { type AnalyticsTimeRange, useAnalyticsBreakdown, useAnalyticsProjections, } from "./lib/analytics-data";
+export { ANALYTICS_TIME_RANGES, DEFAULT_ANALYTICS_TIME_RANGE, projectionPeriodsForRange, resolveTimeRangeParam, } from "./lib/time-range";
+export { AnalyticsPage };
+//# sourceMappingURL=index.d.ts.map

package/cloud/analytics/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/analytics/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,eAAO,MAAM,oBAAoB,wBAAwB,CAAC;AAE1D,QAAA,MAAM,aAAa,sEAA+B,CAAC;AAEnD,OAAO,EACL,KAAK,kBAAkB,EACvB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,qBAAqB,EACrB,4BAA4B,EAC5B,yBAAyB,EACzB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/cloud/analytics/index.js

@@ -0,0 +1,23 @@
+/**
+ * Analytics cloud domain — per-user usage + cost view.
+ *
+ * Mounts at `/dashboard/analytics` (the canonical home; cloud-frontend's
+ * degraded `settings analytics-tab` is intentionally not ported). The route is
+ * code-split via `React.lazy` so the recharts/date-fns chart bundle only loads
+ * when the view is opened.
+ *
+ * The Wave-3 settings section and the app shell consume {@link AnalyticsPage}
+ * (default export) / this module's `registerCloudRoute` side effect.
+ */
+import { lazy } from "react";
+import { registerCloudRoute } from "../shell/cloud-route-registry.js";
+export const ANALYTICS_ROUTE_PATH = "dashboard/analytics";
+const AnalyticsPage = lazy(() => import("./Page.js"));
+export { useAnalyticsBreakdown, useAnalyticsProjections, } from "./lib/analytics-data.js";
+export { ANALYTICS_TIME_RANGES, DEFAULT_ANALYTICS_TIME_RANGE, projectionPeriodsForRange, resolveTimeRangeParam, } from "./lib/time-range.js";
+export { AnalyticsPage };
+registerCloudRoute({
+    path: ANALYTICS_ROUTE_PATH,
+    element: AnalyticsPage,
+    group: "dashboard",
+});

package/cloud/analytics/lib/analytics-data.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Analytics data hooks for the app-hosted Eliza Cloud analytics view.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/lib/data/analytics.ts` and rewired
+ * onto the shared cloud infra under `@elizaos/ui/cloud`:
+ *   - typed `api<T>` client     → `../../lib/api-client`
+ *   - canonical response DTOs   → `@elizaos/cloud-shared/types`
+ *   - auth-query gate           → `./auth-query` (consumes the cloud shell's
+ *                                 LocalStewardAuthContext)
+ *
+ * The response shapes are the canonical `EnhancedAnalyticsDataDto` /
+ * `ProjectionsDataDto` from cloud-shared — we do not hand-roll local interfaces.
+ * `DateLike` fields arrive over the wire as ISO strings; `Page.tsx` adapts them
+ * to `Date` before rendering.
+ *
+ * Backend contract (see `packages/cloud-api/analytics/{breakdown,projections}`):
+ *   - GET /api/analytics/breakdown  accepts ONLY `timeRange`
+ *     (`daily` | `weekly` | `monthly`); it derives startDate/endDate/granularity
+ *     server-side. It does NOT honor arbitrary `startDate`/`endDate`/
+ *     `granularity` query params — only `/api/analytics/export` does.
+ *   - GET /api/analytics/projections accepts ONLY `periods` (1..90).
+ * The query keys therefore depend on exactly the params the backend reads, so
+ * changing the filter re-fetches with the honored parameter.
+ */
+import type { AnalyticsTimeRange, EnhancedAnalyticsDataDto, ProjectionsDataDto } from "@elizaos/cloud-shared/types";
+export type { AnalyticsTimeRange };
+/**
+ * GET /api/analytics/breakdown — full analytics shape consumed by
+ * `AnalyticsPageClient`: time series, trends, provider/model breakdowns, cost
+ * trending, and the org credit balance. Re-filters whenever `timeRange`
+ * changes (the only filter the breakdown endpoint honors).
+ */
+export declare function useAnalyticsBreakdown(timeRange?: AnalyticsTimeRange): import("@tanstack/react-query").UseQueryResult<NoInfer<EnhancedAnalyticsDataDto>, Error>;
+/**
+ * GET /api/analytics/projections — cost projections + alerts based on the last
+ * 30 days of usage. `periods` is the projection horizon (clamped 1..90 by the
+ * backend) and is reflected in the query key so the chart re-fetches when it
+ * changes.
+ */
+export declare function useAnalyticsProjections(periods?: number): import("@tanstack/react-query").UseQueryResult<NoInfer<ProjectionsDataDto>, Error>;
+//# sourceMappingURL=analytics-data.d.ts.map

package/cloud/analytics/lib/analytics-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-data.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/analytics/lib/analytics-data.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,6BAA6B,CAAC;AAKrC,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAYnC;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,GAAE,kBAA6B,4FAczC;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,SAAI,sFAalD"}

package/cloud/analytics/lib/analytics-data.js

@@ -0,0 +1,55 @@
+/**
+ * Analytics data hooks for the app-hosted Eliza Cloud analytics view.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/lib/data/analytics.ts` and rewired
+ * onto the shared cloud infra under `@elizaos/ui/cloud`:
+ *   - typed `api<T>` client     → `../../lib/api-client`
+ *   - canonical response DTOs   → `@elizaos/cloud-shared/types`
+ *   - auth-query gate           → `./auth-query` (consumes the cloud shell's
+ *                                 LocalStewardAuthContext)
+ *
+ * The response shapes are the canonical `EnhancedAnalyticsDataDto` /
+ * `ProjectionsDataDto` from cloud-shared — we do not hand-roll local interfaces.
+ * `DateLike` fields arrive over the wire as ISO strings; `Page.tsx` adapts them
+ * to `Date` before rendering.
+ *
+ * Backend contract (see `packages/cloud-api/analytics/{breakdown,projections}`):
+ *   - GET /api/analytics/breakdown  accepts ONLY `timeRange`
+ *     (`daily` | `weekly` | `monthly`); it derives startDate/endDate/granularity
+ *     server-side. It does NOT honor arbitrary `startDate`/`endDate`/
+ *     `granularity` query params — only `/api/analytics/export` does.
+ *   - GET /api/analytics/projections accepts ONLY `periods` (1..90).
+ * The query keys therefore depend on exactly the params the backend reads, so
+ * changing the filter re-fetches with the honored parameter.
+ */
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../../lib/api-client.js";
+import { authenticatedQueryKey, useAuthenticatedQueryGate } from "./auth-query.js";
+/**
+ * GET /api/analytics/breakdown — full analytics shape consumed by
+ * `AnalyticsPageClient`: time series, trends, provider/model breakdowns, cost
+ * trending, and the org credit balance. Re-filters whenever `timeRange`
+ * changes (the only filter the breakdown endpoint honors).
+ */
+export function useAnalyticsBreakdown(timeRange = "weekly") {
+    const gate = useAuthenticatedQueryGate();
+    return useQuery({
+        queryKey: authenticatedQueryKey(["analytics", "breakdown", timeRange], gate),
+        queryFn: () => api(`/api/analytics/breakdown?timeRange=${timeRange}`).then((r) => r.data),
+        enabled: gate.enabled,
+    });
+}
+/**
+ * GET /api/analytics/projections — cost projections + alerts based on the last
+ * 30 days of usage. `periods` is the projection horizon (clamped 1..90 by the
+ * backend) and is reflected in the query key so the chart re-fetches when it
+ * changes.
+ */
+export function useAnalyticsProjections(periods = 7) {
+    const gate = useAuthenticatedQueryGate();
+    return useQuery({
+        queryKey: authenticatedQueryKey(["analytics", "projections", periods], gate),
+        queryFn: () => api(`/api/analytics/projections?periods=${periods}`).then((r) => r.data),
+        enabled: gate.enabled,
+    });
+}

package/cloud/analytics/lib/auth-query.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Auth-query gate for the app-hosted cloud analytics view.
+ *
+ * Ported from `@elizaos/cloud-frontend/src/lib/data/auth-query.ts`, rewired onto
+ * the cloud shell's `LocalStewardAuthContext` (provided by `StewardAuthProvider`
+ * for every authenticated cloud route) instead of cloud-frontend's
+ * `useSessionAuth`. Same contract: react-query reads are gated until a Steward
+ * session is ready + authenticated, and the query key is scoped by user id so a
+ * sign-out / account switch doesn't serve another user's cached data.
+ */
+export interface AuthenticatedQueryGate {
+    enabled: boolean;
+    userId: string | null;
+}
+/**
+ * Resolve the analytics query gate from the cloud Steward session. When no
+ * provider is mounted (e.g. SSR or a misconfigured Steward URL where
+ * `StewardAuthProvider` renders children directly), the context is null and the
+ * gate stays disabled rather than firing unauthenticated requests.
+ */
+export declare function useAuthenticatedQueryGate(enabled?: boolean): AuthenticatedQueryGate;
+export declare function authenticatedQueryKey(parts: readonly unknown[], gate: AuthenticatedQueryGate): readonly unknown[];
+//# sourceMappingURL=auth-query.d.ts.map

package/cloud/analytics/lib/auth-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-query.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud/analytics/lib/auth-query.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAKH,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,UAAO,GACb,sBAAsB,CAQxB;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,SAAS,OAAO,EAAE,EACzB,IAAI,EAAE,sBAAsB,GAC3B,SAAS,OAAO,EAAE,CAEpB"}