InsightCards

A paged "Insights N ‹ ›" carousel in which each page pairs a one-line agent finding with a live mini-chart and a follow-up prompt pill.

When to use

• Surface a few proactive agent findings (a website losing visitors, a traffic spike, a device split) in a narrow side panel.
• Let people scrub a chart to inspect values without leaving the conversation.
• Not for a dashboard of many metrics at once — use MetricCard, LineChart or StatsBand. Not for a single streamed answer — use StreamingText.

Usage

import InsightCards from "@/components/iris/insight-cards/insight-cards";

h(InsightCards); // the three built-in insight pages
h(InsightCards, { labels: { title: "Signals" } });

// Custom pages bring their own chart component:
h(InsightCards, {
  pages: [
    {
      key: "funnel",
      prose: "Signups converted at 35 % this week.",
      Card: FunnelChart,
      pill: "Where do visitors drop off?",
    },
  ],
});

Props

Prop	Type	Default	Description
pages	{ key: string; prose: ReactNode; Card: ComponentType; pill: string }[]	Compare, Anomaly and Allocation pages (website analytics)	One entry per page. prose is the finding, Card is rendered with no props below it, and pill is the follow-up button text.
labels	Partial<{ title: string }>	Insights	Heading before the page count.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• The built-in chart cards (visitors for two websites, a pageview spike with Pageviews/Events tabs, visitors by device) are not exported. Custom pages must supply their own Card component.
• The charts use the liveline canvas renderer. They pick light or dark styling by watching html.dark or data-theme="dark" on <html>.
• The prev and next buttons wrap around and have aria-labels. The follow-up pill is a plain button with no callback.
• The component is at most 344px wide with a 408px minimum height, so pages don't change the layout.
• Reads --surface, --inset, --field, --hover, --ink, --ink-2, --ink-3, --red, --green, --orange and --accent.