50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T5237,"use client"; // www.agentui.pro/components/agents/usage-dashboard import { motion, useReducedMotion } from "motion/react"; import { type KeyboardEvent, type PointerEvent, useId, useMemo, useState } from "react"; import { SPRING_LAYOUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; import { summarizeUsage, type DailyUsage, type UsageBreakdown, type UsageRecord, type UsageTotals, } from "./usage-dashboard-data"; import { UsageProviderMark } from "./usage-provider-mark"; export type { UsageRecord } from "./usage-dashboard-data"; export interface UsageDashboardProps { records: UsageRecord[]; title?: string; /** Controlled range, in UTC calendar days. */ range?: 7 | 30; defaultRange?: 7 | 30; onRangeChange?: (range: 7 | 30) => void; className?: string; } type AgentSeries = { name: string; values: number[] }; const seriesColors = [ "var(--usage-first)", "var(--usage-second)", "var(--usage-third)", "var(--usage-fourth)", ]; const compact = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1, }); const integer = new Intl.NumberFormat("en-US"); const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2, maximumFractionDigits: 2, }); function formatMoney(value: number) { return value > 0 && value < 0.01 ? "<$0.01" : money.format(value); } function formatDate(date: string, options: Intl.DateTimeFormatOptions) { return new Intl.DateTimeFormat("en-US", { timeZone: "UTC", ...options }).format( new Date(`${date}T00:00:00.000Z`), ); } function tokenCount(totals: UsageTotals) { return totals.inputTokens + totals.outputTokens; } function chartPath(values: number[], max: number) { return values .map((value, index) => { const x = 46 + (index / Math.max(values.length - 1, 1)) * 684; const y = 22 + 178 * (1 - value / max); return `${index === 0 ? "M" : "L"}${x.toFixed(2)} ${y.toFixed(2)}`; }) .join(" "); } function AgentChart({ daily, series, }: { daily: DailyUsage[]; series: AgentSeries[]; }) { const gradientId = useId().replaceAll(":", ""); const [activeIndex, setActiveIndex] = useState(null); const peak = Math.max(1, ...series.flatMap((item) => item.values)); const step = 10 ** Math.floor(Math.log10(peak)); const max = Math.ceil((peak * 1.16) / step) * step; const activeDay = activeIndex === null ? null : daily[activeIndex]; const activeX = activeIndex === null ? 0 : 46 + (activeIndex / Math.max(daily.length - 1, 1)) * 684; const labels = [0, Math.floor((daily.length - 1) / 2), daily.length - 1]; const inspectPointer = (event: PointerEvent) => { const bounds = event.currentTarget.getBoundingClientRect(); const plotX = ((event.clientX - bounds.left) / bounds.width) * 760; const index = Math.round(((plotX - 46) / 684) * (daily.length - 1)); setActiveIndex(Math.max(0, Math.min(daily.length - 1, index))); }; const inspectKeyboard = (event: KeyboardEvent) => { if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return; event.preventDefault(); setActiveIndex((previous) => { if (event.key === "Home") return 0; if (event.key === "End") return daily.length - 1; const current = previous ?? daily.length - 1; return Math.max(0, Math.min(daily.length - 1, current + (event.key === "ArrowRight" ? 1 : -1))); }); }; return (

Daily processed tokens

{series.map((item, index) => ( {item.name} ))}

{activeDay ? (

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

{series.map((item) => (

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

))}

) : (

Inspect a day

)}

Use the Day tab in Breakdown for exact daily values.

); } function AgentSummary({ agents, totals }: { agents: UsageBreakdown[]; totals: UsageTotals }) { return (

Processed tokens

{compact.format(tokenCount(totals))}

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

{agent.name} {compact.format(tokenCount(agent))}

{agent.provider} · {Math.round((tokenCount(agent) / Math.max(tokenCount(totals), 1)) * 100)}% {formatMoney(agent.costUsd)}

); } function Total({ label, value }: { label: string; value: string }) { return (

{label}

{value}

); } function Breakdown({ models, daily, totals, reduceMotion, layoutId, view, onViewChange, }: { models: UsageBreakdown[]; daily: DailyUsage[]; totals: UsageTotals; reduceMotion: boolean; layoutId: string; view: "model" | "day"; onViewChange: (view: "model" | "day") => void; }) { const [dayPage, setDayPage] = useState(0); const pageCount = Math.ceil(daily.length / 7); const pageIndex = Math.min(dayPage, pageCount - 1); const pageEnd = daily.length - pageIndex * 7; const visibleDays = daily.slice(Math.max(0, pageEnd - 7), pageEnd); return (

Breakdown

Breakdown view {(["model", "day"] as const).map((option) => ( ))}

{view === "model" ? ( {models.map((model) => ( ))}

Model	Share	Cost	Tokens
{model.name}{model.provider}	{Math.round((tokenCount(model) / Math.max(tokenCount(totals), 1)) * 100)}%	{formatMoney(model.costUsd)}	{compact.format(tokenCount(model))}

) : (

{visibleDays.map((day) => ( ))}

Day · UTC	Input	Output	Cost	Tokens
{formatDate(day.date, { month: "short", day: "numeric" })}	{integer.format(day.inputTokens)}	{integer.format(day.outputTokens)}	{formatMoney(day.costUsd)}	{compact.format(tokenCount(day))}

{pageCount > 1 && (

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

)}

); } /** Provider-billed usage overview. Pass real per-day records; the component never estimates prices. */ export function UsageDashboard({ records, title = "Usage overview", range, defaultRange = 7, onRangeChange, className, }: UsageDashboardProps) { const reduceMotion = useReducedMotion() ?? false; const rangeId = useId(); const breakdownId = useId(); const [localRange, setLocalRange] = useState<7 | 30>(defaultRange); const [breakdownView, setBreakdownView] = useState<"model" | "day">("model"); const selectedRange = range ?? localRange; const usage = useMemo(() => summarizeUsage(records, selectedRange), [records, selectedRange]); const changeRange = (next: 7 | 30) => { if (range === undefined) setLocalRange(next); onRangeChange?.(next); }; return (

{title}

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

Usage period {([7, 30] as const).map((days) => ( ))}

{!usage || usage.recordCount === 0 ? (

No usage in this period

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

) : (

Totals

)}

); } 53:T1486,export interface UsageRecord { /** UTC calendar day in YYYY-MM-DD format. */ date: string; provider: string; model: string; /** Optional coding agent or client, such as Codex or Claude Code. */ agent?: string; /** Input includes cached input; do not add cachedInputTokens to it. */ inputTokens: number; cachedInputTokens?: number; outputTokens: number; requests: number; /** Billed amount from the provider, in USD. No price is inferred. */ costUsd: number; } export interface UsageTotals { inputTokens: number; cachedInputTokens: number; outputTokens: number; requests: number; costUsd: number; } export interface DailyUsage extends UsageTotals { date: string; } export interface UsageBreakdown extends UsageTotals { name: string; provider?: string; } const DAY_MS = 86_400_000; function dayStamp(value: string): number | null { if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return null; const stamp = Date.parse(`${value}T00:00:00.000Z`); return Number.isFinite(stamp) && new Date(stamp).toISOString().slice(0, 10) === value ? stamp : null; } function isValidRecord(record: UsageRecord): boolean { const values = [ record.inputTokens, record.cachedInputTokens ?? 0, record.outputTokens, record.requests, record.costUsd, ]; return ( dayStamp(record.date) !== null && record.provider.trim().length > 0 && record.model.trim().length > 0 && (record.agent === undefined || record.agent.trim().length > 0) && values.every((value) => Number.isFinite(value) && value >= 0) && values.slice(0, 4).every(Number.isInteger) && (record.cachedInputTokens ?? 0) <= record.inputTokens ); } function emptyTotals(): UsageTotals { return { inputTokens: 0, cachedInputTokens: 0, outputTokens: 0, requests: 0, costUsd: 0 }; } function addTotals(target: UsageTotals, record: UsageRecord): void { target.inputTokens += record.inputTokens; target.cachedInputTokens += record.cachedInputTokens ?? 0; target.outputTokens += record.outputTokens; target.requests += record.requests; target.costUsd += record.costUsd; } /** Aggregates a complete UTC window, including zero-use days. Never estimates cost. */ export function summarizeUsage(records: UsageRecord[], days: 7 | 30) { const valid = records.filter(isValidRecord); const latest = valid.reduce((max, record) => { const stamp = dayStamp(record.date); return stamp === null ? max : max === null ? stamp : Math.max(max, stamp); }, null); if (latest === null) return null; const first = latest - (days - 1) * DAY_MS; const daily: DailyUsage[] = Array.from({ length: days }, (_, index) => ({ date: new Date(first + index * DAY_MS).toISOString().slice(0, 10), ...emptyTotals(), })); const totals = emptyTotals(); const providers = new Map(); const agents = new Map(); const agentDaily = new Map(); const models = new Map(); let recordCount = 0; for (const record of valid) { const stamp = dayStamp(record.date) ?? 0; if (stamp < first || stamp > latest) continue; recordCount += 1; addTotals(daily[(stamp - first) / DAY_MS], record); addTotals(totals, record); let provider = providers.get(record.provider); if (!provider) { provider = { name: record.provider, ...emptyTotals() }; providers.set(record.provider, provider); } addTotals(provider, record); const agentName = record.agent ?? record.provider; const agentKey = `${agentName}\0${record.provider}`; let agent = agents.get(agentKey); if (!agent) { agent = { name: agentName, provider: record.provider, ...emptyTotals() }; agents.set(agentKey, agent); } addTotals(agent, record); let dailyTokens = agentDaily.get(agentKey); if (!dailyTokens) { dailyTokens = Array(days).fill(0); agentDaily.set(agentKey, dailyTokens); } dailyTokens[(stamp - first) / DAY_MS] += record.inputTokens + record.outputTokens; const key = `${record.provider}\0${record.model}`; let model = models.get(key); if (!model) { model = { name: record.model, provider: record.provider, ...emptyTotals() }; models.set(key, model); } addTotals(model, record); } const byTokens = (a: UsageBreakdown, b: UsageBreakdown) => b.inputTokens + b.outputTokens - (a.inputTokens + a.outputTokens) || a.name.localeCompare(b.name); const sortedAgents = [...agents.values()].sort(byTokens); const agentNameCounts = new Map(); for (const agent of sortedAgents) { agentNameCounts.set(agent.name, (agentNameCounts.get(agent.name) ?? 0) + 1); } return { daily, totals, providers: [...providers.values()].sort(byTokens), agents: sortedAgents, agentSeries: sortedAgents.map((agent) => ({ name: (agentNameCounts.get(agent.name) ?? 0) > 1 ? `${agent.name} · ${agent.provider}` : agent.name, values: agentDaily.get(`${agent.name}\0${agent.provider}`) ?? Array(days).fill(0), })), models: [...models.values()].sort(byTokens), recordCount, startDate: daily[0].date, endDate: daily[daily.length - 1].date, }; } 54:Td3a,import { cn } from "@/lib/utils"; /** Recognizable provider marks for the included coding-agent example. */ export function UsageProviderMark({ provider, className, }: { provider?: string; className?: string; }) { const name = provider?.trim().toLowerCase(); if (name !== "openai" && name !== "anthropic") return null; return ( ); } const 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"; const 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"; 55:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@agentui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/agents/usage-dashboard.tsx","content":"$52","type":"registry:component","target":"@components/agents/usage-dashboard.tsx"},{"path":"components/agents/usage-dashboard-data.ts","content":"$53","type":"registry:component","target":"@components/agents/usage-dashboard-data.ts"},{"path":"components/agents/usage-provider-mark.tsx","content":"$54","type":"registry:component","target":"@components/agents/usage-provider-mark.tsx"},{"path":"lib/ease.ts","content":"$55","type":"registry:lib","target":"@lib/ease.ts"},{"path":"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","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]