diff --git a/src/lib/components/admin/Analytics/Dashboard.svelte b/src/lib/components/admin/Analytics/Dashboard.svelte
index 97331f1ec3..573019d8d3 100644
--- a/src/lib/components/admin/Analytics/Dashboard.svelte
+++ b/src/lib/components/admin/Analytics/Dashboard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, getContext } from 'svelte';
+	import dayjs from 'dayjs';
 	import { models } from '$lib/stores';
 	import {
 		getSummary,
@@ -12,24 +13,29 @@
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
-	import ChartLine from './ChartLine.svelte';
+	import UsageChart, {
+		usageShare,
+		modelColor,
+		defaultInterval,
+		aggregateUsage,
+		type UsageInterval
+	} from './UsageChart.svelte';
 	import AnalyticsModelModal from './AnalyticsModelModal.svelte';
-	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import ProfilePreview from '$lib/components/channel/Messages/Message/ProfilePreview.svelte';
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
 	import { formatNumber } from '$lib/utils';
-	import { goto } from '$app/navigation';
-	import type { Instance } from 'tippy.js';
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<any>('i18n');
 
 	// Time period - persist in localStorage
 	let selectedPeriod =
 		(typeof localStorage !== 'undefined' && localStorage.getItem('analyticsPeriod')) || '7d';
-	let granularity: '10m' | 'hourly' | 'daily';
-	$: granularity =
-		selectedPeriod === '24h' ? '10m' : ['7d', '30d'].includes(selectedPeriod) ? 'hourly' : 'daily';
-	let selectedMetric: 'messages' | 'tokens' = 'messages';
+	let granularity: UsageInterval;
+	$: granularity = defaultInterval(selectedPeriod);
+	let selectedMetric: 'messages' | 'tokens' = 'tokens';
+	let chartModel: string | null = null;
+	let chartView: 'volume' | 'activity' = 'volume';
+	$: modelNames = Object.fromEntries(modelStats.map((model) => [model.model_id, model.name]));
 
 	// Custom date range (YYYY-MM-DD) - persist in localStorage
 	let customStart =
@@ -42,6 +48,8 @@
 		{ value: '7d', label: $i18n.t('Last 7 days') },
 		{ value: '30d', label: $i18n.t('Last 30 days') },
 		{ value: '90d', label: $i18n.t('Last 90 days') },
+		{ value: 'ytd', label: $i18n.t('Year to date') },
+		{ value: '1y', label: $i18n.t('Last 12 months') },
 		{ value: 'all', label: $i18n.t('All time') },
 		{ value: 'custom', label: $i18n.t('Custom range') }
 	];
@@ -62,6 +70,20 @@
 				return { start: now - 30 * day, end: now };
 			case '90d':
 				return { start: now - 90 * day, end: now };
+			case 'ytd':
+				return {
+					start: dayjs(now * 1000)
+						.startOf('year')
+						.unix(),
+					end: now
+				};
+			case '1y':
+				return {
+					start: dayjs(now * 1000)
+						.subtract(1, 'year')
+						.unix(),
+					end: now
+				};
 			case 'custom': {
 				// Parse YYYY-MM-DD inputs; end date is inclusive (covers the full day)
 				const start = customStart ? Math.floor(new Date(customStart).getTime() / 1000) : null;
@@ -91,7 +113,7 @@
 		count: number;
 		unique_users?: number;
 		unique_chats?: number;
-		name?: string;
+		name: string;
 	}> = [];
 	let userStats: Array<
 		{ user_id: string; name?: string; email?: string; count: number } & Partial<TokenUsage>
@@ -99,18 +121,23 @@
 	let dailyStats: Array<{ date: string; models: Record<string, number> }> = [];
 	let tokenStats: Record<string, TokenUsage> = {};
 	let totalTokens = { input: 0, output: 0, total: 0 };
-	let tokenTooltip: Instance | null = null;
+	$: metricTotal = selectedMetric === 'tokens' ? totalTokens.total : summary.total_messages;
 
 	let loading = true;
+	let mounted = false;
+	let loadError = false;
+	let loadId = 0;
+	$: validRange =
+		selectedPeriod !== 'custom' || Boolean(customStart && customEnd && customStart <= customEnd);
 
 	// Selected model for drill-down
 	let selectedModel: { id: string; name: string } | null = null;
 	let showModelModal = false;
 
 	// Sorting
-	let modelOrderBy = 'count';
+	let modelOrderBy = 'total_tokens';
 	let modelDirection: 'asc' | 'desc' = 'desc';
-	let userOrderBy = 'count';
+	let userOrderBy = 'total_tokens';
 	let userDirection: 'asc' | 'desc' = 'desc';
 
 	const toggleModelSort = (key: string) => {
@@ -132,27 +159,42 @@
 	};
 
 	const loadDashboard = async () => {
+		const id = ++loadId;
 		loading = true;
+		loadError = false;
 		try {
 			const { start, end } = getDateRange(selectedPeriod);
 			const [summaryRes, modelsRes, usersRes, dailyRes, tokensRes] = await Promise.all([
 				getSummary(localStorage.token, start, end, selectedGroupId),
 				getModelAnalytics(localStorage.token, start, end, selectedGroupId),
 				getUserAnalytics(localStorage.token, start, end, 50, selectedGroupId),
-				getDailyStats(localStorage.token, start, end, granularity, selectedGroupId, selectedMetric),
+				getDailyStats(
+					localStorage.token,
+					start,
+					end,
+					granularity === '3h' || granularity === '6h' ? 'hourly' : granularity,
+					selectedGroupId,
+					selectedMetric
+				),
 				getTokenUsage(localStorage.token, start, end, selectedGroupId)
 			]);
 
-			summary = summaryRes ?? summary;
+			if (id !== loadId) return;
+			if (!summaryRes || !modelsRes || !usersRes || !dailyRes || !tokensRes) {
+				throw new Error('Incomplete analytics response');
+			}
+			summary = summaryRes;
 
 			const modelsMap = new Map($models.map((m) => [m.id, m.name || m.id]));
-			modelStats = (modelsRes?.models ?? []).map((entry) => ({
-				...entry,
-				name: modelsMap.get(entry.model_id) || entry.model_id
-			}));
+			modelStats = (modelsRes?.models ?? []).map(
+				(entry: Omit<(typeof modelStats)[number], 'name'>) => ({
+					...entry,
+					name: modelsMap.get(entry.model_id) || entry.model_id
+				})
+			);
 
 			userStats = usersRes?.users ?? [];
-			dailyStats = dailyRes?.data ?? [];
+			dailyStats = aggregateUsage(dailyRes?.data ?? [], granularity);
 
 			// Process token data
 			if (tokensRes) {
@@ -172,24 +214,28 @@
 			}
 		} catch (err) {
 			console.error('Dashboard load failed:', err);
+			if (id === loadId) loadError = true;
+		} finally {
+			if (id === loadId) loading = false;
 		}
-		loading = false;
 	};
 
-	// Reload when the period, group, or custom range changes.
-	// In custom mode, wait until both dates are set to avoid a half-specified query.
-	$: if (selectedPeriod === 'custom' && !(customStart && customEnd)) {
-		loading = false;
-	} else if (selectedPeriod) {
-		// reference customStart/customEnd so this block reruns when they change
+	$: if (mounted) {
+		selectedPeriod;
 		customStart;
 		customEnd;
 		selectedGroupId;
 		selectedMetric;
-		loadDashboard();
+		granularity;
+		if (validRange) loadDashboard();
+		else {
+			++loadId;
+			loading = false;
+		}
 	}
 
 	onMount(async () => {
+		mounted = true;
 		// Load groups for filter
 		try {
 			const res = await getGroups(localStorage.token);
@@ -203,6 +249,11 @@
 		if (modelOrderBy === 'name') {
 			return modelDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 		}
+		if (modelOrderBy === 'percentage') {
+			const value = (m: (typeof modelStats)[number]) =>
+				selectedMetric === 'tokens' ? (tokenStats[m.model_id]?.total_tokens ?? 0) : m.count;
+			return modelDirection === 'asc' ? value(a) - value(b) : value(b) - value(a);
+		}
 		if (
 			modelOrderBy === 'input_tokens' ||
 			modelOrderBy === 'output_tokens' ||
@@ -231,6 +282,11 @@
 			const nameB = b.name || b.user_id;
 			return userDirection === 'asc' ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
 		}
+		if (userOrderBy === 'percentage') {
+			const aValue = selectedMetric === 'tokens' ? (a.total_tokens ?? 0) : a.count;
+			const bValue = selectedMetric === 'tokens' ? (b.total_tokens ?? 0) : b.count;
+			return userDirection === 'asc' ? aValue - bValue : bValue - aValue;
+		}
 		if (
 			userOrderBy === 'input_tokens' ||
 			userOrderBy === 'output_tokens' ||
@@ -243,7 +299,12 @@
 		return userDirection === 'asc' ? a.count - b.count : b.count - a.count;
 	});
 
-	$: totalModelMessages = modelStats.reduce((sum, m) => sum + m.count, 0);
+	$: metricLabel = selectedMetric === 'tokens' ? $i18n.t('Tokens') : $i18n.t('Messages');
+	const selectMetric = (metric: 'tokens' | 'messages') => {
+		selectedMetric = metric;
+		modelOrderBy = userOrderBy = metric === 'tokens' ? 'total_tokens' : 'count';
+		modelDirection = userDirection = 'desc';
+	};
 
 	// Persist period selection
 	$: if (typeof localStorage !== 'undefined' && selectedPeriod) {
@@ -257,20 +318,15 @@
 	}
 </script>
 
-<svelte:window
-	on:keydown={(event) => {
-		if (event.key === 'Escape') tokenTooltip?.hide();
-	}}
-/>
-
-<div class="flex items-center justify-between mb-2 gap-2">
-	<h2 class="text-sm font-medium text-gray-900 dark:text-white shrink-0">
+<div class="flex flex-wrap items-center justify-between mb-3 gap-x-4 gap-y-2">
+	<h2 class="text-sm font-normal text-gray-900 dark:text-white shrink-0">
 		{$i18n.t('Analytics')}
 	</h2>
 	<div class="flex items-center gap-2 flex-wrap justify-end min-w-0">
 		{#if groups.length > 0}
 			<select
 				bind:value={selectedGroupId}
+				aria-label={$i18n.t('User group')}
 				class="w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-none text-right"
 			>
 				<option value={null}>{$i18n.t('All Users')}</option>
@@ -283,6 +339,7 @@
 			<input
 				type="date"
 				bind:value={customStart}
+				aria-label={$i18n.t('Start date')}
 				max={customEnd || undefined}
 				class="w-fit rounded-sm px-2 text-xs bg-transparent outline-none dark:scheme-dark"
 			/>
@@ -290,12 +347,14 @@
 			<input
 				type="date"
 				bind:value={customEnd}
+				aria-label={$i18n.t('End date')}
 				min={customStart || undefined}
 				class="w-fit rounded-sm px-2 text-xs bg-transparent outline-none dark:scheme-dark"
 			/>
 		{/if}
 		<select
 			bind:value={selectedPeriod}
+			aria-label={$i18n.t('Date range')}
 			class="w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-none text-right"
 		>
 			{#each periods as period}
@@ -313,212 +372,134 @@
 	endDate={getDateRange(selectedPeriod).end}
 />
 
-<!-- Summary stats -->
-{#if !loading}
-	<div class="flex gap-3 text-xs text-gray-500 dark:text-gray-400 px-0.5 pb-2">
-		<span
-			><span class="font-normal text-gray-900 dark:text-gray-300"
-				>{summary.total_messages.toLocaleString()}</span
-			>
-			{$i18n.t('messages')}</span
-		>
-		<Tooltip
-			as="button"
-			className="whitespace-nowrap rounded-sm cursor-pointer hover:underline decoration-dotted underline-offset-4 focus-visible:outline focus-visible:outline-offset-2"
-			placement="bottom"
-			interactive
-			tippyOptions={{
-				trigger: 'mouseenter focus click',
-				appendTo: () => document.body,
-				aria: { content: 'describedby', expanded: true },
-				onCreate: (instance) => (tokenTooltip = instance),
-				onDestroy: () => (tokenTooltip = null)
-			}}
-			content={`<div class="p-1 text-left">
-				<div class="flex justify-between gap-6"><span>${$i18n.t('Input')}</span><span class="tabular-nums">${totalTokens.input.toLocaleString()}</span></div>
-				<div class="flex justify-between gap-6 mt-1"><span>${$i18n.t('Output')}</span><span class="tabular-nums">${totalTokens.output.toLocaleString()}</span></div>
-				<div class="mt-2 max-w-56 text-gray-400">${$i18n.t('Token counts are estimates and may not reflect actual API usage')}</div>
-			</div>`}
-		>
-			<span
-				><span class="font-normal text-gray-900 dark:text-gray-300"
-					>{formatNumber(totalTokens.total)}</span
+{#if !loading && !loadError && validRange}
+	<dl
+		class="flex flex-wrap items-baseline gap-x-4 gap-y-1 text-xs text-gray-500 dark:text-gray-400"
+	>
+		{#each [{ label: $i18n.t('Tokens'), value: formatNumber(totalTokens.total), exact: totalTokens.total }, { label: $i18n.t('Input'), value: formatNumber(totalTokens.input), exact: totalTokens.input }, { label: $i18n.t('Output'), value: formatNumber(totalTokens.output), exact: totalTokens.output }, { label: $i18n.t('Messages'), value: summary.total_messages.toLocaleString(), exact: summary.total_messages }, { label: $i18n.t('Chats'), value: summary.total_chats.toLocaleString(), exact: summary.total_chats }, { label: $i18n.t('Users'), value: summary.total_users.toLocaleString(), exact: summary.total_users }] as metric}
+			<div class="flex items-baseline gap-1.5 whitespace-nowrap">
+				<dt>{metric.label}</dt>
+				<dd
+					class="tabular-nums text-gray-900 dark:text-gray-200"
+					title={metric.exact.toLocaleString()}
 				>
-				{$i18n.t('tokens')}</span
-			>
-		</Tooltip>
-		<span
-			><span class="font-normal text-gray-900 dark:text-gray-300"
-				>{summary.total_chats.toLocaleString()}</span
-			>
-			{$i18n.t('chats')}</span
-		>
-		<span
-			><span class="font-normal text-gray-900 dark:text-gray-300">{summary.total_users}</span>
-			{$i18n.t('users')}</span
-		>
-	</div>
-
-	<!-- Usage chart -->
-	{#if dailyStats.length > 1}
-		{@const allModels = [...new Set(dailyStats.flatMap((d) => Object.keys(d.models || {})))]}
-		{@const topModels = allModels.slice(0, 8)}
-		{@const chartColors = [
-			'#3b82f6',
-			'#10b981',
-			'#f59e0b',
-			'#ef4444',
-			'#8b5cf6',
-			'#ec4899',
-			'#06b6d4',
-			'#84cc16'
-		]}
-		{@const periodMap = { '24h': 'hour', '7d': 'week', '30d': 'month', '90d': 'year', all: 'all' }}
-		<div class="mb-4">
-			<select
-				bind:value={selectedMetric}
-				aria-label={$i18n.t('Chart metric')}
-				class="text-xs font-normal text-gray-600 dark:text-gray-400 mb-2 pl-0.5 pr-8 rounded-sm bg-transparent"
-			>
-				<option value="messages">
-					{granularity === '10m'
-						? $i18n.t('10-Minute Messages')
-						: granularity === 'hourly'
-							? $i18n.t('Hourly Messages')
-							: $i18n.t('Daily Messages')}
-				</option>
-				<option value="tokens">
-					{granularity === '10m'
-						? $i18n.t('10-Minute Tokens')
-						: granularity === 'hourly'
-							? $i18n.t('Hourly Tokens')
-							: $i18n.t('Daily Tokens')}
-				</option>
-			</select>
-			<ChartLine
-				data={dailyStats}
-				models={topModels}
-				colors={chartColors}
-				height={200}
-				period={periodMap[selectedPeriod] || 'week'}
-			/>
+					{metric.value}
+				</dd>
+			</div>
+		{/each}
+	</dl>
+	<section class="mt-3 min-w-0" aria-label={$i18n.t('Usage over time')}>
+		<div class="mb-2 flex flex-wrap items-center justify-between gap-x-4 gap-y-2 text-xs">
+			<div class="flex items-center gap-3" aria-label={$i18n.t('Usage metric')}>
+				{#each [{ key: 'tokens', label: $i18n.t('Tokens') }, { key: 'messages', label: $i18n.t('Messages') }] as metric}
+					<button
+						type="button"
+						class="analytics-tab"
+						class:tab-selected={selectedMetric === metric.key}
+						aria-pressed={selectedMetric === metric.key}
+						on:click={() => selectMetric(metric.key as 'tokens' | 'messages')}
+						>{metric.label}</button
+					>
+				{/each}
+			</div>
+			<div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+				<div class="flex items-center gap-3" aria-label={$i18n.t('Chart view')}>
+					{#each [{ key: 'volume', label: $i18n.t('Volume') }, { key: 'activity', label: $i18n.t('Activity') }] as view}
+						<button
+							type="button"
+							class="analytics-tab"
+							class:tab-selected={chartView === view.key}
+							aria-pressed={chartView === view.key}
+							on:click={() => (chartView = view.key as 'volume' | 'activity')}>{view.label}</button
+						>
+					{/each}
+				</div>
+				<select
+					bind:value={granularity}
+					aria-label={$i18n.t('Chart interval')}
+					class="w-fit pr-5 py-1 text-xs bg-transparent outline-none text-gray-500 dark:text-gray-400"
+				>
+					{#if selectedPeriod === '24h'}<option value="10m">{$i18n.t('10 min')}</option>{/if}
+					{#if ['24h', '7d', '30d'].includes(selectedPeriod)}<option value="hourly"
+							>{$i18n.t('Hourly')}</option
+						>{/if}
+					{#if selectedPeriod === '30d'}
+						<option value="3h">{$i18n.t('3 hours')}</option>
+						<option value="6h">{$i18n.t('6 hours')}</option>
+					{/if}
+					<option value="daily">{$i18n.t('Daily')}</option>
+				</select>
+			</div>
 		</div>
-	{/if}
+		{#if dailyStats.length && summary.total_messages > 0}
+			<UsageChart
+				data={dailyStats}
+				{granularity}
+				{metricLabel}
+				{modelNames}
+				bind:selectedModel={chartModel}
+				view={chartView}
+			/>
+		{:else}<div
+				class="h-40 flex items-center justify-center text-xs text-gray-500 dark:text-gray-400"
+			>
+				{$i18n.t('No activity in this period')}
+			</div>{/if}
+	</section>
 {/if}
 
-{#if loading}
+{#if !validRange}
+	<div class="my-10 text-center text-xs text-gray-500 dark:text-gray-400">
+		{$i18n.t('Choose a valid start and end date.')}
+	</div>
+{:else if loadError}
+	<div role="alert" class="my-10 text-center text-xs text-gray-500 dark:text-gray-400">
+		{$i18n.t('Unable to load analytics. Please try again.')}
+		<button class="ml-2 underline underline-offset-2" on:click={loadDashboard}
+			>{$i18n.t('Retry')}</button
+		>
+	</div>
+{:else if loading}
 	<div class="my-10 flex justify-center">
 		<Spinner className="size-5" />
 	</div>
 {:else}
-	<div class="mb-2">
-		<div class="inline-flex rounded-full bg-gray-100/80 p-0.5 dark:bg-gray-800/80 backdrop-blur-sm">
-			{#each [{ key: 'models', label: $i18n.t('Models') }, { key: 'users', label: $i18n.t('Users') }] as tab}
-				<button
-					type="button"
-					aria-pressed={selectedLeaderboard === tab.key}
-					class="rounded-full transition-all duration-200 px-2.5 py-0.5 text-xs font-normal {selectedLeaderboard ===
-					tab.key
-						? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white'
-						: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
-					on:click={() => (selectedLeaderboard = tab.key)}>{tab.label}</button
-				>
-			{/each}
+	<div class="mt-4 min-w-0">
+		<div class="mb-2 flex items-center gap-3">
+			<div class="flex items-center gap-3">
+				{#each [{ key: 'models', label: $i18n.t('Models') }, { key: 'users', label: $i18n.t('Users') }] as tab}
+					<button
+						type="button"
+						class="analytics-tab"
+						class:tab-selected={selectedLeaderboard === tab.key}
+						aria-pressed={selectedLeaderboard === tab.key}
+						on:click={() => (selectedLeaderboard = tab.key)}>{tab.label}</button
+					>
+				{/each}
+			</div>
 		</div>
-	</div>
-	<div class="min-w-0">
-		{#if selectedLeaderboard === 'models'}
-			<!-- Model Usage Table -->
-			<!-- {$i18n.t('Model Usage')} -->
-			<div>
-				<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
-					<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto">
-						<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
-							<tr class="border-b-[1.5px] border-gray-50 dark:border-gray-850/30">
-								<th scope="col" class="px-2.5 py-2 w-8">#</th>
-								<th
-									scope="col"
-									class="px-2.5 py-2 cursor-pointer select-none"
-									on:click={() => toggleModelSort('name')}
-								>
-									<div class="flex gap-1.5 items-center">
-										{$i18n.t('Model')}
-										{#if modelOrderBy === 'name'}
-											<span class="font-normal">
-												{#if modelDirection === 'asc'}<ChevronUp
-														className="size-2"
-													/>{:else}<ChevronDown className="size-2" />{/if}
-											</span>
-										{:else}
-											<span class="invisible"><ChevronUp className="size-2" /></span>
-										{/if}
-									</div>
-								</th>
-								<th
-									scope="col"
-									class="px-2.5 py-2 cursor-pointer select-none text-right"
-									on:click={() => toggleModelSort('count')}
-								>
-									<div class="flex gap-1.5 items-center justify-end">
-										{$i18n.t('Messages')}
-										{#if modelOrderBy === 'count'}
-											<span class="font-normal">
-												{#if modelDirection === 'asc'}<ChevronUp
-														className="size-2"
-													/>{:else}<ChevronDown className="size-2" />{/if}
-											</span>
-										{:else}
-											<span class="invisible"><ChevronUp className="size-2" /></span>
-										{/if}
-									</div>
-								</th>
-								<th
-									scope="col"
-									class="px-2.5 py-2 cursor-pointer select-none text-right"
-									on:click={() => toggleModelSort('users')}
-								>
-									<div class="flex gap-1.5 items-center justify-end">
-										{$i18n.t('Users')}
-										{#if modelOrderBy === 'users'}
-											<span class="font-normal">
-												{#if modelDirection === 'asc'}<ChevronUp
-														className="size-2"
-													/>{:else}<ChevronDown className="size-2" />{/if}
-											</span>
-										{:else}
-											<span class="invisible"><ChevronUp className="size-2" /></span>
-										{/if}
-									</div>
-								</th>
-								<th
-									scope="col"
-									class="px-2.5 py-2 cursor-pointer select-none text-right"
-									on:click={() => toggleModelSort('chats')}
-								>
-									<div class="flex gap-1.5 items-center justify-end">
-										{$i18n.t('Chats')}
-										{#if modelOrderBy === 'chats'}
-											<span class="font-normal">
-												{#if modelDirection === 'asc'}<ChevronUp
-														className="size-2"
-													/>{:else}<ChevronDown className="size-2" />{/if}
-											</span>
-										{:else}
-											<span class="invisible"><ChevronUp className="size-2" /></span>
-										{/if}
-									</div>
-								</th>
-								<!-- {$i18n.t('Tokens')} -->
-								{#each tokenColumns as column}
+		<div class="min-w-0">
+			{#if selectedLeaderboard === 'models'}
+				<!-- Model Usage Table -->
+				<!-- {$i18n.t('Model Usage')} -->
+				<div>
+					<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
+						<table
+							class="w-full text-xs tabular-nums text-left text-gray-500 dark:text-gray-400 table-auto"
+						>
+							<thead
+								class="text-[0.6875rem] font-normal text-gray-500 bg-transparent dark:text-gray-400"
+							>
+								<tr>
+									<th scope="col" class="font-normal px-2.5 py-1.5 w-8">#</th>
 									<th
 										scope="col"
-										title={`${column.label} ${$i18n.t('tokens')}`}
-										class="px-2.5 py-2 cursor-pointer select-none text-right"
-										on:click={() => toggleModelSort(column.key)}
+										class="font-normal px-2.5 py-1.5 cursor-pointer select-none"
+										on:click={() => toggleModelSort('name')}
 									>
-										<div class="flex gap-1.5 items-center justify-end">
-											{column.label}
-											{#if modelOrderBy === column.key}
+										<div class="flex gap-1.5 items-center">
+											{$i18n.t('Model')}
+											{#if modelOrderBy === 'name'}
 												<span class="font-normal">
 													{#if modelDirection === 'asc'}<ChevronUp
 															className="size-2"
@@ -529,135 +510,198 @@
 											{/if}
 										</div>
 									</th>
-								{/each}
-								<th
-									scope="col"
-									class="px-2.5 py-2 cursor-pointer select-none text-right w-16"
-									on:click={() => toggleModelSort('percentage')}
-								>
-									<div class="flex gap-1.5 items-center justify-end">
-										%
-										{#if modelOrderBy === 'percentage'}
-											<span class="font-normal">
-												{#if modelDirection === 'asc'}<ChevronUp
-														className="size-2"
-													/>{:else}<ChevronDown className="size-2" />{/if}
-											</span>
-										{:else}
-											<span class="invisible"><ChevronUp className="size-2" /></span>
-										{/if}
-									</div>
-								</th>
-							</tr>
-						</thead>
-						<tbody>
-							{#each sortedModels as model, idx (model.model_id)}
-								<tr
-									class="dark:border-gray-850 text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-									on:click={() => {
-										selectedModel = { id: model.model_id, name: model.name };
-										showModelModal = true;
-									}}
-								>
-									<td class="px-3 py-1 text-gray-400">{idx + 1}</td>
-									<td class="px-3 py-1 font-normal text-gray-900 dark:text-white">
-										<div class="flex items-center gap-2">
-											<img
-												src="{WEBUI_API_BASE_URL}/models/model/profile/image?id={model.model_id}"
-												alt={model.name}
-												class="size-5 rounded-full object-cover shrink-0"
-												on:error={(e) => {
-													// LICENSE covers this Open WebUI fallback logo.
-													// Do not alter, remove, obscure, or replace it except as LICENSE permits:
-													// https://docs.openwebui.com/license.
-													e.target.src = '/favicon.png';
-												}}
-											/>
-											<span class="truncate max-w-[9.375rem]">{model.name}</span>
-										</div>
-									</td>
-									<td class="px-3 py-1 text-right">{model.count.toLocaleString()}</td>
-									<td class="px-3 py-1 text-right">{(model.unique_users ?? 0).toLocaleString()}</td>
-									<td class="px-3 py-1 text-right">{(model.unique_chats ?? 0).toLocaleString()}</td>
-									{#each tokenColumns as column}
-										<td class="px-3 py-1 text-right"
-											>{formatNumber(tokenStats[model.model_id]?.[column.key] ?? 0)}</td
-										>
-									{/each}
-									<td class="px-3 py-1 text-right text-gray-400">
-										{totalModelMessages > 0
-											? ((model.count / totalModelMessages) * 100).toFixed(1)
-											: 0}%
-									</td>
-								</tr>
-							{/each}
-							{#if sortedModels.length === 0}
-								<tr
-									><td colspan="9" class="px-3 py-2 text-center text-gray-400"
-										>{$i18n.t('No data')}</td
-									></tr
-								>
-							{/if}
-						</tbody>
-					</table>
-				</div>
-			</div>
-		{:else}
-			<!-- User Activity Table -->
-			<!-- {$i18n.t('User Activity')} -->
-			<div>
-				<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
-					<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto">
-						<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
-							<tr class="border-b-[1.5px] border-gray-50 dark:border-gray-850/30">
-								<th scope="col" class="px-2.5 py-2 w-8">#</th>
-								<th
-									scope="col"
-									class="px-2.5 py-2 cursor-pointer select-none"
-									on:click={() => toggleUserSort('name')}
-								>
-									<div class="flex gap-1.5 items-center">
-										{$i18n.t('User')}
-										{#if userOrderBy === 'name'}
-											<span class="font-normal">
-												{#if userDirection === 'asc'}<ChevronUp
-														className="size-2"
-													/>{:else}<ChevronDown className="size-2" />{/if}
-											</span>
-										{:else}
-											<span class="invisible"><ChevronUp className="size-2" /></span>
-										{/if}
-									</div>
-								</th>
-								<th
-									scope="col"
-									class="px-2.5 py-2 cursor-pointer select-none text-right"
-									on:click={() => toggleUserSort('count')}
-								>
-									<div class="flex gap-1.5 items-center justify-end">
-										{$i18n.t('Messages')}
-										{#if userOrderBy === 'count'}
-											<span class="font-normal">
-												{#if userDirection === 'asc'}<ChevronUp
-														className="size-2"
-													/>{:else}<ChevronDown className="size-2" />{/if}
-											</span>
-										{:else}
-											<span class="invisible"><ChevronUp className="size-2" /></span>
-										{/if}
-									</div>
-								</th>
-								<!-- {$i18n.t('Tokens')} -->
-								{#each tokenColumns as column}
 									<th
 										scope="col"
-										title={`${column.label} ${$i18n.t('tokens')}`}
-										class="px-2.5 py-2 cursor-pointer select-none text-right"
-										on:click={() => toggleUserSort(column.key)}
+										class="font-normal px-2.5 py-1.5 cursor-pointer select-none text-right"
+										on:click={() => toggleModelSort('count')}
 									>
 										<div class="flex gap-1.5 items-center justify-end">
-											{column.label}
-											{#if userOrderBy === column.key}
+											{$i18n.t('Messages')}
+											{#if modelOrderBy === 'count'}
+												<span class="font-normal">
+													{#if modelDirection === 'asc'}<ChevronUp
+															className="size-2"
+														/>{:else}<ChevronDown className="size-2" />{/if}
+												</span>
+											{:else}
+												<span class="invisible"><ChevronUp className="size-2" /></span>
+											{/if}
+										</div>
+									</th>
+									<th
+										scope="col"
+										class="font-normal px-2.5 py-1.5 cursor-pointer select-none text-right"
+										on:click={() => toggleModelSort('users')}
+									>
+										<div class="flex gap-1.5 items-center justify-end">
+											{$i18n.t('Users')}
+											{#if modelOrderBy === 'users'}
+												<span class="font-normal">
+													{#if modelDirection === 'asc'}<ChevronUp
+															className="size-2"
+														/>{:else}<ChevronDown className="size-2" />{/if}
+												</span>
+											{:else}
+												<span class="invisible"><ChevronUp className="size-2" /></span>
+											{/if}
+										</div>
+									</th>
+									<th
+										scope="col"
+										class="font-normal px-2.5 py-1.5 cursor-pointer select-none text-right"
+										on:click={() => toggleModelSort('chats')}
+									>
+										<div class="flex gap-1.5 items-center justify-end">
+											{$i18n.t('Chats')}
+											{#if modelOrderBy === 'chats'}
+												<span class="font-normal">
+													{#if modelDirection === 'asc'}<ChevronUp
+															className="size-2"
+														/>{:else}<ChevronDown className="size-2" />{/if}
+												</span>
+											{:else}
+												<span class="invisible"><ChevronUp className="size-2" /></span>
+											{/if}
+										</div>
+									</th>
+									<!-- {$i18n.t('Tokens')} -->
+									{#each tokenColumns as column}
+										<th
+											scope="col"
+											title={`${column.label} ${$i18n.t('tokens')}`}
+											class="font-normal px-2.5 py-1.5 cursor-pointer select-none text-right"
+											on:click={() => toggleModelSort(column.key)}
+										>
+											<div class="flex gap-1.5 items-center justify-end">
+												{column.label}
+												{#if modelOrderBy === column.key}
+													<span class="font-normal">
+														{#if modelDirection === 'asc'}<ChevronUp
+																className="size-2"
+															/>{:else}<ChevronDown className="size-2" />{/if}
+													</span>
+												{:else}
+													<span class="invisible"><ChevronUp className="size-2" /></span>
+												{/if}
+											</div>
+										</th>
+									{/each}
+									<th
+										scope="col"
+										class="font-normal px-2.5 py-1.5 cursor-pointer select-none text-right w-16"
+										on:click={() => toggleModelSort('percentage')}
+									>
+										<div class="flex gap-1.5 items-center justify-end">
+											{selectedMetric === 'tokens'
+												? $i18n.t('Token share')
+												: $i18n.t('Message share')}
+											{#if modelOrderBy === 'percentage'}
+												<span class="font-normal">
+													{#if modelDirection === 'asc'}<ChevronUp
+															className="size-2"
+														/>{:else}<ChevronDown className="size-2" />{/if}
+												</span>
+											{:else}
+												<span class="invisible"><ChevronUp className="size-2" /></span>
+											{/if}
+										</div>
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each sortedModels as model, idx (model.model_id)}
+									{@const value =
+										selectedMetric === 'tokens'
+											? (tokenStats[model.model_id]?.total_tokens ?? 0)
+											: model.count}
+									<tr
+										class="text-xs cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+										on:click={() => {
+											selectedModel = { id: model.model_id, name: model.name };
+											showModelModal = true;
+										}}
+									>
+										<td class="font-normal px-3 py-1.5 text-gray-400">{idx + 1}</td>
+										<td class="font-normal px-3 py-1.5 text-gray-900 dark:text-white">
+											<div class="flex items-center gap-2">
+												<img
+													src="{WEBUI_API_BASE_URL}/models/model/profile/image?id={model.model_id}"
+													alt={model.name}
+													class="size-5 rounded-full object-cover shrink-0"
+													on:error={(e) => {
+														// LICENSE covers this Open WebUI fallback logo.
+														// Do not alter, remove, obscure, or replace it except as LICENSE permits:
+														// https://docs.openwebui.com/license.
+														const image = e.currentTarget as HTMLImageElement;
+														if (!image.src.endsWith('/favicon.png')) image.src = '/favicon.png';
+													}}
+												/>
+												<span class="truncate max-w-[9.375rem]">{model.name}</span>
+											</div>
+										</td>
+										<td class="font-normal px-3 py-1.5 text-right"
+											>{model.count.toLocaleString()}</td
+										>
+										<td class="font-normal px-3 py-1.5 text-right"
+											>{(model.unique_users ?? 0).toLocaleString()}</td
+										>
+										<td class="font-normal px-3 py-1.5 text-right"
+											>{(model.unique_chats ?? 0).toLocaleString()}</td
+										>
+										{#each tokenColumns as column}
+											<td class="font-normal px-3 py-1.5 text-right"
+												>{formatNumber(tokenStats[model.model_id]?.[column.key] ?? 0)}</td
+											>
+										{/each}
+										<td class="font-normal px-3 py-1.5 text-right text-gray-400">
+											<div class="flex items-center justify-end gap-2 tabular-nums">
+												<div
+													class="h-1 w-16 bg-gray-100 dark:bg-gray-800 overflow-hidden"
+													aria-hidden="true"
+												>
+													<div
+														class="h-full"
+														style:background-color={modelColor(model.model_id)}
+														style:width={`${metricTotal > 0 ? (value / metricTotal) * 100 : 0}%`}
+													></div>
+												</div>
+												<span class="w-12">{usageShare(value, metricTotal)}</span>
+											</div>
+										</td>
+									</tr>
+								{/each}
+								{#if sortedModels.length === 0}
+									<tr
+										><td colspan="9" class="font-normal px-3 py-1.5 text-center text-gray-400"
+											>{$i18n.t('No data')}</td
+										></tr
+									>
+								{/if}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			{:else}
+				<!-- User Activity Table -->
+				<!-- {$i18n.t('User Activity')} -->
+				<div>
+					<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
+						<table
+							class="w-full text-xs tabular-nums text-left text-gray-500 dark:text-gray-400 table-auto"
+						>
+							<thead
+								class="text-[0.6875rem] font-normal text-gray-500 bg-transparent dark:text-gray-400"
+							>
+								<tr>
+									<th scope="col" class="font-normal px-2.5 py-1.5 w-8">#</th>
+									<th
+										scope="col"
+										class="font-normal px-2.5 py-1.5 cursor-pointer select-none"
+										on:click={() => toggleUserSort('name')}
+									>
+										<div class="flex gap-1.5 items-center">
+											{$i18n.t('User')}
+											{#if userOrderBy === 'name'}
 												<span class="font-normal">
 													{#if userDirection === 'asc'}<ChevronUp
 															className="size-2"
@@ -668,56 +712,157 @@
 											{/if}
 										</div>
 									</th>
-								{/each}
-							</tr>
-						</thead>
-						<tbody>
-							{#each sortedUsers as user, idx (user.user_id)}
-								<tr class="dark:border-gray-850 text-xs">
-									<td class="px-3 py-1 text-gray-400">{idx + 1}</td>
-									<td class="px-3 py-1 font-normal text-gray-900 dark:text-white">
-										<div class="flex items-center gap-2">
-											<ProfilePreview
-												user={{ id: user.user_id, name: user.name || user.email }}
-												side="right"
-												align="center"
-												sideOffset={6}
-											>
-												<img
-													src="{WEBUI_API_BASE_URL}/users/{user.user_id}/profile/image"
-													alt={user.name || 'User'}
-													class="size-5 rounded-full object-cover shrink-0"
-													on:error={(e) => {
-														e.target.src = '/user.png';
-													}}
-												/>
-											</ProfilePreview>
-											<span class="truncate max-w-[9.375rem]"
-												>{user.name || user.email || user.user_id.substring(0, 8)}</span
-											>
+									<th
+										scope="col"
+										class="font-normal px-2.5 py-1.5 cursor-pointer select-none text-right"
+										on:click={() => toggleUserSort('count')}
+									>
+										<div class="flex gap-1.5 items-center justify-end">
+											{$i18n.t('Messages')}
+											{#if userOrderBy === 'count'}
+												<span class="font-normal">
+													{#if userDirection === 'asc'}<ChevronUp
+															className="size-2"
+														/>{:else}<ChevronDown className="size-2" />{/if}
+												</span>
+											{:else}
+												<span class="invisible"><ChevronUp className="size-2" /></span>
+											{/if}
 										</div>
-									</td>
-									<td class="px-3 py-1 text-right">{user.count.toLocaleString()}</td>
+									</th>
+									<!-- {$i18n.t('Tokens')} -->
 									{#each tokenColumns as column}
-										<td class="px-3 py-1 text-right">{formatNumber(user[column.key] ?? 0)}</td>
+										<th
+											scope="col"
+											title={`${column.label} ${$i18n.t('tokens')}`}
+											class="font-normal px-2.5 py-1.5 cursor-pointer select-none text-right"
+											on:click={() => toggleUserSort(column.key)}
+										>
+											<div class="flex gap-1.5 items-center justify-end">
+												{column.label}
+												{#if userOrderBy === column.key}
+													<span class="font-normal">
+														{#if userDirection === 'asc'}<ChevronUp
+																className="size-2"
+															/>{:else}<ChevronDown className="size-2" />{/if}
+													</span>
+												{:else}
+													<span class="invisible"><ChevronUp className="size-2" /></span>
+												{/if}
+											</div>
+										</th>
 									{/each}
+									<th
+										scope="col"
+										class="font-normal px-2.5 py-1.5 cursor-pointer select-none text-right w-16"
+										on:click={() => toggleUserSort('percentage')}
+									>
+										<div class="flex gap-1.5 items-center justify-end">
+											{selectedMetric === 'tokens'
+												? $i18n.t('Token share')
+												: $i18n.t('Message share')}
+											{#if userOrderBy === 'percentage'}
+												<span class="font-normal">
+													{#if userDirection === 'asc'}<ChevronUp
+															className="size-2"
+														/>{:else}<ChevronDown className="size-2" />{/if}
+												</span>
+											{:else}
+												<span class="invisible"><ChevronUp className="size-2" /></span>
+											{/if}
+										</div>
+									</th>
 								</tr>
-							{/each}
-							{#if sortedUsers.length === 0}
-								<tr
-									><td colspan="6" class="px-3 py-2 text-center text-gray-400"
-										>{$i18n.t('No data')}</td
-									></tr
-								>
-							{/if}
-						</tbody>
-					</table>
-				</div>
-			</div>
-		{/if}
-	</div>
+							</thead>
+							<tbody>
+								{#each sortedUsers as user, idx (user.user_id)}
+									{@const value =
+										selectedMetric === 'tokens' ? (user.total_tokens ?? 0) : user.count}
+									<tr class="text-xs">
+										<td class="font-normal px-3 py-1.5 text-gray-400">{idx + 1}</td>
+										<td class="font-normal px-3 py-1.5 text-gray-900 dark:text-white">
+											<div class="flex items-center gap-2">
+												<ProfilePreview
+													user={{ id: user.user_id, name: user.name || user.email }}
+													side="right"
+													align="center"
+													sideOffset={6}
+												>
+													<img
+														src="{WEBUI_API_BASE_URL}/users/{user.user_id}/profile/image"
+														alt={user.name || 'User'}
+														class="size-5 rounded-full object-cover shrink-0"
+														on:error={(e) => {
+															const image = e.currentTarget as HTMLImageElement;
+															if (!image.src.endsWith('/user.png')) image.src = '/user.png';
+														}}
+													/>
+												</ProfilePreview>
+												<span class="truncate max-w-[9.375rem]"
+													>{user.name || user.email || user.user_id.substring(0, 8)}</span
+												>
+											</div>
+										</td>
+										<td class="font-normal px-3 py-1.5 text-right">{user.count.toLocaleString()}</td
+										>
+										{#each tokenColumns as column}
+											<td class="font-normal px-3 py-1.5 text-right"
+												>{formatNumber(user[column.key] ?? 0)}</td
+											>
+										{/each}
 
-	<div class="text-gray-500 text-xs mt-1.5 text-right">
-		ⓘ {$i18n.t('Message counts are based on assistant responses.')}
+										<td class="font-normal px-3 py-1.5 text-right text-gray-400">
+											<div class="flex items-center justify-end gap-2 tabular-nums">
+												<div
+													class="h-1 w-16 bg-gray-100 dark:bg-gray-800 overflow-hidden"
+													aria-hidden="true"
+												>
+													<div
+														class="h-full bg-gray-400"
+														style:width={`${metricTotal > 0 ? (value / metricTotal) * 100 : 0}%`}
+													></div>
+												</div>
+												<span class="w-12">{usageShare(value, metricTotal)}</span>
+											</div>
+										</td>
+									</tr>
+								{/each}
+								{#if sortedUsers.length === 0}
+									<tr
+										><td colspan="7" class="font-normal px-3 py-1.5 text-center text-gray-400"
+											>{$i18n.t('No data')}</td
+										></tr
+									>
+								{/if}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+	<div class="mt-2 text-[0.6875rem] text-gray-400 dark:text-gray-500">
+		{$i18n.t('Message counts are based on assistant responses.')}
+		{$i18n.t('Token counts are estimates and may not reflect actual API usage')}
 	</div>
 {/if}
+
+<style>
+	.analytics-tab {
+		padding-block: 0.25rem;
+		font-size: 0.75rem;
+		font-weight: 400;
+		color: var(--color-gray-500);
+	}
+	.analytics-tab:hover,
+	.tab-selected {
+		color: var(--color-gray-900);
+	}
+	:global(.dark) .analytics-tab {
+		color: var(--color-gray-400);
+	}
+	:global(.dark) .analytics-tab:hover,
+	:global(.dark) .tab-selected {
+		color: var(--color-gray-100);
+	}
+</style>
diff --git a/src/lib/components/admin/Analytics/UsageChart.svelte b/src/lib/components/admin/Analytics/UsageChart.svelte
new file mode 100644
index 0000000000..30d4fc4fdc
--- /dev/null
+++ b/src/lib/components/admin/Analytics/UsageChart.svelte
@@ -0,0 +1,479 @@
+<script context="module" lang="ts">
+	export type UsageBucket = { date: string; models: Record<string, number> };
+
+	export const usageShare = (value: number, total: number) => {
+		if (total <= 0 || value <= 0) return '0%';
+		const share = (value / total) * 100;
+		return share < 0.1 ? '<0.1%' : `${share.toFixed(1)}%`;
+	};
+
+	export const chartSeries = (data: UsageBucket[], modelId: string | null = null) =>
+		data
+			.map((bucket) => ({
+				date: bucket.date,
+				models: modelId ? { [modelId]: bucket.models[modelId] ?? 0 } : bucket.models,
+				// Calendar keys have no timezone. UTC is only a plotting coordinate, not a query timestamp.
+				time: Date.parse(
+					`${bucket.date.length === 10 ? `${bucket.date}T00:00` : bucket.date.replace(' ', 'T')}Z`
+				),
+				value: modelId
+					? (bucket.models[modelId] ?? 0)
+					: Object.values(bucket.models).reduce((total, value) => total + value, 0)
+			}))
+			.sort((a, b) => a.time - b.time);
+
+	export const chartCeiling = (max: number) => {
+		if (max <= 4) return 4;
+		const step = 10 ** Math.floor(Math.log10(max));
+		return Math.ceil(max / step) * step;
+	};
+
+	export const modelTotals = (data: UsageBucket[]) => {
+		const totals: Record<string, number> = Object.create(null);
+		for (const bucket of data) {
+			for (const [id, value] of Object.entries(bucket.models))
+				totals[id] = (totals[id] ?? 0) + value;
+		}
+		return totals;
+	};
+
+	// Identity-based colors remain stable when the range, metric, or ranking changes.
+	export const modelColor = (id: string) => {
+		let hash = 0;
+		for (const character of id) hash = (Math.imul(hash, 31) + character.charCodeAt(0)) | 0;
+		return `hsl(${((hash % 360) + 360) % 360} 65% 52%)`;
+	};
+
+	export const intervalMinutes = {
+		'10m': 10,
+		hourly: 60,
+		'3h': 180,
+		'6h': 360,
+		daily: 1440
+	} as const;
+	export type UsageInterval = keyof typeof intervalMinutes;
+
+	export const defaultInterval = (period: string): UsageInterval =>
+		period === '24h' ? '10m' : period === '7d' ? 'hourly' : period === '30d' ? '6h' : 'daily';
+
+	export const aggregateUsage = (data: UsageBucket[], interval: UsageInterval): UsageBucket[] => {
+		if (interval !== '3h' && interval !== '6h') return data;
+		const hours = intervalMinutes[interval] / 60;
+		const buckets = new Map<string, Record<string, number>>();
+		for (const point of data) {
+			// Aggregate the server's calendar keys without converting their timezone.
+			const hour = Math.floor(Number(point.date.slice(11, 13)) / hours) * hours;
+			const date = `${point.date.slice(0, 10)} ${String(hour).padStart(2, '0')}:00`;
+			const models = buckets.get(date) ?? Object.create(null);
+			for (const [id, value] of Object.entries(point.models))
+				models[id] = (models[id] ?? 0) + value;
+			buckets.set(date, models);
+		}
+		return [...buckets]
+			.sort(([a], [b]) => a.localeCompare(b))
+			.map(([date, models]) => ({ date, models }));
+	};
+
+	export const intervalBreakdown = (
+		models: Record<string, number>,
+		modelIds: string[],
+		modelId: string | null = null
+	) => (modelId === null ? modelIds : [modelId]).map((id) => ({ id, value: models[id] ?? 0 }));
+</script>
+
+<script lang="ts">
+	import { getContext, onMount, tick } from 'svelte';
+	import tippy, { type Instance } from 'tippy.js';
+	import dayjs from 'dayjs';
+
+	export let data: UsageBucket[] = [];
+	export let granularity: UsageInterval = 'daily';
+	export let metricLabel = '';
+	export let modelNames: Record<string, string> = {};
+	export let selectedModel: string | null = null;
+	export let view: 'volume' | 'activity' = 'volume';
+	const i18n = getContext<any>('i18n');
+	let active: number | null = null;
+	let keyboardIndex = 0;
+	let plot: HTMLDivElement;
+	let chartWidth = 0;
+	let tooltip: Instance | undefined;
+	let tooltipContent: HTMLDivElement;
+	let tooltipId = '';
+	let anchor: HTMLElement | null = null;
+	let activeModel: string | null = null;
+	$: {
+		data;
+		selectedModel;
+		view;
+		tooltip?.hide();
+		active = null;
+		activeModel = null;
+		keyboardIndex = 0;
+	}
+	$: totals = modelTotals(data);
+	$: ids = Object.keys(totals).sort((a, b) => totals[b] - totals[a] || a.localeCompare(b));
+	$: visibleIds = selectedModel ? [selectedModel] : ids;
+	$: series = chartSeries(data, selectedModel);
+	$: ceiling = chartCeiling(series.reduce((max, point) => Math.max(max, point.value), 0));
+	$: step = intervalMinutes[granularity] * 60000;
+	$: start = series[0]?.time ?? 0;
+	$: span = Math.max(step, (series[series.length - 1]?.time ?? start) - start + step);
+	$: barWidth = Math.min((100 * step) / span, 12);
+	$: hovered = active !== null ? series[active] : null;
+	$: tooltipRows = hovered ? intervalBreakdown(hovered.models, visibleIds, activeModel) : [];
+	$: hoveredModels = hovered ? data.find((bucket) => bucket.date === hovered.date)?.models : null;
+	$: labels = [
+		...new Set(
+			chartWidth >= 480
+				? [0, Math.floor((series.length - 1) / 2), series.length - 1]
+				: [0, series.length - 1]
+		)
+	].filter((i) => i >= 0 && i < series.length);
+	$: lanes = visibleIds.map((id) => {
+		const values = series.map((point) => point.models[id] ?? 0);
+		return { id, peak: Math.max(0, ...values), values };
+	});
+	$: stacks = series.map((point) => visibleIds.filter((id) => (point.models[id] ?? 0) > 0));
+	const name = (id: string) => modelNames[id] || id;
+	const number = (value: number) =>
+		new Intl.NumberFormat($i18n.language, { notation: 'compact', maximumFractionDigits: 1 }).format(
+			value
+		);
+	const dateLabel = (date: string) =>
+		dayjs(date)
+			.locale($i18n.language)
+			.format(granularity === 'daily' ? 'MMM D' : 'MMM D, HH:mm');
+	const position = (time: number) => ((time - start + step / 2) / span) * 100;
+	function navigate(event: KeyboardEvent, index: number) {
+		const buttons = plot.querySelectorAll<HTMLButtonElement>('button[data-point]');
+		const destinations: Record<string, number> = {
+			ArrowRight: index + 1,
+			ArrowLeft: index - 1,
+			Home: 0,
+			End: buttons.length - 1
+		};
+		if (view === 'activity') {
+			destinations.ArrowDown = index + series.length;
+			destinations.ArrowUp = index - series.length;
+		}
+		const next = destinations[event.key];
+		if (next === undefined) return;
+		event.preventDefault();
+		keyboardIndex = Math.max(0, Math.min(buttons.length - 1, next));
+		buttons[keyboardIndex]?.focus();
+	}
+
+	onMount(() => {
+		tooltip = tippy(plot, {
+			content: tooltipContent,
+			trigger: 'manual',
+			theme: 'dark',
+			arrow: false,
+			placement: 'right-start',
+			offset: [0, 12],
+			popperOptions: {
+				modifiers: [{ name: 'flip', options: { fallbackPlacements: ['left-start'] } }]
+			},
+			duration: 0,
+			interactive: true,
+			maxWidth: 'min(20rem, calc(100vw - 1rem))',
+			appendTo: () => document.body,
+			aria: { content: null, expanded: false },
+			onHidden: () => {
+				active = null;
+				activeModel = null;
+			},
+			getReferenceClientRect: () => {
+				const rect = (anchor ?? plot).getBoundingClientRect();
+				const height = tooltip?.popper.offsetHeight || tooltipContent.offsetHeight;
+				return new DOMRect(
+					rect.x + rect.width / 2,
+					plot.getBoundingClientRect().top - height / 2,
+					0,
+					0
+				);
+			}
+		});
+		tooltipId = tooltip.popper.id;
+		return () => tooltip?.destroy();
+	});
+	async function showTooltip(
+		event: MouseEvent | FocusEvent,
+		index: number,
+		modelId: string | null = null
+	) {
+		anchor = event.currentTarget as HTMLElement;
+		activeModel = modelId;
+		active = index;
+		await tick();
+		if (
+			active !== index ||
+			activeModel !== modelId ||
+			!anchor?.isConnected ||
+			tooltip?.state.isDestroyed
+		)
+			return;
+		tooltip?.clearDelayTimeouts();
+		tooltip?.show();
+		tooltip?.popperInstance?.update();
+	}
+	function leaveTooltip(event: MouseEvent) {
+		tooltip?.hideWithInteractivity(event);
+	}
+	function hideTooltip() {
+		tooltip?.hide();
+		active = null;
+		activeModel = null;
+	}
+	const intervalLabel = (date: string) => {
+		const start = dayjs(date).locale($i18n.language);
+		if (granularity === 'daily') return start.format('MMM D, YYYY');
+		const end = start.add(intervalMinutes[granularity], 'minute');
+		return `${start.format('MMM D, YYYY · HH:mm')}–${end.format(start.isSame(end, 'day') ? 'HH:mm' : 'MMM D, HH:mm')}`;
+	};
+
+	function isolate(id: string | null) {
+		selectedModel = selectedModel === id ? null : id;
+		active = null;
+		keyboardIndex = 0;
+	}
+</script>
+
+<svelte:window
+	on:keydown|capture={(event) => {
+		if (event.key === 'Escape' && tooltip?.state.isVisible) {
+			event.stopPropagation();
+			hideTooltip();
+		}
+	}}
+/>
+
+<div
+	bind:clientWidth={chartWidth}
+	class="min-w-0 text-xs font-normal text-gray-500 dark:text-gray-400"
+>
+	<div
+		class="h-5 mb-2 flex min-w-0 items-center justify-between gap-3 text-[0.6875rem] tabular-nums"
+		aria-live="polite"
+		aria-atomic="true"
+	>
+		<span
+			class="truncate"
+			title={hovered ? dateLabel(hovered.date) : selectedModel ? name(selectedModel) : undefined}
+			>{hovered
+				? dateLabel(hovered.date)
+				: selectedModel
+					? name(selectedModel)
+					: $i18n.t('All models')}</span
+		>
+		<span class="shrink-0 whitespace-nowrap"
+			>{hovered
+				? `${hovered.value.toLocaleString($i18n.language)} ${metricLabel.toLocaleLowerCase($i18n.language)}`
+				: metricLabel}</span
+		>
+	</div>
+	<div
+		bind:this={plot}
+		class="relative"
+		role="group"
+		aria-label={`${metricLabel} — ${$i18n.t('Use arrow keys to explore the chart')}`}
+	>
+		{#if view === 'volume'}
+			<div class="relative h-40 pl-12">
+				{#each [ceiling, ceiling * 0.75, ceiling / 2, ceiling * 0.25, 0] as tick}
+					<div
+						class="absolute inset-x-0 flex items-center gap-2 pointer-events-none translate-y-1/2"
+						style:bottom={`${(tick / ceiling) * 100}%`}
+					>
+						<span class="w-10 shrink-0 text-right text-[0.6875rem] tabular-nums"
+							>{number(tick)}</span
+						>
+						<span class="h-px flex-1 bg-gray-100 dark:bg-gray-850/50"></span>
+					</div>
+				{/each}
+				<div class="relative h-full">
+					{#each series as point, index (point.date)}
+						<button
+							type="button"
+							data-point
+							class="absolute bottom-0 top-0 flex justify-center items-end focus-visible:outline focus-visible:outline-1 focus-visible:outline-gray-400"
+							style:left={`${position(point.time)}%`}
+							style:width={`${barWidth}%`}
+							style:transform="translateX(-50%)"
+							tabindex={keyboardIndex === index ? 0 : -1}
+							aria-describedby={active === index && activeModel === null ? tooltipId : undefined}
+							aria-label={`${dateLabel(point.date)}: ${point.value.toLocaleString($i18n.language)} ${metricLabel}. ${stacks[index].map((id) => `${name(id)}: ${point.models[id].toLocaleString($i18n.language)}`).join(', ')}`}
+							on:mouseenter={(event) => showTooltip(event, index)}
+							on:mouseleave={leaveTooltip}
+							on:focus={(event) => {
+								keyboardIndex = index;
+								showTooltip(event, index);
+							}}
+							on:blur={hideTooltip}
+							on:click={(event) => showTooltip(event, index)}
+							on:keydown={(event) => navigate(event, index)}
+						>
+							<span
+								class="w-3/4 max-w-12 h-full flex flex-col-reverse justify-start"
+								style:opacity={active === null || active === index ? 1 : 0.45}
+							>
+								{#each stacks[index] as id}
+									<span
+										class="block shrink-0 w-full"
+										style:height={`${(point.models[id] / ceiling) * 100}%`}
+										style:background-color={modelColor(id)}
+									></span>
+								{/each}
+							</span>
+						</button>
+					{/each}
+				</div>
+			</div>
+		{:else}
+			<div class="space-y-1">
+				{#each lanes as lane, row (lane.id)}
+					<div class="grid grid-cols-[7rem_minmax(0,1fr)] gap-2 items-center">
+						<button
+							type="button"
+							class="text-left truncate py-1"
+							title={name(lane.id)}
+							aria-pressed={selectedModel === lane.id}
+							on:click={() => isolate(lane.id)}>{name(lane.id)}</button
+						>
+						<div class="relative h-6 bg-gray-100/70 dark:bg-gray-850/40">
+							{#each series as point, index (point.date)}
+								{@const cellIndex = row * series.length + index}
+								<button
+									type="button"
+									data-point
+									class="absolute inset-y-0 focus-visible:outline focus-visible:outline-1 focus-visible:outline-gray-400"
+									style:left={`${position(point.time)}%`}
+									style:width={`${(100 * step) / span}%`}
+									style:transform="translateX(-50%)"
+									tabindex={keyboardIndex === cellIndex ? 0 : -1}
+									aria-label={`${name(lane.id)}, ${dateLabel(point.date)}: ${lane.values[index].toLocaleString($i18n.language)} ${metricLabel}`}
+									aria-describedby={active === index && activeModel === lane.id
+										? tooltipId
+										: undefined}
+									on:mouseenter={(event) => showTooltip(event, index, lane.id)}
+									on:mouseleave={leaveTooltip}
+									on:focus={(event) => {
+										keyboardIndex = cellIndex;
+										showTooltip(event, index, lane.id);
+									}}
+									on:blur={hideTooltip}
+									on:click={(event) => showTooltip(event, index, lane.id)}
+									on:keydown={(event) => navigate(event, cellIndex)}
+								>
+									<span
+										class="block absolute inset-0"
+										style:background-color={modelColor(lane.id)}
+										style:opacity={lane.values[index] > 0
+											? 0.25 + (0.75 * lane.values[index]) / lane.peak
+											: 0}
+									></span>
+								</button>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+		{#if hovered}
+			<div
+				class="pointer-events-none absolute inset-y-0 right-0 z-10"
+				style:left={view === 'volume' ? '3rem' : '7.5rem'}
+				aria-hidden="true"
+			>
+				<div
+					class="absolute inset-y-0 w-px bg-gray-400/70 dark:bg-gray-300/70"
+					style:left={`${position(hovered.time)}%`}
+					style:transform="translateX(-50%)"
+				></div>
+			</div>
+		{/if}
+	</div>
+	<div
+		class="relative mt-2 h-4 text-[0.625rem] tabular-nums"
+		style:margin-left={view === 'volume' ? '3rem' : '7.5rem'}
+	>
+		{#each labels as index}
+			<span
+				class="absolute whitespace-nowrap"
+				style:left={`${position(series[index].time)}%`}
+				style:transform={series.length === 1
+					? 'translateX(-50%)'
+					: index === 0
+						? 'none'
+						: index === series.length - 1
+							? 'translateX(-100%)'
+							: 'translateX(-50%)'}>{dateLabel(series[index].date)}</span
+			>
+		{/each}
+	</div>
+	<div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-[0.6875rem]">
+		<button
+			type="button"
+			class="py-1"
+			class:text-gray-900={selectedModel === null}
+			class:dark:text-gray-200={selectedModel === null}
+			aria-pressed={selectedModel === null}
+			on:click={() => isolate(null)}>{$i18n.t('All models')}</button
+		>
+		{#each ids as id (id)}
+			<button
+				type="button"
+				class="flex min-w-0 max-w-full items-center gap-1.5 py-1 text-left hover:text-gray-900 dark:hover:text-gray-100"
+				style:opacity={selectedModel && selectedModel !== id ? 0.45 : 1}
+				aria-label={`${name(id)} — ${$i18n.t('Select to isolate model')}`}
+				aria-pressed={selectedModel === id}
+				on:click={() => isolate(id)}
+			>
+				<span class="size-2 shrink-0" style:background-color={modelColor(id)}></span>
+				<span class="max-w-40 truncate" title={name(id)}>{name(id)}</span>
+				<span
+					class="w-14 shrink-0 text-right tabular-nums text-gray-400 dark:text-gray-500"
+					title={(hovered ? (hoveredModels?.[id] ?? 0) : totals[id]).toLocaleString($i18n.language)}
+					>{number(hovered ? (hoveredModels?.[id] ?? 0) : totals[id])}</span
+				>
+			</button>
+		{/each}
+	</div>
+	<p class="mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-500">
+		{view === 'activity'
+			? $i18n.t('Intensity relative to each model’s peak. Blank means no recorded usage.')
+			: $i18n.t('Select a model to isolate it.')} · {$i18n.t('Server time')}
+	</p>
+</div>
+
+<div class="hidden">
+	<div
+		bind:this={tooltipContent}
+		class="w-64 max-w-full py-0.5 text-[0.625rem] leading-4 font-normal text-gray-100"
+	>
+		{#if hovered}
+			<div class="truncate text-gray-400" title={intervalLabel(hovered.date)}>
+				{intervalLabel(hovered.date)}
+			</div>
+			<div class="mt-1 max-h-48 overflow-y-auto scrollbar-hidden space-y-0.5">
+				{#each tooltipRows as row (row.id)}
+					<div
+						class="flex h-4 items-center justify-between gap-3"
+						class:text-gray-500={row.value === 0}
+					>
+						<span class="flex min-w-0 items-center gap-1.5"
+							><span class="size-1.5 shrink-0" style:background-color={modelColor(row.id)}
+							></span><span class="min-w-0 truncate" title={name(row.id)}>{name(row.id)}</span
+							></span
+						>
+						<span class="shrink-0 whitespace-nowrap tabular-nums"
+							>{row.value.toLocaleString($i18n.language)}
+							<span class="text-gray-400">({usageShare(row.value, hovered.value)})</span></span
+						>
+					</div>
+				{:else}<div class="text-gray-400">{$i18n.t('No activity in this period')}</div>{/each}
+			</div>
+		{/if}
+	</div>
+</div>