display latency, tokens and prvider

src/lib/components/chat/Assistant.svelte

@@ -12,7 +12,7 @@
 	import { MessageCirclePlus, Star } from '@lucide/svelte';
 	import { mode } from 'mode-watcher';
 
-	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
+	import type { ChatModel, ChatMessage, TokenUsage } from '$lib/helpers/types';
 	import { Button } from '$lib/components/ui/button';
 	import Message from './Message.svelte';
 	import Spinner from '$lib/components/loading/Spinner.svelte';
@@ -27,6 +27,7 @@
 	let selectedModel = $derived((nodeData.current?.data.selectedModel as ChatModel) ?? null);
 	let messages = $derived((nodeData.current?.data.messages as ChatMessage[]) ?? []);
 	let loading = $derived((nodeData.current?.data.loading as boolean) ?? false);
+	let usage = $derived((nodeData.current?.data.usage as TokenUsage) ?? null);
 	let message = $derived(
 		nodeData.current?.data.content
 			? ({
@@ -134,9 +135,34 @@
 		{/if}
 		{#if message}
 			<div bind:this={containerRef}>
-				<Message {message} provider={selectedModel.provider} />
+				<Message {message} />
 			</div>
 		{/if}
+		{#if usage && !loading && message}
+			{@const provider = selectedModel.provider}
+			<p class="mt-3 border-t border-border pt-3 text-xs text-muted-foreground">
+				{usage.total_tokens} tokens
+				{#if message.timestamp}
+					<span class="mx-0.5">&middot;</span> Latency {message.timestamp}ms
+				{/if}
+				<span class="inline-flex items-center gap-0.5">
+					<span>&middot;</span> Using
+					<span class="inline-flex items-center gap-0.5 rounded-full bg-muted px-1 py-0.5">
+						{#if provider === 'auto'}
+							<Star class="size-3.5 fill-yellow-500 text-yellow-500" />
+						{:else}
+							<img
+								src={`https://huggingface.co/api/avatars/${provider}`}
+								alt={provider}
+								class="size-4 rounded"
+							/>
+						{/if}
+						{provider}
+					</span>
+					provider
+				</span>
+			</p>
+		{/if}
 	</div>
 	<Button
 		variant={mode.current === 'dark' ? 'default' : 'outline'}

src/lib/components/chat/Message.svelte

@@ -11,9 +11,8 @@
 	import ListItem from './markdown/ListItem.svelte';
 	import Link from './markdown/Link.svelte';
 	import Hr from './markdown/Hr.svelte';
-	import { Star } from '@lucide/svelte';
 
-	let { message, provider }: { message: ChatMessage; provider?: string } = $props();
+	let { message }: { message: ChatMessage } = $props();
 
 	const renderers = {
 		paragraph: Paragraph,
@@ -37,24 +36,5 @@
 		</p>
 	{:else}
 		<SvelteMarkdown source={message.content} renderers={renderers as any} />
-		{#if message.timestamp}
-			<p class="flex items-center gap-1 text-xs text-muted-foreground/70 select-none">
-				Generated in
-				{message.timestamp / 1000}s using
-				<span class="flex items-center gap-1 rounded bg-muted py-0.5 pr-1 pl-0.5">
-					{#if provider === 'auto'}
-						<Star class="size-4 fill-yellow-500 text-yellow-500" />
-					{:else}
-						<img
-							src={`https://huggingface.co/api/avatars/${provider}`}
-							alt={provider}
-							class="size-4 rounded"
-						/>
-					{/if}
-					{provider}
-				</span>
-				provider
-			</p>
-		{/if}
 	{/if}
 </main>

src/lib/components/chat/User.svelte

@@ -12,7 +12,7 @@
 		useSvelteFlow
 	} from '@xyflow/svelte';
 
-	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
+	import type { ChatModel, ChatMessage, TokenUsage } from '$lib/helpers/types';
 	import { Button } from '$lib/components/ui/button';
 	import ComboBoxModels from '$lib/components/model/ComboBoxModels.svelte';
 	import Spinner from '$lib/components/loading/Spinner.svelte';
@@ -143,6 +143,7 @@
 				if (!response.body) throw new Error('No response body');
 
 				let content = '';
+				let usage: TokenUsage | null = null;
 
 				const reader = response.body.getReader();
 				const decoder = new TextDecoder();
@@ -154,6 +155,16 @@
 							const errorMessage = content.split('__ERROR__').pop() ?? 'Unknown error';
 							throw new Error(errorMessage);
 						}
+						if (content.includes('__USAGE__')) {
+							const usageParts = content.split('__USAGE__');
+							const usageJson = usageParts.pop() ?? '';
+							content = usageParts.join('').trimEnd();
+							try {
+								usage = JSON.parse(usageJson) as TokenUsage;
+							} catch {
+								// ignore malformed usage JSON
+							}
+						}
 						const newNodeId = `user-${crypto.randomUUID()}`;
 						const newNode: Node = {
 							id: newNodeId,
@@ -178,7 +189,14 @@
 						const end = Date.now();
 						updateNodeData(
 							node.id,
-							{ ...node.data, content, timestamp: end - start, loading: false, messages },
+							{
+								...node.data,
+								content,
+								timestamp: end - start,
+								loading: false,
+								messages,
+								usage
+							},
 							{ replace: true }
 						);
 						break;

src/lib/helpers/types.ts

@@ -19,6 +19,13 @@ export interface ChatMessage {
 	isHidden?: boolean;
 }
 
+export interface TokenUsage {
+	prompt_tokens: number;
+	completion_tokens: number;
+	total_tokens: number;
+	reasoning_tokens: number;
+}
+
 export interface HFUser {
 	id: string;
 	name: string;

src/routes/api/+server.ts

@@ -33,6 +33,20 @@ export async function POST({ request }: RequestEvent) {
 			try {
 				for await (const chunk of stream) {
 					const content = chunk.choices?.[0]?.delta?.content ?? '';
+					const usage = chunk.usage;
+					if (usage) {
+						const usageData = {
+							prompt_tokens: usage.prompt_tokens ?? 0,
+							completion_tokens: usage.completion_tokens ?? 0,
+							total_tokens: usage.total_tokens ?? 0,
+						reasoning_tokens:
+							(usage.completion_tokens_details as Record<string, number>)
+								?.reasoning_tokens ?? 0
+						};
+						controller.enqueue(
+							encoder.encode(`\n\n__USAGE__${JSON.stringify(usageData)}`)
+						);
+					}
 					if (content) {
 						controller.enqueue(encoder.encode(content));
 					}