A draggable and rearrangeable widget grid for building customizable dashboards. Move widgets freely while the layout automatically adapts around them.
'use client'
import {
createContext,
Fragment,
useContext,
useEffect,
useState,
type ReactNode,
} from 'react'
import DraggableWidgetGrid, { type WidgetItem } from '@/components/ui/draggable-widget-grid'
/* ------------------------------------------------------------------ *
* Demo: an AI agent observability dashboard with eight widgets.
*
* All data is simulated and updates every few seconds (paused when the user
* prefers reduced motion). Updating values are not announced to screen
* readers; every chart has a text alternative and every status has a label.
* ------------------------------------------------------------------ */
type Kind =
| 'runs'
| 'health'
| 'cost'
| 'failures'
| 'traces'
| 'evals'
| 'tools'
| 'models'
interface Widget extends WidgetItem {
kind: Kind
}
const WIDGETS: Widget[] = [
{ id: 'runs', kind: 'runs', size: 'wide', label: 'Runs today' },
{ id: 'health', kind: 'health', size: 'sm', label: 'System status' },
{ id: 'cost', kind: 'cost', size: 'sm', label: 'Total cost' },
{ id: 'failures', kind: 'failures', size: 'sm', label: 'Errors' },
{ id: 'traces', kind: 'traces', size: 'wide', label: 'Recent traces' },
{ id: 'evals', kind: 'evals', size: 'sm', label: 'Eval score' },
{ id: 'tools', kind: 'tools', size: 'wide', label: 'Tool calls' },
{ id: 'models', kind: 'models', size: 'wide', label: 'Token usage by model' },
]
/* ------------------------------------------------------------------ *
* Live data
* ------------------------------------------------------------------ */
const LiveContext = createContext(true)
/**
* The demo's own palette, so the preview looks the same in any host theme.
* The grid itself only uses theme tokens.
*/
const PALETTE = [
'[--background:#ffffff] [--color-background:#ffffff] [--foreground:#09090b] [--color-foreground:#09090b] [--card:#ffffff] [--color-card:#ffffff] [--card-foreground:#09090b] [--color-card-foreground:#09090b] [--muted-foreground:#71717a] [--color-muted-foreground:#71717a] [--border:#e4e4e7] [--color-border:#e4e4e7] [--ring:#18181b] [--color-ring:#18181b]',
'dark:[--background:#0a0a0b] dark:[--color-background:#0a0a0b] dark:[--foreground:#fafafa] dark:[--color-foreground:#fafafa] dark:[--card:#141417] dark:[--color-card:#141417] dark:[--card-foreground:#fafafa] dark:[--color-card-foreground:#fafafa] dark:[--muted-foreground:#a1a1aa] dark:[--color-muted-foreground:#a1a1aa] dark:[--border:#27272a] dark:[--color-border:#27272a] dark:[--ring:#d4d4d8] dark:[--color-ring:#d4d4d8]',
].join(' ')
const FONT_URL =
'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'
const FONT =
"'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
/** A counter that advances while live data is on and the page is visible. */
function useTick(ms = 2000) {
const live = useContext(LiveContext)
const [tick, setTick] = useState(0)
useEffect(() => {
if (!live) return
const id = window.setInterval(() => {
if (!document.hidden) setTick((t) => t + 1)
}, ms)
return () => window.clearInterval(id)
}, [live, ms])
return tick
}
/** Deterministic noise, so server and client agree on the first frame. */
function noise(seed: number) {
const x = Math.sin(seed * 127.1 + 311.7) * 43758.5453
return x - Math.floor(x)
}
const fmt = (v: number) => v.toLocaleString('en-US')
const median = (values: number[]) => {
const sorted = [...values].sort((a, b) => a - b)
const mid = Math.floor(sorted.length / 2)
return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2
}
const duration = (v: number) =>
v >= 1000 ? `${(v / 1000).toFixed(2)}s` : `${Math.round(v)}ms`
/* ------------------------------------------------------------------ *
* Palette: neutral theme tokens, blue for volume, status colours for status.
* ------------------------------------------------------------------ */
type Tone = 'ok' | 'warn' | 'err' | 'idle'
const DOT: Record<Tone, string> = {
ok: 'bg-emerald-500',
warn: 'bg-amber-500',
err: 'bg-rose-500',
idle: 'bg-muted-foreground/60',
}
const TEXT: Record<Tone, string> = {
ok: 'text-emerald-600 dark:text-emerald-400',
warn: 'text-amber-600 dark:text-amber-300',
err: 'text-rose-600 dark:text-rose-400',
idle: 'text-muted-foreground',
}
const ACCENT = 'bg-blue-500 dark:bg-blue-400'
/** Heatmap levels, from empty to the busiest interval. */
const HEAT = [
'bg-foreground/[0.06]',
'bg-blue-500/20',
'bg-blue-500/35',
'bg-blue-500/55',
'bg-blue-500/85 dark:bg-blue-400/85',
]
/* ------------------------------------------------------------------ *
* Building blocks
* ------------------------------------------------------------------ */
function Shell({
title,
meta,
children,
}: {
title: string
meta?: ReactNode
children: ReactNode
}) {
return (
<section className="@container flex h-full flex-col gap-4 p-4 sm:p-[22px]">
<header className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 text-[14px] leading-none">
<h3 className="truncate text-[12px] tracking-[0.1em] text-muted-foreground uppercase">
{title}
</h3>
{meta && <span className="shrink-0 text-muted-foreground">{meta}</span>}
</header>
<div className="flex min-h-0 flex-1 flex-col">{children}</div>
</section>
)
}
function Big({
children,
unit,
unitWide = false,
}: {
children: ReactNode
unit?: string
/** Only show the unit on tiles wide enough to keep it on one line. */
unitWide?: boolean
}) {
return (
<p className="text-[28px] leading-none font-normal tracking-tight text-foreground tabular-nums @[240px]:text-[30px]">
{children}
{unit && (
<span
className={`text-[13px] tracking-normal text-muted-foreground ${
unitWide ? 'sr-only @[200px]:not-sr-only' : ''
}`}>
{/* A real space: `not-sr-only` would wipe a margin. */}
{'\u00a0'}
{unit}
</span>
)}
</p>
)
}
/** A change against a previous period, said in words as well as an arrow. */
function Delta({
value,
against,
suffix,
good = 'up',
}: {
value: number
against: string
/** Shown after the number when there is room, e.g. "MoM". */
suffix?: string
good?: 'up' | 'down'
}) {
const up = value >= 0
const tone: Tone = up === (good === 'up') ? 'ok' : 'err'
return (
<span className={`text-[14px] tabular-nums ${TEXT[tone]}`}>
<span aria-hidden="true">{up ? '↑' : '↓'} </span>
{Math.abs(value)}%
{suffix && (
<span aria-hidden="true" className="text-muted-foreground">
{' '}
{suffix}
</span>
)}
<span className="sr-only"> {against}</span>
</span>
)
}
function Dot({ tone, pulse = false }: { tone: Tone; pulse?: boolean }) {
return (
<span aria-hidden="true" className="relative inline-flex size-2 shrink-0">
{pulse && (
<span
className={`absolute inset-0 animate-ping rounded-full opacity-50 motion-reduce:hidden ${DOT[tone]}`}
/>
)}
<span className={`relative size-2 rounded-full ${DOT[tone]}`} />
</span>
)
}
/** Label on the left, value on the right, one quiet line. */
function Row({
children,
value,
className = '',
}: {
children: ReactNode
value: ReactNode
className?: string
}) {
return (
<div className={`flex items-center gap-2 text-[13px] ${className}`}>
<dt className="flex min-w-0 items-center gap-2 truncate text-foreground">
{children}
</dt>
<dd className="ml-auto text-muted-foreground tabular-nums">{value}</dd>
</div>
)
}
/* ------------------------------------------------------------------ *
* Runs: a minimap of the last five days, one cell per 45 minutes
* ------------------------------------------------------------------ */
const DAYS = ['Sat', 'Sun', 'Mon', 'Tue', 'Today']
const SLOTS = 32
const SLOT_MINUTES = 45
/** 21:00 today, as a slot. Everything after it has not happened yet. */
const NOW = 28
const HOURS = ['12AM', '6AM', '12PM', '6PM']
function runsAt(day: number, slot: number) {
const hour = (slot * SLOT_MINUTES) / 60
const weekend = DAYS[day] === 'Sat' || DAYS[day] === 'Sun'
// Never quite idle, a morning ramp, a long afternoon peak, quieter weekends.
const shape =
3.5 +
Math.exp(-((hour - 15) ** 2) / 30) * 18 +
Math.exp(-((hour - 10) ** 2) / 10) * 11
return Math.max(
0,
Math.round(
shape * 3.3 * (weekend ? 0.5 : 1) * (0.5 + noise(day * 97 + slot)),
),
)
}
const slotClock = (slot: number) => {
const minutes = slot * SLOT_MINUTES
return `${String(Math.floor(minutes / 60)).padStart(2, '0')}:${String(minutes % 60).padStart(2, '0')}`
}
function Runs() {
const t = useTick(2500)
const today = DAYS.length - 1
const grid = DAYS.map((_, d) =>
Array.from({ length: SLOTS }, (_, s) =>
d === today && s > NOW
? null
: runsAt(d, s) + (d === today && s === NOW ? t % 12 : 0),
),
)
const peak = Math.max(...grid.flat().map((v) => v ?? 0))
const total = grid[today].reduce<number>((a, v) => a + (v ?? 0), 0)
return (
<Shell
title="Runs today"
meta={
<Delta
value={12}
against="compared with yesterday"
suffix="vs yesterday"
/>
}>
<Big>{fmt(total)}</Big>
<div className="mt-auto">
<div
role="img"
aria-label={`Runs per 45 minutes over the last 5 days. ${fmt(total)} runs so far today, busiest in the afternoon, quieter at the weekend.`}
className="grid grid-cols-1 items-center gap-x-3 gap-y-[3px] @[480px]:grid-cols-[auto_minmax(0,1fr)]">
{grid.map((row, d) => (
<Fragment key={DAYS[d]}>
<span
aria-hidden="true"
className={`hidden text-[12px] leading-none @[480px]:block ${
d === today ? 'text-foreground' : 'text-muted-foreground'
}`}>
{DAYS[d]}
</span>
<span className="grid grid-cols-[repeat(32,minmax(0,1fr))] gap-[3px]">
{row.map((v, s) => {
const level =
v === null || v === 0
? 0
: Math.max(1, Math.ceil((v / peak) * 4))
return (
<span
key={s}
title={
v === null
? undefined
: `${DAYS[d]} ${slotClock(s)} · ${v} runs`
}
className={`aspect-square rounded-[2.5px] transition-colors duration-700 motion-reduce:transition-none ${
d === today && s === NOW
? 'bg-blue-600 dark:bg-blue-300'
: HEAT[level]
}`}
/>
)
})}
</span>
</Fragment>
))}
{/* Day and hour labels only where the tile is tall enough. */}
<span aria-hidden="true" className="hidden @[480px]:block" />
<span
aria-hidden="true"
className="mt-2 hidden grid-cols-4 text-[12px] text-muted-foreground @[480px]:grid">
{HOURS.map((h) => (
<span key={h}>{h}</span>
))}
</span>
</div>
</div>
</Shell>
)
}
/* ------------------------------------------------------------------ *
* System health: uptime as a status-page strip
* ------------------------------------------------------------------ */
/** Days in the last 30 that had an incident, and how bad. */
const INCIDENTS: Record<number, Tone> = { 8: 'warn', 21: 'warn' }
function Health() {
const t = useTick(5000)
const degraded = t % 6 === 5
return (
<Shell title="System status" meta="30d">
<Big unit="uptime" unitWide>
99.98%
</Big>
<p
className={`mt-3 flex items-center gap-2 text-[13px] ${
degraded ? TEXT.warn : 'text-foreground'
}`}>
<Dot tone={degraded ? 'warn' : 'ok'} pulse />
<span className="truncate">
{degraded ? 'Degraded performance' : 'All systems operational'}
</span>
</p>
<div className="mt-auto">
<div
role="img"
aria-label="Uptime over the last 30 days: 28 days operational, 2 days with degraded performance."
className="flex h-5 gap-[2px] @[240px]:h-6">
{Array.from({ length: 30 }, (_, i) => (
<span
key={i}
className={`flex-1 rounded-[1.5px] ${
INCIDENTS[i] ? 'bg-amber-400/80' : 'bg-foreground/15'
}`}
/>
))}
</div>
</div>
</Shell>
)
}
/* ------------------------------------------------------------------ *
* Total cost
* ------------------------------------------------------------------ */
function Cost() {
const t = useTick(3000)
const days = Array.from({ length: 14 }, (_, i) =>
Math.round(9 + noise(i * 5) * 7 + i * 0.35),
)
// Today's bar and the month total drift, then wrap, so the scale holds.
days[13] = Math.round(12 + (t % 30) * 0.2)
const month = 184.2 + (t % 30) * 0.07
const max = Math.max(...days)
return (
<Shell
title="Total cost"
meta={
<Delta
value={8}
against="compared with last month"
suffix="MoM"
good="down"
/>
}>
<Big unit="MTD">${month.toFixed(0)}</Big>
<div
role="img"
aria-label={`Daily cost over the last 14 days, between $${Math.min(...days)} and $${max}. Today $${days[13]}.`}
className="mt-auto flex h-10 items-end gap-[3px]">
{days.map((d, i) => (
<span
key={i}
className={`flex-1 rounded-full transition-[height] duration-700 motion-reduce:transition-none ${
i === days.length - 1 ? ACCENT : 'bg-foreground/15'
}`}
style={{ height: `${(d / max) * 100}%` }}
/>
))}
</div>
</Shell>
)
}
/* ------------------------------------------------------------------ *
* Failures
* ------------------------------------------------------------------ */
function Failures() {
const t = useTick(5000)
const causes = [
{ name: 'timeout', count: 9 + (Math.floor(t / 3) % 5) },
{ name: 'rate-limit', count: 7 },
{ name: 'tool-error', count: 5 + (Math.floor(t / 5) % 4) },
]
const total = causes.reduce((a, c) => a + c.count, 0) + 2
return (
<Shell title="Errors" meta="24h">
<Big unit={`${((total / 1262) * 100).toFixed(1)}% rate`}>{total}</Big>
<dl className="mt-auto space-y-2">
{causes.map((c, i) => (
<Row key={c.name} value={c.count}>
<Dot tone={i === 0 ? 'err' : 'idle'} />
{c.name}
</Row>
))}
</dl>
</Shell>
)
}
/* ------------------------------------------------------------------ *
* Latest traces
* ------------------------------------------------------------------ */
const AGENTS = [
'research_agent',
'support_agent',
'code_agent',
'planner',
'reviewer',
]
function trace(n: number) {
const r = noise(n * 3)
const tone: Tone = r > 0.9 ? 'err' : r > 0.8 ? 'warn' : 'ok'
return {
n,
id: `tr_${Math.floor(noise(n) * 0xffffff)
.toString(16)
.padStart(6, '0')}`,
agent: AGENTS[Math.floor(noise(n * 7) * AGENTS.length)],
ms: 400 + noise(n * 13) * 3200,
tone,
}
}
const TRACE_WORD: Record<Tone, string> = {
ok: 'success',
warn: 'slow',
err: 'error',
idle: 'pending',
}
function Traces() {
const t = useTick(2200)
const rows = Array.from({ length: 4 }, (_, i) => trace(t + 40 - i))
const longest = 3600
return (
<Shell
title="Recent traces"
meta={
<span className="flex items-center gap-1.5">
<Dot tone="ok" pulse />
live
</span>
}>
<Big unit="p50">{duration(median(rows.map((r) => r.ms)))}</Big>
<ol
aria-label="Most recent agent runs"
className="mt-auto space-y-2 text-[13px]">
{rows.map((r, i) => (
<li
key={r.n}
className={`grid-cols-[6px_minmax(0,1fr)_60px] items-center gap-3 @[440px]:grid-cols-[6px_84px_minmax(0,1fr)_26%_60px] ${
i === 0 ? 'text-foreground' : 'text-muted-foreground'
} ${
// Short tiles keep the newest.
i >= 3
? 'hidden @[520px]:grid'
: i === 2
? 'hidden @[360px]:grid'
: 'grid'
}`}>
<Dot tone={r.tone} />
<span className="truncate">
{r.id}
<span className="sr-only">
, {TRACE_WORD[r.tone]}, {r.agent},
</span>
</span>
<span aria-hidden="true" className="hidden truncate @[440px]:block">
{r.agent}
</span>
<span
aria-hidden="true"
className="hidden h-[3px] rounded-full bg-foreground/10 @[440px]:block">
<span
className={`block h-full rounded-full ${i === 0 ? ACCENT : 'bg-foreground/25'}`}
style={{ width: `${(r.ms / longest) * 100}%` }}
/>
</span>
<span className="text-right tabular-nums">{duration(r.ms)}</span>
</li>
))}
</ol>
</Shell>
)
}
/* ------------------------------------------------------------------ *
* Evals
* ------------------------------------------------------------------ */
const EVALS = [
{ name: 'Faithfulness', value: 0.94 },
{ name: 'Relevancy', value: 0.89 },
{ name: 'Correctness', value: 0.91 },
]
function Evals() {
const score = EVALS.reduce((a, e) => a + e.value, 0) / EVALS.length
return (
<Shell title="Eval score">
<div className="flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
<Big>{score.toFixed(2)}</Big>
<span className={`text-[14px] tabular-nums ${TEXT.ok}`}>
<span aria-hidden="true">↑ </span>0.03
<span className="sr-only"> since the previous experiment</span>
</span>
</div>
<dl className="mt-auto space-y-2">
{EVALS.map((e) => (
<Row key={e.name} value={e.value.toFixed(2)}>
{e.name}
</Row>
))}
</dl>
</Shell>
)
}
/* ------------------------------------------------------------------ *
* Tool usage
* ------------------------------------------------------------------ */
const TOOLS = [
{ name: 'web_search', calls: 412 },
{ name: 'code_interpreter', calls: 268 },
{ name: 'sql_query', calls: 197 },
{ name: 'retrieve_docs', calls: 143 },
]
function Tools() {
const t = useTick(3000)
const rows = TOOLS.map((tool, i) => ({
...tool,
calls: tool.calls + Math.floor((t % 50) * (4 - i) * 0.6),
}))
const max = Math.max(...rows.map((r) => r.calls))
const total = rows.reduce((a, r) => a + r.calls, 0)
return (
<Shell title="Tool calls" meta="24h">
<Big>{fmt(total)}</Big>
<table className="mt-auto w-full table-fixed text-left text-[13px]">
<caption className="sr-only">Tool calls in the last 24 hours</caption>
<thead className="sr-only">
<tr>
<th scope="col">tool</th>
<th scope="col">share</th>
<th scope="col">calls</th>
</tr>
</thead>
<tbody>
{rows.map((r, i) => (
<tr
key={r.name}
className={
// Short tiles keep the busiest tools.
i >= 3
? 'hidden @[520px]:table-row'
: i === 2
? 'hidden @[360px]:table-row'
: ''
}>
<th
scope="row"
className={`w-[140px] truncate py-[6px] pr-3 font-normal ${
i === 0 ? 'text-foreground' : 'text-muted-foreground'
}`}>
{r.name}
</th>
<td className="py-[6px]">
<span
aria-hidden="true"
className="block h-[3px] rounded-full bg-foreground/10">
<span
className={`block h-full rounded-full transition-[width] duration-700 motion-reduce:transition-none ${
i === 0 ? ACCENT : 'bg-foreground/25'
}`}
style={{ width: `${(r.calls / max) * 100}%` }}
/>
</span>
</td>
<td className="w-[56px] py-[6px] text-right text-muted-foreground tabular-nums">
{r.calls}
</td>
</tr>
))}
</tbody>
</table>
</Shell>
)
}
/* ------------------------------------------------------------------ *
* Model usage
* ------------------------------------------------------------------ */
const MODELS = [
{ name: 'claude-sonnet-5', share: 0.52, swatch: ACCENT },
{
name: 'claude-haiku-4.5',
share: 0.27,
swatch: 'bg-blue-500/55 dark:bg-blue-400/55',
},
{
name: 'claude-opus-5',
share: 0.13,
swatch: 'bg-blue-500/30 dark:bg-blue-400/30',
},
{ name: 'embed-v3', share: 0.08, swatch: 'bg-foreground/20' },
]
function Models() {
return (
<Shell title="Token usage" meta="by model · 24h">
<Big unit="tokens">12.3M</Big>
<dl className="mt-auto grid grid-cols-2 gap-x-6 gap-y-2">
{MODELS.map((m) => (
<Row key={m.name} value={`${Math.round(m.share * 100)}%`}>
<span
aria-hidden="true"
className={`size-1.5 shrink-0 rounded-full ${m.swatch}`}
/>
<span className="truncate">{m.name}</span>
</Row>
))}
</dl>
<div
role="img"
aria-label={`Share of tokens: ${MODELS.map((m) => `${m.name} ${Math.round(m.share * 100)}%`).join(', ')}.`}
className="mt-4 flex h-[3px] gap-[3px]">
{MODELS.map((m) => (
<span
key={m.name}
className={`h-full rounded-full ${m.swatch}`}
style={{ width: `${m.share * 100}%` }}
/>
))}
</div>
</Shell>
)
}
/* ------------------------------------------------------------------ *
* Board
* ------------------------------------------------------------------ */
const VIEWS: Record<Kind, () => ReactNode> = {
runs: Runs,
health: Health,
cost: Cost,
failures: Failures,
traces: Traces,
evals: Evals,
tools: Tools,
models: Models,
}
const renderWidget = (item: Widget) => {
const View = VIEWS[item.kind]
return <View />
}
export default function Demo() {
const [live, setLive] = useState(true)
useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
setLive(false)
}, [])
return (
<main
className={`flex min-h-screen w-full items-center justify-center bg-background px-4 py-12 text-foreground antialiased ${PALETTE}`}
style={{ fontFamily: FONT }}>
<link rel="stylesheet" href={FONT_URL} />
<div className="w-full max-w-[1180px]">
<p className="mb-4 text-[14px] text-muted-foreground">
<span className="[@media(pointer:coarse)]:hidden">
Drag and rearrange widgets to customize the layout.
</span>
<span className="hidden [@media(pointer:coarse)]:inline">
Press and hold a widget, then drag to rearrange the layout.
</span>
</p>
<section aria-labelledby="agent-observability-title">
<h2 id="agent-observability-title" className="sr-only">
Agent observability
</h2>
<LiveContext.Provider value={live}>
<DraggableWidgetGrid
items={WIDGETS}
renderItem={(item) => renderWidget(item as Widget)}
/>
</LiveContext.Provider>
</section>
</div>
</main>
)
}