# Signal widget

> Signal is the second widget language: the same shell, parts and props as Hearth, drawn flat and straight for AI and ops products. Hairline cards, sentence case, no shadows. Signal and its widgets come with Code and Complete.

| Part | What it holds | In Figma |
| --- | --- | --- |
| Header | Title, period, info and menu | `signal/header` |
| Chart | Any of the 100+ types | chart · instance swap |
| Blocks | Up to two of the 11 blocks | block 1, block 2, show block |
| Footer | Status and one button | `signal/footer` |

## In code

agent-runs.tsx:

```tsx
import "@/lib/chartory/charts/signal" // once, in your root layout
import { BarsWidget } from "@/components/chartory/widgets/bars"

<BarsWidget
  collection="signal"
  header={{ title: "Agent runs", period: "Last 7 days" }}
  hero={{ caps: "Runs · today", value: "1,284", delta: { text: "+12%", tone: "success" } }}
  footer={{ status: "Live", live: true }}
/>
```

## Widths

A Signal widget is 480 px wide in Figma, like Hearth; the chart inside takes the size that fits it.

## Overlays

| Overlay | What it is for |
| --- | --- |
| Date picker | Choosing the period in the header |
| More menu | Actions on the widget |
| Info popover | What the number means |
| Tooltip | The value under the pointer |
| Toast | Confirming an action |