Add context info to server error (#17663)

* fix: Add context info to server error

* chore: update webui build output

Author: allozaur

tools/server/public/index.html.gz

@@ -575,6 +575,7 @@
 
 <DialogChatError
 	message={activeErrorDialog?.message ?? ''}
+	contextInfo={activeErrorDialog?.contextInfo}
 	onOpenChange={handleErrorDialogOpenChange}
 	open={Boolean(activeErrorDialog)}
 	type={activeErrorDialog?.type ?? 'server'}

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte

@@ -6,10 +6,11 @@
 		open: boolean;
 		type: 'timeout' | 'server';
 		message: string;
+		contextInfo?: { n_prompt_tokens: number; n_ctx: number };
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { open = $bindable(), type, message, onOpenChange }: Props = $props();
+	let { open = $bindable(), type, message, contextInfo, onOpenChange }: Props = $props();
 
 	const isTimeout = $derived(type === 'timeout');
 	const title = $derived(isTimeout ? 'TCP Timeout' : 'Server Error');
@@ -51,6 +52,15 @@
 
 		<div class={`rounded-lg border px-4 py-3 text-sm ${badgeClass}`}>
 			<p class="font-medium">{message}</p>
+			{#if contextInfo}
+				<div class="mt-2 space-y-1 text-xs opacity-80">
+					<p>
+						<span class="font-medium">Prompt tokens:</span>
+						{contextInfo.n_prompt_tokens.toLocaleString()}
+					</p>
+					<p><span class="font-medium">Context size:</span> {contextInfo.n_ctx.toLocaleString()}</p>
+				</div>
+			{/if}
 		</div>
 
 		<AlertDialog.Footer>

tools/server/webui/src/lib/components/app/dialogs/DialogChatError.svelte

@@ -764,18 +764,33 @@ export class ChatService {
 	 * @param response - HTTP response object
 	 * @returns Promise<Error> - Parsed error with context info if available
 	 */
-	private static async parseErrorResponse(response: Response): Promise<Error> {
+	private static async parseErrorResponse(
+		response: Response
+	): Promise<Error & { contextInfo?: { n_prompt_tokens: number; n_ctx: number } }> {
 		try {
 			const errorText = await response.text();
 			const errorData: ApiErrorResponse = JSON.parse(errorText);
 
 			const message = errorData.error?.message || 'Unknown server error';
-			const error = new Error(message);
+			const error = new Error(message) as Error & {
+				contextInfo?: { n_prompt_tokens: number; n_ctx: number };
+			};
 			error.name = response.status === 400 ? 'ServerError' : 'HttpError';
 
+			if (errorData.error && 'n_prompt_tokens' in errorData.error && 'n_ctx' in errorData.error) {
+				error.contextInfo = {
+					n_prompt_tokens: errorData.error.n_prompt_tokens,
+					n_ctx: errorData.error.n_ctx
+				};
+			}
+
 			return error;
 		} catch {
-			const fallback = new Error(`Server error (${response.status}): ${response.statusText}`);
+			const fallback = new Error(
+				`Server error (${response.status}): ${response.statusText}`
+			) as Error & {
+				contextInfo?: { n_prompt_tokens: number; n_ctx: number };
+			};
 			fallback.name = 'HttpError';
 			return fallback;
 		}