This is one autonomous block used by AssistantOverview. Keep the assistant-overview wrapper for its frame and inset tokens. Pass totals for the previous equal-length period to show deltas.

Usage

tsx

"use client";

import type { UsageDashboard } from "@agent-hub/core";
import { OverviewActivity } from "@/components/assistant/overview-blocks";

export default function Example({ dashboard }: { dashboard: UsageDashboard }) {
  return <div className="assistant-overview"><OverviewActivity activity={dashboard} previousActivity={null} href="/insights/observability" /></div>;
}

Included variants

Activity
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.

This is one autonomous block used by AssistantOverview. Keep the assistant-overview wrapper for its frame and inset tokens. Pass totals for the previous equal-length period to show deltas.

Source files

apps/web/src/components/assistant/overview-blocks.tsx
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…

PreviousMarketing navigation

NextSetup checklist

BlocksActivity

Overview

Activity

The complete Overview activity card, with three metrics, sparklines, deltas and its destination.

ActivityEmptyLoading

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

This is one autonomous block used by AssistantOverview. Keep the assistant-overview wrapper for its frame and inset tokens. Pass totals for the previous equal-length period to show deltas.

Usage

tsx

"use client";

import type { UsageDashboard } from "@agent-hub/core";
import { OverviewActivity } from "@/components/assistant/overview-blocks";

export default function Example({ dashboard }: { dashboard: UsageDashboard }) {
  return <div className="assistant-overview"><OverviewActivity activity={dashboard} previousActivity={null} href="/insights/observability" /></div>;
}

Included variants

Activity
Empty
Loading

In Ciele

This is one autonomous block used by AssistantOverview. Keep the assistant-overview wrapper for its frame and inset tokens. Pass totals for the previous equal-length period to show deltas.

Source files

apps/web/src/components/assistant/overview-blocks.tsx
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…

PreviousMarketing navigation

NextSetup checklist