refac

src/lib/apis/users/index.ts

@@ -604,3 +604,87 @@ export const getUserPreview = async (token: string, userId: string) => {
 
 	return res;
 };
+
+export type UserUsageHeatmapEntry = {
+	date: string;
+	messages: number;
+	chats: number;
+	tokens: number;
+	models: Record<string, number>;
+};
+
+export type UserUsageResponse = {
+	totals: {
+		lifetime_tokens: number;
+		input_tokens: number;
+		output_tokens: number;
+		peak_daily_tokens: number;
+		longest_chat_seconds: number;
+		current_streak: number;
+		longest_streak: number;
+		total_chats: number;
+		active_days: number;
+		models_used: number;
+		messages: number;
+		user_messages: number;
+		assistant_messages: number;
+	};
+	heatmap: UserUsageHeatmapEntry[];
+	weekly_heatmap: UserUsageHeatmapEntry[];
+	cumulative_heatmap: UserUsageHeatmapEntry[];
+	insights: {
+		most_used_model: string | null;
+		average_tokens_per_chat: number;
+		average_messages_per_active_day: number;
+		user_message_share: number;
+		assistant_message_share: number;
+	};
+	top_models: Array<{
+		model_id: string;
+		messages: number;
+		input_tokens: number;
+		output_tokens: number;
+		total_tokens: number;
+	}>;
+	top_tools: Array<{ name: string; count: number }>;
+	period: {
+		start_date: number;
+		end_date: number;
+		days: number;
+	};
+};
+
+export const getUserUsage = async (
+	token: string,
+	options: { days?: number; startDate?: number | null; endDate?: number | null } = {}
+): Promise<UserUsageResponse | null> => {
+	let error = null;
+	const searchParams = new URLSearchParams();
+
+	if (options.days) searchParams.append('days', options.days.toString());
+	if (options.startDate) searchParams.append('start_date', options.startDate.toString());
+	if (options.endDate) searchParams.append('end_date', options.endDate.toString());
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/users/usage?${searchParams.toString()}`, {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			console.error(err);
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};

src/lib/components/chat/Settings/Usage.svelte

@@ -0,0 +1,485 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
+
+	import {
+		getUserUsage,
+		type UserUsageHeatmapEntry,
+		type UserUsageResponse
+	} from '$lib/apis/users';
+	import { models } from '$lib/stores';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import { formatNumber } from '$lib/utils';
+
+	import UserSettingSection from './UserSettingSection.svelte';
+	import UserSettingRow from './UserSettingRow.svelte';
+
+	const i18n: Writable<any> = getContext('i18n');
+
+	type HeatmapMode = 'daily' | 'weekly' | 'cumulative';
+	type HeatmapCell = UserUsageHeatmapEntry | null;
+	type MonthLabel = { label: string; column: number; span: number };
+
+	let usage: UserUsageResponse | null = null;
+	let loading = true;
+	let heatmapMode: HeatmapMode = 'daily';
+	let heatmapContainerWidth = 0;
+
+	const HEATMAP_MIN_CELL_PX = 8;
+	const HEATMAP_MAX_CELL_PX = 10;
+	const HEATMAP_GAP_PX = 4;
+	const MIN_HEATMAP_COLUMNS = 26;
+	const DEFAULT_HEATMAP_COLUMNS = 26;
+	const MIN_MONTH_LABEL_GAP = 6;
+
+	$: modelNames = new Map($models.map((model) => [model.id, model.name || model.id]));
+	$: dailyHeatmap = usage?.heatmap ?? [];
+	$: weeklyHeatmap = new Map((usage?.weekly_heatmap ?? []).map((entry) => [entry.date, entry]));
+	$: cumulativeHeatmap = new Map(
+		(usage?.cumulative_heatmap ?? []).map((entry) => [entry.date, entry])
+	);
+	$: heatmapData = buildDisplayHeatmap(dailyHeatmap, heatmapMode, weeklyHeatmap, cumulativeHeatmap);
+	$: totalHeatmapColumns = Math.max(Math.ceil(heatmapData.length / 7), 1);
+	$: maxHeatmapColumns = heatmapContainerWidth
+		? Math.max(
+				Math.min(totalHeatmapColumns, MIN_HEATMAP_COLUMNS),
+				Math.floor(
+					(heatmapContainerWidth + HEATMAP_GAP_PX) / (HEATMAP_MIN_CELL_PX + HEATMAP_GAP_PX)
+				)
+			)
+		: Math.min(totalHeatmapColumns, DEFAULT_HEATMAP_COLUMNS);
+	$: visibleHeatmapColumns = Math.min(totalHeatmapColumns, maxHeatmapColumns);
+	$: heatmapCells = buildHeatmapCells(heatmapData, visibleHeatmapColumns);
+	$: heatmapColumns = Math.max(Math.ceil(heatmapCells.length / 7), 1);
+	$: heatmapGridWidth = `${heatmapColumns * HEATMAP_MAX_CELL_PX + (heatmapColumns - 1) * HEATMAP_GAP_PX}px`;
+	$: monthLabels = buildMonthLabels(heatmapCells, heatmapColumns);
+	$: hasUsage = (usage?.totals.messages ?? 0) > 0 || (usage?.totals.lifetime_tokens ?? 0) > 0;
+
+	const palettes = [
+		[
+			'bg-gray-100 dark:bg-gray-800',
+			'bg-green-100 dark:bg-green-900/40',
+			'bg-green-300 dark:bg-green-700/60',
+			'bg-green-500 dark:bg-green-600/80',
+			'bg-green-700 dark:bg-green-500'
+		],
+		[
+			'bg-gray-100 dark:bg-gray-800',
+			'bg-blue-100 dark:bg-blue-900/40',
+			'bg-blue-300 dark:bg-blue-700/60',
+			'bg-blue-500 dark:bg-blue-600/80',
+			'bg-blue-700 dark:bg-blue-500'
+		],
+		[
+			'bg-gray-100 dark:bg-gray-800',
+			'bg-purple-100 dark:bg-purple-900/40',
+			'bg-purple-300 dark:bg-purple-700/60',
+			'bg-purple-500 dark:bg-purple-600/80',
+			'bg-purple-700 dark:bg-purple-500'
+		],
+		[
+			'bg-gray-100 dark:bg-gray-800',
+			'bg-orange-100 dark:bg-orange-900/40',
+			'bg-orange-300 dark:bg-orange-700/60',
+			'bg-orange-500 dark:bg-orange-600/80',
+			'bg-orange-700 dark:bg-orange-500'
+		],
+		[
+			'bg-gray-100 dark:bg-gray-800',
+			'bg-rose-100 dark:bg-rose-900/40',
+			'bg-rose-300 dark:bg-rose-700/60',
+			'bg-rose-500 dark:bg-rose-600/80',
+			'bg-rose-700 dark:bg-rose-500'
+		],
+		[
+			'bg-gray-100 dark:bg-gray-800',
+			'bg-yellow-100 dark:bg-yellow-900/40',
+			'bg-yellow-300 dark:bg-yellow-700/60',
+			'bg-yellow-500 dark:bg-yellow-600/80',
+			'bg-yellow-700 dark:bg-yellow-500'
+		],
+		[
+			'bg-gray-100 dark:bg-gray-800',
+			'bg-cyan-100 dark:bg-cyan-900/40',
+			'bg-cyan-300 dark:bg-cyan-700/60',
+			'bg-cyan-500 dark:bg-cyan-600/80',
+			'bg-cyan-700 dark:bg-cyan-500'
+		],
+		[
+			'bg-gray-100 dark:bg-gray-800',
+			'bg-red-100 dark:bg-red-900/40',
+			'bg-red-300 dark:bg-red-700/60',
+			'bg-red-500 dark:bg-red-600/80',
+			'bg-red-700 dark:bg-red-500'
+		],
+		[
+			'bg-gray-100 dark:bg-gray-800',
+			'bg-neutral-200 dark:bg-neutral-800',
+			'bg-neutral-400 dark:bg-neutral-600',
+			'bg-neutral-600 dark:bg-neutral-400',
+			'bg-neutral-800 dark:bg-neutral-200'
+		]
+	];
+
+	const heatmapModes: Array<{ value: HeatmapMode; label: string }> = [
+		{ value: 'daily', label: 'Daily' },
+		{ value: 'weekly', label: 'Weekly' },
+		{ value: 'cumulative', label: 'Cumulative' }
+	];
+
+	const loadUsage = async () => {
+		loading = true;
+		try {
+			usage = await getUserUsage(localStorage.token);
+		} catch (error) {
+			console.error('Usage load failed:', error);
+			usage = null;
+		}
+		loading = false;
+	};
+
+	const weekStart = (dateString: string) => {
+		const date = new Date(`${dateString}T00:00:00`);
+		const daysSinceMonday = (date.getDay() + 6) % 7;
+		date.setDate(date.getDate() - daysSinceMonday);
+		const month = `${date.getMonth() + 1}`.padStart(2, '0');
+		const day = `${date.getDate()}`.padStart(2, '0');
+		return `${date.getFullYear()}-${month}-${day}`;
+	};
+
+	const buildDisplayHeatmap = (
+		data: UserUsageHeatmapEntry[],
+		mode: HeatmapMode,
+		weekly: Map<string, UserUsageHeatmapEntry>,
+		cumulative: Map<string, UserUsageHeatmapEntry>
+	) => {
+		if (mode === 'daily') {
+			return data;
+		}
+
+		return data.map((day) => {
+			const aggregate =
+				mode === 'weekly' ? weekly.get(weekStart(day.date)) : cumulative.get(day.date);
+			return aggregate ? { ...aggregate, date: day.date } : day;
+		});
+	};
+
+	const buildHeatmapCells = (data: UserUsageHeatmapEntry[], visibleColumns: number) => {
+		if (data.length === 0) {
+			return [];
+		}
+
+		const cells = data.slice(-Math.max(7, visibleColumns * 7));
+		const trailingBlanks = Array.from({ length: (7 - (cells.length % 7)) % 7 }, () => null);
+		return [...cells, ...trailingBlanks];
+	};
+
+	const buildMonthLabels = (cells: HeatmapCell[], columns: number): MonthLabel[] => {
+		const labels: MonthLabel[] = [];
+		let currentMonth = '';
+		let lastLabelColumn = -MIN_MONTH_LABEL_GAP;
+
+		cells.forEach((entry, index) => {
+			if (!entry) {
+				return;
+			}
+
+			const month = entry.date.slice(0, 7);
+			if (month === currentMonth) {
+				return;
+			}
+
+			const column = Math.floor(index / 7) + 1;
+			if (column - lastLabelColumn < MIN_MONTH_LABEL_GAP) {
+				currentMonth = month;
+				return;
+			}
+
+			labels.push({
+				label: new Date(`${entry.date}T00:00:00`).toLocaleString(undefined, { month: 'short' }),
+				column,
+				span: Math.min(MIN_MONTH_LABEL_GAP, columns - column + 1)
+			});
+			lastLabelColumn = column;
+			currentMonth = month;
+		});
+
+		return labels;
+	};
+
+	const topItem = (entry: UserUsageHeatmapEntry) => {
+		const models = Object.entries(entry.models ?? {}).sort((a, b) => b[1] - a[1]);
+		return models[0]?.[0] ?? null;
+	};
+
+	const modelPalette = (modelId: string | null) => {
+		if (!modelId) {
+			return palettes[0];
+		}
+
+		const charCode = modelId.toLowerCase().charCodeAt(0);
+		const index = Math.max(0, charCode - 97) % palettes.length;
+		return palettes[index];
+	};
+
+	const intensity = (entry: UserUsageHeatmapEntry) => {
+		const count = entry.messages;
+		if (count >= 20) return 4;
+		if (count >= 10) return 3;
+		if (count >= 5) return 2;
+		if (count > 0) return 1;
+		return 0;
+	};
+
+	const tooltipFor = (entry: UserUsageHeatmapEntry) => {
+		const label =
+			heatmapMode === 'weekly'
+				? `${$i18n.t('Week of')} ${weekStart(entry.date)}`
+				: heatmapMode === 'cumulative'
+					? `${$i18n.t('Through')} ${entry.date}`
+					: entry.date;
+
+		const model = topItem(entry);
+		const models = Object.entries(entry.models ?? {}).sort((a, b) => b[1] - a[1]);
+		const modelSummary =
+			models.length > 0
+				? models
+						.slice(0, 3)
+						.map(([id, count]) => `${modelName(id)} ${count}`)
+						.join(', ')
+				: $i18n.t('No model data');
+
+		return `${label}: ${formatNumber(entry.tokens)} ${$i18n.t('tokens')}, ${entry.messages.toLocaleString()} ${$i18n.t('messages')}, ${entry.chats.toLocaleString()} ${$i18n.t('chats')}${model ? ` (${modelName(model)})` : ''}. ${modelSummary}`;
+	};
+
+	const formatDuration = (seconds: number) => {
+		if (!seconds) return '0m';
+		const days = Math.floor(seconds / 86400);
+		const hours = Math.floor((seconds % 86400) / 3600);
+		const minutes = Math.floor((seconds % 3600) / 60);
+
+		if (days > 0) return `${days}d ${hours}h`;
+		if (hours > 0) return `${hours}h ${minutes}m`;
+		return `${minutes}m`;
+	};
+
+	const modelName = (id: string | null) => (id ? (modelNames.get(id) ?? id) : '-');
+
+	onMount(loadUsage);
+</script>
+
+<div class="flex h-full min-h-0 flex-col">
+	<div class="mb-4">
+		<h2 class="text-sm font-medium text-gray-900 dark:text-white">{$i18n.t('Usage')}</h2>
+	</div>
+
+	{#if loading}
+		<div class="flex flex-1 items-center justify-center">
+			<Spinner className="size-5" />
+		</div>
+	{:else if !usage}
+		<div class="flex flex-1 items-center justify-center text-xs text-gray-500">
+			{$i18n.t('Failed to load usage')}
+		</div>
+	{:else}
+		<div class="scrollbar-hover min-h-0 flex-1 overflow-y-auto pr-1.5">
+			<UserSettingSection title={$i18n.t('Overview')} first>
+				<div class="grid grid-cols-2 gap-x-6 gap-y-3 md:grid-cols-5">
+					<div>
+						<div class="text-sm font-medium text-gray-900 dark:text-white">
+							{formatNumber(usage.totals.lifetime_tokens)}
+						</div>
+						<div class="mt-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+							{$i18n.t('Lifetime tokens')}
+						</div>
+					</div>
+					<div>
+						<div class="text-sm font-medium text-gray-900 dark:text-white">
+							{formatNumber(usage.totals.peak_daily_tokens)}
+						</div>
+						<div class="mt-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+							{$i18n.t('Peak tokens')}
+						</div>
+					</div>
+					<div>
+						<div class="text-sm font-medium text-gray-900 dark:text-white">
+							{formatDuration(usage.totals.longest_chat_seconds)}
+						</div>
+						<div class="mt-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+							{$i18n.t('Longest active chat')}
+						</div>
+					</div>
+					<div>
+						<div class="text-sm font-medium text-gray-900 dark:text-white">
+							{usage.totals.current_streak.toLocaleString()}
+						</div>
+						<div class="mt-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+							{$i18n.t('Current streak')}
+						</div>
+					</div>
+					<div>
+						<div class="text-sm font-medium text-gray-900 dark:text-white">
+							{usage.totals.longest_streak.toLocaleString()}
+						</div>
+						<div class="mt-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+							{$i18n.t('Longest streak')}
+						</div>
+					</div>
+				</div>
+			</UserSettingSection>
+
+			<section class="mt-4 w-full">
+				<div class="mb-2 flex min-w-0 items-center justify-between gap-3">
+					<h3 class="min-w-0 shrink truncate text-xs text-gray-400 dark:text-gray-600">
+						{$i18n.t('Token activity')}
+					</h3>
+					<div
+						class="flex min-w-0 max-w-[70%] shrink items-center gap-3 overflow-hidden whitespace-nowrap"
+					>
+						{#each heatmapModes as mode}
+							<button
+								type="button"
+								class="min-w-0 shrink truncate whitespace-nowrap text-xs transition-colors {heatmapMode ===
+								mode.value
+									? 'text-gray-900 dark:text-white'
+									: 'text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'}
+								"
+								on:click={() => {
+									heatmapMode = mode.value;
+								}}
+							>
+								{$i18n.t(mode.label)}
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<div class="pb-1">
+					<div class="w-full min-w-0 overflow-hidden" bind:clientWidth={heatmapContainerWidth}>
+						<div
+							class="mx-auto grid grid-flow-col"
+							style="width: min(100%, {heatmapGridWidth}); gap: {HEATMAP_GAP_PX}px; aspect-ratio: {heatmapColumns} / 7; grid-template-columns: repeat({heatmapColumns}, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr));"
+						>
+							{#each heatmapCells as entry}
+								{#if entry}
+									<Tooltip content={tooltipFor(entry)}>
+										<div
+											class="h-full w-full rounded-[2px] {modelPalette(topItem(entry))[
+												intensity(entry)
+											]}"
+											aria-label={tooltipFor(entry)}
+										></div>
+									</Tooltip>
+								{:else}
+									<div class="h-full w-full"></div>
+								{/if}
+							{/each}
+						</div>
+
+						<div
+							class="mx-auto mt-2 grid text-[0.6875rem] leading-none text-gray-400 dark:text-gray-600"
+							style="width: min(100%, {heatmapGridWidth}); column-gap: {HEATMAP_GAP_PX}px; grid-template-columns: repeat({heatmapColumns}, minmax(0, 1fr));"
+						>
+							{#each monthLabels as month}
+								<div class="truncate" style="grid-column: {month.column} / span {month.span};">
+									{month.label}
+								</div>
+							{/each}
+						</div>
+					</div>
+
+					{#if usage.top_models.length > 0}
+						<div
+							class="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[0.6875rem] text-gray-400 dark:text-gray-600"
+						>
+							{#each usage.top_models.slice(0, 6) as model}
+								<div class="flex min-w-0 items-center gap-1.5">
+									<span class="size-2 shrink-0 rounded-[2px] {modelPalette(model.model_id)[3]}"
+									></span>
+									<span class="max-w-28 truncate">{modelName(model.model_id)}</span>
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</section>
+
+			{#if !hasUsage}
+				<UserSettingSection title={$i18n.t('Activity')}>
+					<div class="text-xs text-gray-500 dark:text-gray-400">
+						{$i18n.t('No usage data found')}
+					</div>
+				</UserSettingSection>
+			{:else}
+				<UserSettingSection title={$i18n.t('Activity insights')}>
+					<UserSettingRow label={$i18n.t('Models')}>
+						<span class="text-xs text-gray-900 dark:text-white">
+							{usage.totals.models_used.toLocaleString()}
+						</span>
+					</UserSettingRow>
+					<UserSettingRow label={$i18n.t('Average tokens per chat')}>
+						<span class="text-xs text-gray-900 dark:text-white">
+							{formatNumber(usage.insights.average_tokens_per_chat)}
+						</span>
+					</UserSettingRow>
+					<UserSettingRow label={$i18n.t('Average messages per active day')}>
+						<span class="text-xs text-gray-900 dark:text-white">
+							{usage.insights.average_messages_per_active_day.toLocaleString()}
+						</span>
+					</UserSettingRow>
+					<UserSettingRow label={$i18n.t('User messages')}>
+						<span class="text-xs text-gray-900 dark:text-white">
+							{usage.totals.user_messages.toLocaleString()} · {usage.insights.user_message_share}%
+						</span>
+					</UserSettingRow>
+					<UserSettingRow label={$i18n.t('Assistant messages')}>
+						<span class="text-xs text-gray-900 dark:text-white">
+							{usage.totals.assistant_messages.toLocaleString()} · {usage.insights
+								.assistant_message_share}%
+						</span>
+					</UserSettingRow>
+					<UserSettingRow label={$i18n.t('Total chats')}>
+						<span class="text-xs text-gray-900 dark:text-white">
+							{usage.totals.total_chats.toLocaleString()}
+						</span>
+					</UserSettingRow>
+				</UserSettingSection>
+
+				<UserSettingSection title={$i18n.t('Top models')}>
+					{#if usage.top_models.length === 0}
+						<div class="text-xs text-gray-500 dark:text-gray-400">
+							{$i18n.t('No model usage found')}
+						</div>
+					{:else}
+						{#each usage.top_models as model}
+							<UserSettingRow label={modelName(model.model_id)}>
+								<span class="text-xs text-gray-500 dark:text-gray-400">
+									{model.messages.toLocaleString()}
+									{$i18n.t('messages')} · {formatNumber(model.total_tokens)}
+								</span>
+							</UserSettingRow>
+						{/each}
+					{/if}
+				</UserSettingSection>
+
+				{#if usage.top_tools.length > 0}
+					<UserSettingSection title={$i18n.t('Most used tools')}>
+						{#each usage.top_tools as tool}
+							<UserSettingRow label={tool.name}>
+								<span class="text-xs text-gray-500 dark:text-gray-400">
+									{tool.count.toLocaleString()}
+									{$i18n.t('runs')}
+								</span>
+							</UserSettingRow>
+						{/each}
+					</UserSettingSection>
+				{/if}
+			{/if}
+
+			<div class="mt-4 text-right text-[0.6875rem] text-gray-400 dark:text-gray-600">
+				{$i18n.t('Token counts are estimates and may not reflect actual API usage')}
+			</div>
+		</div>
+	{/if}
+</div>

src/lib/components/chat/SettingsModal.svelte

@@ -17,6 +17,7 @@
 	import Shortcuts from './Settings/Shortcuts.svelte';
 	import Audio from './Settings/Audio.svelte';
 	import DataControls from './Settings/DataControls.svelte';
+	import Usage from './Settings/Usage.svelte';
 	import ArchivedChats from './Settings/ArchivedChats.svelte';
 	import Personalization from './Settings/Personalization.svelte';
 	import Search from '../icons/Search.svelte';
@@ -35,6 +36,7 @@
 	import ArchiveBox from '../icons/ArchiveBox.svelte';
 	import ChevronLeft from '../icons/ChevronLeft.svelte';
 	import Keyboard from '../icons/Keyboard.svelte';
+	import UsageIcon from '../icons/UsageIcon.svelte';
 	import AdminTabIcon from '$lib/components/admin/Settings/AdminTabIcon.svelte';
 	import AdminGeneral from '$lib/components/admin/Settings/General.svelte';
 	import AdminAuthentication from '$lib/components/admin/Settings/Authentication.svelte';
@@ -108,6 +110,7 @@
 		personalization: 'Preferences',
 		audio: 'Preferences',
 		data_controls: 'Data',
+		usage: 'Data',
 		archived_chats: 'Data',
 		account: 'Profile',
 		about: 'Profile'
@@ -493,6 +496,24 @@
 				'messagehistory'
 			]
 		},
+		{
+			id: 'usage',
+			title: 'Usage',
+			keywords: [
+				'activity',
+				'activity heatmap',
+				'analytics',
+				'chat activity',
+				'heatmap',
+				'model usage',
+				'stats',
+				'streak',
+				'token activity',
+				'token usage',
+				'tokens',
+				'usage'
+			]
+		},
 		{
 			id: 'archived_chats',
 			title: 'Archived Chats',
@@ -1033,6 +1054,19 @@
 							<DatabaseSettings className="size-3.5" strokeWidth="2" />
 							<span>{$i18n.t('Data Controls')}</span>
 						</button>
+					{:else if tabId === 'usage'}
+						<button
+							role="tab"
+							aria-controls="tab-usage"
+							aria-selected={selectedTab === 'usage'}
+							class={tabButtonClass(selectedTab === 'usage')}
+							on:click={() => {
+								selectedTab = 'usage';
+							}}
+						>
+							<UsageIcon className="size-3.5" strokeWidth="2" />
+							<span>{$i18n.t('Usage')}</span>
+						</button>
 					{:else if tabId === 'archived_chats'}
 						<button
 							role="tab"
@@ -1168,6 +1202,8 @@
 				/>
 			{:else if selectedTab === 'data_controls'}
 				<DataControls {saveSettings} />
+			{:else if selectedTab === 'usage'}
+				<Usage />
 			{:else if selectedTab === 'archived_chats'}
 				<ArchivedChats />
 			{:else if selectedTab === 'account'}

src/lib/components/icons/UsageIcon.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width={strokeWidth}
+	class={className}
+>
+	<path d="M20 20H4V4" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M4 16.5L12 9L15 12L19.5 7.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>