{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"usage-dashboard","type":"registry:component","title":"Usage Dashboard","description":"A coding-agent usage overview with daily token trends, provider and model totals, billed spend, and a daily breakdown.","author":"AgentUI","dependencies":["clsx","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/agents/usage-dashboard.tsx","type":"registry:component","target":"@components/agents/usage-dashboard.tsx","content":"\"use client\";\n// www.agentui.pro/components/agents/usage-dashboard\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { type KeyboardEvent, type PointerEvent, useId, useMemo, useState } from \"react\";\nimport { SPRING_LAYOUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\nimport {\n summarizeUsage,\n type DailyUsage,\n type UsageBreakdown,\n type UsageRecord,\n type UsageTotals,\n} from \"./usage-dashboard-data\";\nimport { UsageProviderMark } from \"./usage-provider-mark\";\n\nexport type { UsageRecord } from \"./usage-dashboard-data\";\n\nexport interface UsageDashboardProps {\n records: UsageRecord[];\n title?: string;\n /** Controlled range, in UTC calendar days. */\n range?: 7 | 30;\n defaultRange?: 7 | 30;\n onRangeChange?: (range: 7 | 30) => void;\n className?: string;\n}\n\ntype AgentSeries = { name: string; values: number[] };\n\nconst seriesColors = [\n \"var(--usage-first)\",\n \"var(--usage-second)\",\n \"var(--usage-third)\",\n \"var(--usage-fourth)\",\n];\nconst compact = new Intl.NumberFormat(\"en-US\", {\n notation: \"compact\",\n maximumFractionDigits: 1,\n});\nconst integer = new Intl.NumberFormat(\"en-US\");\nconst money = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n});\n\nfunction formatMoney(value: number) {\n return value > 0 && value < 0.01 ? \"<$0.01\" : money.format(value);\n}\n\nfunction formatDate(date: string, options: Intl.DateTimeFormatOptions) {\n return new Intl.DateTimeFormat(\"en-US\", { timeZone: \"UTC\", ...options }).format(\n new Date(`${date}T00:00:00.000Z`),\n );\n}\n\nfunction tokenCount(totals: UsageTotals) {\n return totals.inputTokens + totals.outputTokens;\n}\n\nfunction chartPath(values: number[], max: number) {\n return values\n .map((value, index) => {\n const x = 46 + (index / Math.max(values.length - 1, 1)) * 684;\n const y = 22 + 178 * (1 - value / max);\n return `${index === 0 ? \"M\" : \"L\"}${x.toFixed(2)} ${y.toFixed(2)}`;\n })\n .join(\" \");\n}\n\nfunction AgentChart({\n daily,\n series,\n}: {\n daily: DailyUsage[];\n series: AgentSeries[];\n}) {\n const gradientId = useId().replaceAll(\":\", \"\");\n const [activeIndex, setActiveIndex] = useState(null);\n const peak = Math.max(1, ...series.flatMap((item) => item.values));\n const step = 10 ** Math.floor(Math.log10(peak));\n const max = Math.ceil((peak * 1.16) / step) * step;\n const activeDay = activeIndex === null ? null : daily[activeIndex];\n const activeX = activeIndex === null ? 0 : 46 + (activeIndex / Math.max(daily.length - 1, 1)) * 684;\n const labels = [0, Math.floor((daily.length - 1) / 2), daily.length - 1];\n\n const inspectPointer = (event: PointerEvent) => {\n const bounds = event.currentTarget.getBoundingClientRect();\n const plotX = ((event.clientX - bounds.left) / bounds.width) * 760;\n const index = Math.round(((plotX - 46) / 684) * (daily.length - 1));\n setActiveIndex(Math.max(0, Math.min(daily.length - 1, index)));\n };\n\n const inspectKeyboard = (event: KeyboardEvent) => {\n if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) return;\n event.preventDefault();\n setActiveIndex((previous) => {\n if (event.key === \"Home\") return 0;\n if (event.key === \"End\") return daily.length - 1;\n const current = previous ?? daily.length - 1;\n return Math.max(0, Math.min(daily.length - 1, current + (event.key === \"ArrowRight\" ? 1 : -1)));\n });\n };\n\n return (\n
\n
\n
\n

Daily processed tokens

\n
\n {series.map((item, index) => (\n \n \n {item.name}\n \n ))}\n
\n
\n
\n {activeDay ? (\n
\n

{formatDate(activeDay.date, { month: \"short\", day: \"numeric\" })}

\n {series.map((item) => (\n

\n {item.name}\n {compact.format(item.values[activeIndex ?? 0])}\n

\n ))}\n
\n ) : (\n

Inspect a day

\n )}\n
\n
\n
\n { if (event.pointerType === \"mouse\") setActiveIndex(null); }}\n onFocus={() => setActiveIndex((previous) => previous ?? daily.length - 1)}\n onBlur={() => setActiveIndex(null)}\n onKeyDown={inspectKeyboard}\n />\n \n \n \n \n \n \n \n {[0, 0.5, 1].map((fraction) => {\n const y = 200 - fraction * 178;\n return (\n \n \n {compact.format(max * fraction)}\n \n );\n })}\n {series[0] && }\n {series.map((item, index) => (\n \n ))}\n {activeDay && (\n \n \n {series.map((item, index) => (\n \n ))}\n \n )}\n {labels.map((index, labelIndex) => (\n \n {formatDate(daily[index].date, { month: \"short\", day: \"numeric\" })}\n \n ))}\n \n
\n

Use the Day tab in Breakdown for exact daily values.

\n
\n );\n}\n\nfunction AgentSummary({ agents, totals }: { agents: UsageBreakdown[]; totals: UsageTotals }) {\n return (\n
\n

Processed tokens

\n

{compact.format(tokenCount(totals))}

\n

Across {integer.format(totals.requests)} requests

\n
    \n {agents.map((agent, index) => (\n
  • \n
    \n {agent.name}\n {compact.format(tokenCount(agent))}\n
    \n
    \n {agent.provider} · {Math.round((tokenCount(agent) / Math.max(tokenCount(totals), 1)) * 100)}%\n {formatMoney(agent.costUsd)}\n
    \n
    • \n ))}\n
\n
\n );\n}\n\nfunction Total({ label, value }: { label: string; value: string }) {\n return (\n
\n
{label}
\n
{value}
\n
\n );\n}\n\nfunction Breakdown({\n models,\n daily,\n totals,\n reduceMotion,\n layoutId,\n view,\n onViewChange,\n}: {\n models: UsageBreakdown[];\n daily: DailyUsage[];\n totals: UsageTotals;\n reduceMotion: boolean;\n layoutId: string;\n view: \"model\" | \"day\";\n onViewChange: (view: \"model\" | \"day\") => void;\n}) {\n const [dayPage, setDayPage] = useState(0);\n const pageCount = Math.ceil(daily.length / 7);\n const pageIndex = Math.min(dayPage, pageCount - 1);\n const pageEnd = daily.length - pageIndex * 7;\n const visibleDays = daily.slice(Math.max(0, pageEnd - 7), pageEnd);\n\n return (\n
\n
\n

Breakdown

\n
\n Breakdown view\n {([\"model\", \"day\"] as const).map((option) => (\n onViewChange(option)}\n className={cn(\"relative isolate min-h-8 rounded-full px-3.5 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring\", view === option ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\")}\n >\n {view === option && }\n {option === \"model\" ? \"Model\" : \"Day\"}\n \n ))}\n
\n
\n
\n {view === \"model\" ? (\n \n \n {models.map((model) => (\n \n \n \n \n \n \n ))}\n
ModelShareCostTokens
{model.name}{model.provider}{Math.round((tokenCount(model) / Math.max(tokenCount(totals), 1)) * 100)}%{formatMoney(model.costUsd)}{compact.format(tokenCount(model))}
\n ) : (\n
\n \n \n {visibleDays.map((day) => (\n \n \n \n \n \n \n \n ))}\n
Day · UTCInputOutputCostTokens
{formatDate(day.date, { month: \"short\", day: \"numeric\" })}{integer.format(day.inputTokens)}{integer.format(day.outputTokens)}{formatMoney(day.costUsd)}{compact.format(tokenCount(day))}
\n {pageCount > 1 && (\n
\n

\n {formatDate(visibleDays[0].date, { month: \"short\", day: \"numeric\" })} – {formatDate(visibleDays[visibleDays.length - 1].date, { month: \"short\", day: \"numeric\" })} · {visibleDays.length} of {daily.length} days\n

\n
\n = pageCount - 1}\n onClick={() => setDayPage(pageIndex + 1)}\n className=\"min-h-10 rounded-full border border-border px-3 text-xs font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40\"\n >\n ← Older\n \n setDayPage(pageIndex - 1)}\n className=\"min-h-10 rounded-full border border-border px-3 text-xs font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40\"\n >\n Newer →\n \n
\n
\n )}\n
\n )}\n
\n
\n );\n}\n\n/** Provider-billed usage overview. Pass real per-day records; the component never estimates prices. */\nexport function UsageDashboard({\n records,\n title = \"Usage overview\",\n range,\n defaultRange = 7,\n onRangeChange,\n className,\n}: UsageDashboardProps) {\n const reduceMotion = useReducedMotion() ?? false;\n const rangeId = useId();\n const breakdownId = useId();\n const [localRange, setLocalRange] = useState<7 | 30>(defaultRange);\n const [breakdownView, setBreakdownView] = useState<\"model\" | \"day\">(\"model\");\n const selectedRange = range ?? localRange;\n const usage = useMemo(() => summarizeUsage(records, selectedRange), [records, selectedRange]);\n\n const changeRange = (next: 7 | 30) => {\n if (range === undefined) setLocalRange(next);\n onRangeChange?.(next);\n };\n\n return (\n \n
\n
\n

{title}

\n

\n {usage\n ? `${formatDate(usage.startDate, { month: \"short\", day: \"numeric\" })} – ${formatDate(usage.endDate, { month: \"short\", day: \"numeric\", year: \"numeric\" })} · UTC`\n : \"No usage data yet\"}\n

\n
\n
\n Usage period\n {([7, 30] as const).map((days) => (\n changeRange(days)}\n className={cn(\"relative isolate min-h-9 rounded-full px-3.5 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring\", selectedRange === days ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\")}\n >\n {selectedRange === days && }\n {days} days\n \n ))}\n
\n
\n\n {!usage || usage.recordCount === 0 ? (\n
\n

No usage in this period

\n

Pass daily, provider-billed records to see agent and model usage.

\n
\n ) : (\n
\n
\n \n \n
\n
\n

Totals

\n
\n \n \n \n \n
\n
\n \n
\n )}\n \n );\n}\n"},{"path":"components/agents/usage-dashboard-data.ts","type":"registry:component","target":"@components/agents/usage-dashboard-data.ts","content":"export interface UsageRecord {\n /** UTC calendar day in YYYY-MM-DD format. */\n date: string;\n provider: string;\n model: string;\n /** Optional coding agent or client, such as Codex or Claude Code. */\n agent?: string;\n /** Input includes cached input; do not add cachedInputTokens to it. */\n inputTokens: number;\n cachedInputTokens?: number;\n outputTokens: number;\n requests: number;\n /** Billed amount from the provider, in USD. No price is inferred. */\n costUsd: number;\n}\n\nexport interface UsageTotals {\n inputTokens: number;\n cachedInputTokens: number;\n outputTokens: number;\n requests: number;\n costUsd: number;\n}\n\nexport interface DailyUsage extends UsageTotals {\n date: string;\n}\n\nexport interface UsageBreakdown extends UsageTotals {\n name: string;\n provider?: string;\n}\n\nconst DAY_MS = 86_400_000;\n\nfunction dayStamp(value: string): number | null {\n if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return null;\n const stamp = Date.parse(`${value}T00:00:00.000Z`);\n return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value\n ? stamp\n : null;\n}\n\nfunction isValidRecord(record: UsageRecord): boolean {\n const values = [\n record.inputTokens,\n record.cachedInputTokens ?? 0,\n record.outputTokens,\n record.requests,\n record.costUsd,\n ];\n return (\n dayStamp(record.date) !== null &&\n record.provider.trim().length > 0 &&\n record.model.trim().length > 0 &&\n (record.agent === undefined || record.agent.trim().length > 0) &&\n values.every((value) => Number.isFinite(value) && value >= 0) &&\n values.slice(0, 4).every(Number.isInteger) &&\n (record.cachedInputTokens ?? 0) <= record.inputTokens\n );\n}\n\nfunction emptyTotals(): UsageTotals {\n return { inputTokens: 0, cachedInputTokens: 0, outputTokens: 0, requests: 0, costUsd: 0 };\n}\n\nfunction addTotals(target: UsageTotals, record: UsageRecord): void {\n target.inputTokens += record.inputTokens;\n target.cachedInputTokens += record.cachedInputTokens ?? 0;\n target.outputTokens += record.outputTokens;\n target.requests += record.requests;\n target.costUsd += record.costUsd;\n}\n\n/** Aggregates a complete UTC window, including zero-use days. Never estimates cost. */\nexport function summarizeUsage(records: UsageRecord[], days: 7 | 30) {\n const valid = records.filter(isValidRecord);\n const latest = valid.reduce((max, record) => {\n const stamp = dayStamp(record.date);\n return stamp === null ? max : max === null ? stamp : Math.max(max, stamp);\n }, null);\n if (latest === null) return null;\n\n const first = latest - (days - 1) * DAY_MS;\n const daily: DailyUsage[] = Array.from({ length: days }, (_, index) => ({\n date: new Date(first + index * DAY_MS).toISOString().slice(0, 10),\n ...emptyTotals(),\n }));\n const totals = emptyTotals();\n const providers = new Map();\n const agents = new Map();\n const agentDaily = new Map();\n const models = new Map();\n let recordCount = 0;\n\n for (const record of valid) {\n const stamp = dayStamp(record.date) ?? 0;\n if (stamp < first || stamp > latest) continue;\n recordCount += 1;\n addTotals(daily[(stamp - first) / DAY_MS], record);\n addTotals(totals, record);\n\n let provider = providers.get(record.provider);\n if (!provider) {\n provider = { name: record.provider, ...emptyTotals() };\n providers.set(record.provider, provider);\n }\n addTotals(provider, record);\n\n const agentName = record.agent ?? record.provider;\n const agentKey = `${agentName}\\0${record.provider}`;\n let agent = agents.get(agentKey);\n if (!agent) {\n agent = { name: agentName, provider: record.provider, ...emptyTotals() };\n agents.set(agentKey, agent);\n }\n addTotals(agent, record);\n let dailyTokens = agentDaily.get(agentKey);\n if (!dailyTokens) {\n dailyTokens = Array(days).fill(0);\n agentDaily.set(agentKey, dailyTokens);\n }\n dailyTokens[(stamp - first) / DAY_MS] += record.inputTokens + record.outputTokens;\n\n const key = `${record.provider}\\0${record.model}`;\n let model = models.get(key);\n if (!model) {\n model = { name: record.model, provider: record.provider, ...emptyTotals() };\n models.set(key, model);\n }\n addTotals(model, record);\n }\n\n const byTokens = (a: UsageBreakdown, b: UsageBreakdown) =>\n b.inputTokens + b.outputTokens - (a.inputTokens + a.outputTokens) || a.name.localeCompare(b.name);\n\n const sortedAgents = [...agents.values()].sort(byTokens);\n const agentNameCounts = new Map();\n for (const agent of sortedAgents) {\n agentNameCounts.set(agent.name, (agentNameCounts.get(agent.name) ?? 0) + 1);\n }\n\n return {\n daily,\n totals,\n providers: [...providers.values()].sort(byTokens),\n agents: sortedAgents,\n agentSeries: sortedAgents.map((agent) => ({\n name: (agentNameCounts.get(agent.name) ?? 0) > 1 ? `${agent.name} · ${agent.provider}` : agent.name,\n values: agentDaily.get(`${agent.name}\\0${agent.provider}`) ?? Array(days).fill(0),\n })),\n models: [...models.values()].sort(byTokens),\n recordCount,\n startDate: daily[0].date,\n endDate: daily[daily.length - 1].date,\n };\n}\n"},{"path":"components/agents/usage-provider-mark.tsx","type":"registry:component","target":"@components/agents/usage-provider-mark.tsx","content":"import { cn } from \"@/lib/utils\";\n\n/** Recognizable provider marks for the included coding-agent example. */\nexport function UsageProviderMark({\n provider,\n className,\n}: {\n provider?: string;\n className?: string;\n}) {\n const name = provider?.trim().toLowerCase();\n if (name !== \"openai\" && name !== \"anthropic\") return null;\n\n return (\n \n \n \n );\n}\n\nconst OPENAI_MARK = \"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\";\nconst CLAUDE_MARK = \"m4.714 15.956 4.718-2.648.079-.23-.08-.128h-.23l-.79-.048-2.695-.073-2.337-.097-2.265-.122-.57-.121-.535-.704.055-.353.48-.321.685.06 1.518.104 2.277.157 1.651.098 2.447.255h.389l.054-.158-.133-.097-.103-.098-2.356-1.596-2.55-1.688-1.336-.972-.722-.491L2 6.223l-.158-1.008.655-.722.88.06.225.061.893.686 1.906 1.476 2.49 1.833.364.304.146-.104.018-.072-.164-.274-1.354-2.446-1.445-2.49-.644-1.032-.17-.619a2.972 2.972 0 0 1-.103-.729L6.287.133 6.7 0l.995.134.42.364.619 1.415L9.735 4.14l1.555 3.03.455.898.243.832.09.255h.159V9.01l.127-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.583.28.48.685-.067.444-.286 1.851-.558 2.903-.365 1.942h.213l.243-.242.983-1.306 1.652-2.064.728-.82.85-.904.547-.431h1.032l.759 1.129-.34 1.166-1.063 1.347-.88 1.142-1.263 1.7-.79 1.36.074.11.188-.02 2.853-.606 1.542-.28 1.84-.315.832.388.09.395-.327.807-1.967.486-2.307.462-3.436.813-.043.03.049.061 1.548.146.662.036h1.62l3.018.225.79.522.473.638-.08.485-1.213.62-1.64-.389-3.825-.91-1.31-.329h-.183v.11l1.093 1.068 2.003 1.81 2.508 2.33.127.578-.321.455-.34-.049-2.204-1.657-.85-.747-1.925-1.62h-.127v.17l.443.649 2.343 3.521.122 1.08-.17.353-.607.213-.668-.122-1.372-1.924-1.415-2.168-1.141-1.943-.14.08-.674 7.254-.316.37-.728.28-.607-.461-.322-.747.322-1.476.388-1.924.316-1.53.285-1.9.17-.632-.012-.042-.14.018-1.432 1.967-2.18 2.945-1.724 1.845-.413.164-.716-.37.066-.662.401-.589 2.386-3.036 1.439-1.882.929-1.086-.006-.158h-.055L4.138 18.56l-1.13.146-.485-.456.06-.746.231-.243 1.907-1.312Z\";\n"},{"path":"lib/ease.ts","type":"registry:lib","target":"@lib/ease.ts","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n type: \"spring\",\n stiffness: 460,\n damping: 30,\n mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n type: \"spring\",\n stiffness: 420,\n damping: 40,\n mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n type: \"spring\",\n stiffness: 360,\n damping: 32,\n mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n stiffness: 200,\n damping: 15,\n mass: 0.3,\n} as const;\n\n/** Dragged handles and fills (sliders) — critically damped `useSpring` config,\n * so the value follows the pointer butterily and never rebounds off an end. */\nexport const SPRING_GLIDE = {\n stiffness: 700,\n damping: 50,\n mass: 0.5,\n} as const;\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"}]}