tools/ui/src/lib/components/app/server/ServerStatus.svelte

<script lang="ts">
	import { AlertTriangle, Server } from '@lucide/svelte';
	import { Badge } from '$lib/components/ui/badge';
	import { Button } from '$lib/components/ui/button';
	import { ICON_CLASS_DEFAULT } from '$lib/constants';
	import { modelsStore, serverStore } from '$lib/stores';

	interface Props {
		class?: string;
		showActions?: boolean;
	}

	let { class: className = '', showActions = false }: Props = $props();

	let error = $derived(serverStore.error);
	let loading = $derived(serverStore.loading);
	let model = $derived(modelsStore.singleModelName);
	let serverData = $derived(serverStore.props);

	function getStatusColor() {
		if (loading) return 'bg-yellow-500';

		if (error) return 'bg-red-500';

		if (serverData) return 'bg-green-500';

		return 'bg-gray-500';
	}

	function getStatusText() {
		if (loading) return 'Connecting...';

		if (error) return 'Connection Error';

		if (serverData) return 'Connected';

		return 'Unknown';
	}
</script>

<div class="flex items-center space-x-3 {className}">
	<div class="flex items-center space-x-2">
		<div class="h-2 w-2 rounded-full {getStatusColor()}"></div>

		<span class="text-sm text-muted-foreground">{getStatusText()}</span>
	</div>

	{#if serverData && !error}
		<Badge class="text-xs" variant="outline">
			<Server class="mr-1 h-3 w-3" />

			{model || 'Unknown Model'}
		</Badge>

		{#if serverData?.default_generation_settings?.n_ctx}
			<Badge class="text-xs" variant="secondary">
				ctx: {serverData.default_generation_settings.n_ctx.toLocaleString()}
			</Badge>
		{/if}
	{/if}

	{#if showActions && error}
		<Button class="text-destructive" size="sm" variant="outline">
			<AlertTriangle class={ICON_CLASS_DEFAULT} />

			{error}
		</Button>
	{/if}
</div>