This autonomous composition is reused directly in the admin dashboard. The preview uses local sample data; source code contains the production component and its chart dependencies.

Usage

tsx

"use client";

import type { UsageDashboard } from "@agent-hub/core";
import { TokenActivityCard } from "@/components/insights/dashboard/dashboard-blocks";

export default function Example({ dashboard }: { dashboard: UsageDashboard }) {
  return <TokenActivityCard daily={dashboard.daily} totals={dashboard.totals} />;
}

Included variants

Populated
Empty

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.

This autonomous composition is reused directly in the admin dashboard. The preview uses local sample data; source code contains the production component and its chart dependencies.

Source files

apps/web/src/components/usage-gauge.tsx
apps/web/src/components/insights/dashboard/dashboard-blocks.tsx
apps/web/src/components/insights/analytics-card.tsx
apps/web/src/components/insights/analytics-card.module.css
apps/web/src/components/insights/dashboard/dashboard-animated.tsx
apps/web/src/lib/insights/dashboard-view.ts

Source code

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

Loading source files…

PreviousSpend trend

NextSpend composition

BlocksToken activity

Analytics

Token activity

An input-token share gauge and token heat calendar with peak-day, daily-average and weekday summaries.

PopulatedEmpty

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

This autonomous composition is reused directly in the admin dashboard. The preview uses local sample data; source code contains the production component and its chart dependencies.

Usage

tsx

"use client";

import type { UsageDashboard } from "@agent-hub/core";
import { TokenActivityCard } from "@/components/insights/dashboard/dashboard-blocks";

export default function Example({ dashboard }: { dashboard: UsageDashboard }) {
  return <TokenActivityCard daily={dashboard.daily} totals={dashboard.totals} />;
}

Included variants

Populated
Empty

In Ciele

This autonomous composition is reused directly in the admin dashboard. The preview uses local sample data; source code contains the production component and its chart dependencies.

Source files

apps/web/src/components/usage-gauge.tsx
apps/web/src/components/insights/dashboard/dashboard-blocks.tsx
apps/web/src/components/insights/analytics-card.tsx
apps/web/src/components/insights/analytics-card.module.css
apps/web/src/components/insights/dashboard/dashboard-animated.tsx
apps/web/src/lib/insights/dashboard-view.ts

Source code

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

Loading source files…

PreviousSpend trend

NextSpend composition