feat(webpanel): compare running artifact against recommended build

apps/webpanel/src/components/sidebar/server-status.tsx

@@ -8,6 +8,9 @@ import { Card, CardContent } from '@fxmanager/ui/components/card';
 import { Badge } from '@fxmanager/ui/components/badge';
 import { STATUS_VARIANT } from '@/static/server-state';
 import { formatDuration, formatRemaining, isServerRunning } from '@/lib/utils';
+import { compareArtifactBuilds } from '@/lib/artifact-version';
+import { ARTIFACT_STATE } from '@/static/artifact-state';
+import { cn } from '@fxmanager/ui/lib/utils';
 import { Button } from '@fxmanager/ui/components/button';
 import {
 	ArrowUpCircle,
@@ -31,6 +34,7 @@ import { useSchedule } from '@/hooks/use-schedule';
 import { useEffect, useState } from 'react';
 
 const TEMP_PRESETS = [5, 15, 30] as const;
+const ARTIFACTS_URL = 'https://artifacts.jgscripts.com/';
 
 interface ActionButtonProps {
 	Icon: LucideIcon;
@@ -79,6 +83,12 @@ export function ServerStatusCard() {
 	const { state: sideBarState, setOpen } = useSidebar();
 	const { status: schedule, restartIn, skip } = useSchedule();
 	const isCollapsed = sideBarState === 'collapsed';
+	const artifactStatus = compareArtifactBuilds(
+		serverState.version,
+		recommendedArtifact,
+	);
+	const artifactState =
+		artifactStatus === 'unknown' ? null : ARTIFACT_STATE[artifactStatus];
 	const canStart =
 		serverState.status === 'stopped' || serverState.status === 'crashed';
 	const canStop =
@@ -205,25 +215,29 @@ export function ServerStatusCard() {
 						</Button>
 					</div>
 					{serverState.version && (
-						<div className="space-y-3 border-t pt-3">
+						<div className="space-y-2 border-t pt-3">
 							<div className="flex flex-row justify-between">
 								<p>Artifact</p>
 								<p className="font-mono">b{serverState.version}</p>
 							</div>
-							{recommendedArtifact && (
-								<div className="flex flex-row justify-between">
-									<p>Recommended</p>
-									<a
-										href="https://artifacts.jgscripts.com/"
-										target="_blank"
-										rel="noreferrer"
-										className="inline-flex items-center gap-1 font-mono text-primary hover:underline"
-										title="Source: artifacts.jgscripts.com"
-									>
-										b{recommendedArtifact}
-										<ExternalLink className="h-3 w-3" />
-									</a>
-								</div>
+							{/* a state implies a recommended build — the check narrows it to a string */}
+							{recommendedArtifact && artifactState && (
+								<a
+									href={ARTIFACTS_URL}
+									target="_blank"
+									rel="noreferrer"
+									className={cn(
+										'flex items-center gap-2 rounded-md border px-2 py-1.5 text-xs transition-colors',
+										artifactState.className,
+									)}
+									title="Source: artifacts.jgscripts.com"
+								>
+									<artifactState.Icon className="h-3.5 w-3.5 shrink-0" />
+									<span className="flex-1">
+										{artifactState.label(recommendedArtifact)}
+									</span>
+									<ExternalLink className="h-3 w-3 shrink-0" />
+								</a>
 							)}
 						</div>
 					)}

apps/webpanel/src/lib/artifact-version.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'bun:test';
+import { compareArtifactBuilds } from './artifact-version';
+
+describe('compareArtifactBuilds', () => {
+	it('flags a running build older than the recommended one', () => {
+		expect(compareArtifactBuilds('13068', '31725')).toBe('outdated');
+	});
+
+	it('reports a match when both builds are identical', () => {
+		expect(compareArtifactBuilds('31725', '31725')).toBe('current');
+	});
+
+	it('reports ahead when running a build newer than recommended', () => {
+		expect(compareArtifactBuilds('31726', '31725')).toBe('ahead');
+	});
+
+	it('compares numerically rather than lexicographically', () => {
+		expect(compareArtifactBuilds('9999', '13068')).toBe('outdated');
+		expect(compareArtifactBuilds('13068', '9999')).toBe('ahead');
+	});
+
+	it('returns unknown while either side is still missing', () => {
+		expect(compareArtifactBuilds(null, '31725')).toBe('unknown');
+		expect(compareArtifactBuilds('31725', null)).toBe('unknown');
+		expect(compareArtifactBuilds(null, null)).toBe('unknown');
+		expect(compareArtifactBuilds(undefined, undefined)).toBe('unknown');
+	});
+
+	it('returns unknown for values that are not build numbers', () => {
+		expect(compareArtifactBuilds('unknown', '31725')).toBe('unknown');
+		expect(compareArtifactBuilds('31725', 'v1.0.0.31725')).toBe('unknown');
+		expect(compareArtifactBuilds('b31725', '31725')).toBe('unknown');
+		expect(compareArtifactBuilds('', '31725')).toBe('unknown');
+		expect(compareArtifactBuilds('123', '31725')).toBe('unknown');
+	});
+});

apps/webpanel/src/lib/artifact-version.ts

@@ -0,0 +1,30 @@
+const BUILD_NUMBER_REGEX = /^\d{4,8}$/;
+
+export type ArtifactStatus = 'unknown' | 'outdated' | 'current' | 'ahead';
+
+/**
+ * Compare the running FXServer build against the recommended one.
+ *
+ * Both sides are bare build numbers (e.g. '13068') — the running one comes off
+ * the server_state socket, the recommended one from /server/artifact/recommended.
+ * Anything missing or not shaped like a build yields 'unknown' so the UI stays
+ * quiet instead of claiming an artifact is outdated on bad data.
+ */
+export function compareArtifactBuilds(
+	current: string | null | undefined,
+	recommended: string | null | undefined,
+): ArtifactStatus {
+	if (!current || !recommended) return 'unknown';
+	if (
+		!BUILD_NUMBER_REGEX.test(current) ||
+		!BUILD_NUMBER_REGEX.test(recommended)
+	)
+		return 'unknown';
+
+	const currentBuild = Number(current);
+	const recommendedBuild = Number(recommended);
+
+	if (currentBuild === recommendedBuild) return 'current';
+
+	return currentBuild < recommendedBuild ? 'outdated' : 'ahead';
+}

apps/webpanel/src/static/artifact-state.tsx

@@ -0,0 +1,51 @@
+import {
+	ArrowUpCircle,
+	CheckCircle2,
+	Info,
+	type LucideIcon,
+} from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { ArtifactStatus } from '@/lib/artifact-version';
+
+interface ArtifactStatePresentation {
+	Icon: LucideIcon;
+	className: string;
+	label: (recommended: string) => ReactNode;
+}
+
+/**
+ * Presentation for the artifact status strip. Every state renders the same
+ * strip so the card reads consistently — only the tone, icon and wording
+ * differ, which keeps the primary accent on the one state that asks the admin
+ * to do something. 'unknown' has no entry: nothing is claimed when either
+ * build is missing.
+ */
+export const ARTIFACT_STATE: Record<
+	Exclude<ArtifactStatus, 'unknown'>,
+	ArtifactStatePresentation
+> = {
+	outdated: {
+		Icon: ArrowUpCircle,
+		className:
+			'border-primary/30 bg-primary/10 text-primary hover:bg-primary/20',
+		label: (recommended) => (
+			<>
+				<span className="font-mono">b{recommended}</span> recommended
+			</>
+		),
+	},
+	current: {
+		Icon: CheckCircle2,
+		className: 'border-border bg-muted/50 text-muted-foreground hover:bg-muted',
+		label: () => 'Up to date',
+	},
+	ahead: {
+		Icon: Info,
+		className: 'border-border bg-muted/50 text-muted-foreground hover:bg-muted',
+		label: (recommended) => (
+			<>
+				Ahead of <span className="font-mono">b{recommended}</span>
+			</>
+		),
+	},
+};