From e37a09ef0d82f4c46b064579d84614509b9a6e8c Mon Sep 17 00:00:00 2001
From: domrichardson <100129001+domrichardson@users.noreply.github.com>
Date: Thu, 25 Jun 2026 10:10:43 +0100
Subject: [PATCH] feat: Servers status icon

---
 web/app/servers/page.tsx | 54 +++++++++++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 14 deletions(-)

diff --git a/web/app/servers/page.tsx b/web/app/servers/page.tsx
index 932b9df..c9758ab 100644
--- a/web/app/servers/page.tsx
+++ b/web/app/servers/page.tsx
@@ -2,19 +2,40 @@
 
 import { useQuery } from "@tanstack/react-query";
 import Link from "next/link";
-import { api, Server, ServerStatus } from "@/lib/api";
-import { Badge, Button, Card } from "@/components/ui";
+import { api, Server } from "@/lib/api";
+import { Button, Card } from "@/components/ui";
 import { Table, Thead, Tbody, Tr, Th, Td } from "@/components/ui";
 
-function statusVariant(status: ServerStatus) {
-  switch (status) {
-    case "active":
-      return "success";
-    case "pending":
-      return "warning";
-    case "offline":
-      return "danger";
-  }
+
+type DotStatus = "offline" | "needs-update" | "has-package-updates" | "ok";
+
+function resolveStatus(server: Server, latestVersion: string | undefined): DotStatus {
+  if (server.status === "offline" || server.status === "pending") return "offline";
+  if (latestVersion && server.agent_version && server.agent_version !== latestVersion) return "needs-update";
+  if (server.available_updates && server.available_updates.length > 0) return "has-package-updates";
+  return "ok";
+}
+
+const DOT_CLASSES: Record<DotStatus, string> = {
+  offline:             "bg-danger",
+  "needs-update":      "bg-orange-500",
+  "has-package-updates": "bg-yellow-400",
+  ok:                  "bg-success",
+};
+
+const DOT_LABELS: Record<DotStatus, string> = {
+  offline:             "Offline",
+  "needs-update":      "Agent needs updating",
+  "has-package-updates": "Package updates available",
+  ok:                  "OK",
+};
+
+function StatusDot({ status }: { status: DotStatus }) {
+  return (
+    <span title={DOT_LABELS[status]} className="flex items-center">
+      <span className={`inline-block h-2.5 w-2.5 rounded-full ${DOT_CLASSES[status]}`} />
+    </span>
+  );
 }
 
 function formatLastSeen(dateStr: string): string {
@@ -39,6 +60,13 @@ export default function ServersPage() {
     refetchInterval: 30_000,
   });
 
+  const { data: latestVersionData } = useQuery({
+    queryKey: ["agent-latest-version"],
+    queryFn: api.getLatestAgentVersion,
+    staleTime: 5 * 60_000,
+  });
+  const latestVersion = latestVersionData?.version;
+
   return (
     <div className="p-8">
       <div className="mb-6 flex items-center justify-between">
@@ -96,9 +124,7 @@ export default function ServersPage() {
                     <span className="text-text-secondary">{server.os_info}</span>
                   </Td>
                   <Td>
-                    <Badge variant={statusVariant(server.status)}>
-                      {server.status}
-                    </Badge>
+                    <StatusDot status={resolveStatus(server, latestVersion)} />
                   </Td>
                   <Td>
                     <span className="text-text-secondary">