"use client";

import type { UsageDashboard } from "@agent-hub/core";
import { DashboardStatCards } from "@/components/insights/dashboard/dashboard-stat-cards";
import { costStats } from "@/lib/insights/dashboard-stats";

export default function Example({ dashboard }: { dashboard: UsageDashboard }) {
  return <DashboardStatCards specs={costStats(dashboard, null)} loading={false} />;
}

Included variants

Activity
Costs
Observability
Empty
Loading

In Ciele

Use the workspace imports shown above inside Ciele. App components use the shared Tailwind tokens in globals.css. For another project, adapt the imports and bring the dependencies listed in the source.

One metric grid is a block; individual metrics remain in Metric cards. Activity, Costs and Observability are variations of the same grid role.

Source files

apps/web/src/components/insights/dashboard/dashboard-stat-cards.tsx
apps/web/src/lib/insights/dashboard-stats.ts

Source code

The implementation used by Ciele, including its supporting components. Original attribution and license notices remain in the files.

Loading source files…

PreviousConversation list

NextUsage

BlocksMetric grid

Analytics

Metric grid

A responsive group of related dashboard metrics, with sparklines, context and comparisons.

ActivityCostsObservabilityEmptyLoading

Live components with example content. Try their controls, or switch the theme and palette.

One metric grid is a block; individual metrics remain in Metric cards. Activity, Costs and Observability are variations of the same grid role.

Usage

tsx

"use client";

import type { UsageDashboard } from "@agent-hub/core";
import { DashboardStatCards } from "@/components/insights/dashboard/dashboard-stat-cards";
import { costStats } from "@/lib/insights/dashboard-stats";

export default function Example({ dashboard }: { dashboard: UsageDashboard }) {
  return <DashboardStatCards specs={costStats(dashboard, null)} loading={false} />;
}

Included variants

Activity
Costs
Observability
Empty
Loading

In Ciele

One metric grid is a block; individual metrics remain in Metric cards. Activity, Costs and Observability are variations of the same grid role.

Source files

apps/web/src/components/insights/dashboard/dashboard-stat-cards.tsx
apps/web/src/lib/insights/dashboard-stats.ts

Source code

The implementation used by Ciele, including its supporting components. Original attribution and license notices remain in the files.

Loading source files…

PreviousConversation list

NextUsage