From 9757c3d8b6859780c0195ca90dcbfd69cbf1b226 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Fri, 1 May 2026 16:26:45 -0700
Subject: [PATCH] show newt version on site

---
 messages/en-US.json             |   1 +
 server/routers/site/getSite.ts  |  12 ++-
 src/components/SiteInfoCard.tsx | 178 +++++++++++++++++++++-----------
 3 files changed, 128 insertions(+), 63 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index eb4d3ae3c..c3e062edb 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -763,6 +763,7 @@
     "newtEndpoint": "Endpoint",
     "newtId": "ID",
     "newtSecretKey": "Secret",
+    "newtVersion": "Version",
     "architecture": "Architecture",
     "sites": "Sites",
     "siteWgAnyClients": "Use any WireGuard client to connect. You will have to address internal resources using the peer IP.",
diff --git a/server/routers/site/getSite.ts b/server/routers/site/getSite.ts
index 45d49abe6..a16547b8d 100644
--- a/server/routers/site/getSite.ts
+++ b/server/routers/site/getSite.ts
@@ -42,9 +42,12 @@ async function query(siteId?: number, niceId?: string, orgId?: string) {
     }
 }
 
-export type GetSiteResponse = NonNullable<
-    Awaited<ReturnType<typeof query>>
->["sites"] & { newtId: string | null };
+type SiteQueryRow = NonNullable<Awaited<ReturnType<typeof query>>>;
+
+export type GetSiteResponse = SiteQueryRow["sites"] & {
+    newtId: string | null;
+    newtVersion: string | null;
+};
 
 registry.registerPath({
     method: "get",
@@ -100,7 +103,8 @@ export async function getSite(
 
         const data: GetSiteResponse = {
             ...site.sites,
-            newtId: site.newt ? site.newt.newtId : null
+            newtId: site.newt ? site.newt.newtId : null,
+            newtVersion: site.newt?.version ?? null
         };
 
         return response<GetSiteResponse>(res, {
diff --git a/src/components/SiteInfoCard.tsx b/src/components/SiteInfoCard.tsx
index 56492ff54..91a924e58 100644
--- a/src/components/SiteInfoCard.tsx
+++ b/src/components/SiteInfoCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { useSiteContext } from "@app/hooks/useSiteContext";
 import {
     InfoSection,
@@ -9,77 +9,137 @@ import {
     InfoSectionTitle
 } from "@app/components/InfoSection";
 import { useTranslations } from "next-intl";
-import { useEnvContext } from "@app/hooks/useEnvContext";
 
 type SiteInfoCardProps = {};
 
-export default function SiteInfoCard({}: SiteInfoCardProps) {
-    const { site, updateSite } = useSiteContext();
-    const t = useTranslations();
-    const { env } = useEnvContext();
+function formatPublicEndpoint(endpoint: string) {
+    return endpoint.includes(":")
+        ? endpoint.substring(0, endpoint.lastIndexOf(":"))
+        : endpoint;
+}
 
-    const getConnectionTypeString = (type: string) => {
-        if (type === "newt") {
-            return "Newt";
-        } else if (type === "wireguard") {
-            return "WireGuard";
-        } else if (type === "local") {
-            return t("local");
-        } else {
-            return t("unknown");
-        }
-    };
+export default function SiteInfoCard({}: SiteInfoCardProps) {
+    const { site } = useSiteContext();
+    const t = useTranslations();
+
+    const identifierSection = (
+        <InfoSection>
+            <InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
+            <InfoSectionContent>{site.niceId}</InfoSectionContent>
+        </InfoSection>
+    );
+
+    const statusSection = (
+        <InfoSection>
+            <InfoSectionTitle>{t("status")}</InfoSectionTitle>
+            <InfoSectionContent>
+                {site.online ? (
+                    <div className="text-green-500 flex items-center space-x-2">
+                        <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                        <span>{t("online")}</span>
+                    </div>
+                ) : (
+                    <div className="text-neutral-500 flex items-center space-x-2">
+                        <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
+                        <span>{t("offline")}</span>
+                    </div>
+                )}
+            </InfoSectionContent>
+        </InfoSection>
+    );
+
+    const endpointSection = site.endpoint ? (
+        <InfoSection>
+            <InfoSectionTitle>{t("publicIpEndpoint")}</InfoSectionTitle>
+            <InfoSectionContent>
+                {formatPublicEndpoint(site.endpoint)}
+            </InfoSectionContent>
+        </InfoSection>
+    ) : null;
+
+    if (site.type === "newt") {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <InfoSections cols={site.endpoint ? 5 : 4}>
+                        {identifierSection}
+                        {statusSection}
+                        <InfoSection>
+                            <InfoSectionTitle>
+                                {t("connectionType")}
+                            </InfoSectionTitle>
+                            <InfoSectionContent>Newt</InfoSectionContent>
+                        </InfoSection>
+                        <InfoSection>
+                            <InfoSectionTitle>
+                                {t("newtVersion")}
+                            </InfoSectionTitle>
+                            <InfoSectionContent>
+                                {site.newtVersion
+                                    ? `v${site.newtVersion}`
+                                    : "-"}
+                            </InfoSectionContent>
+                        </InfoSection>
+                        {endpointSection}
+                    </InfoSections>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (site.type === "wireguard") {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <InfoSections cols={site.endpoint ? 4 : 3}>
+                        {identifierSection}
+                        {statusSection}
+                        <InfoSection>
+                            <InfoSectionTitle>
+                                {t("connectionType")}
+                            </InfoSectionTitle>
+                            <InfoSectionContent>WireGuard</InfoSectionContent>
+                        </InfoSection>
+                        {endpointSection}
+                    </InfoSections>
+                </AlertDescription>
+            </Alert>
+        );
+    }
+
+    if (site.type === "local") {
+        return (
+            <Alert>
+                <AlertDescription>
+                    <InfoSections cols={site.endpoint ? 3 : 2}>
+                        {identifierSection}
+                        <InfoSection>
+                            <InfoSectionTitle>
+                                {t("connectionType")}
+                            </InfoSectionTitle>
+                            <InfoSectionContent>
+                                {t("local")}
+                            </InfoSectionContent>
+                        </InfoSection>
+                        {endpointSection}
+                    </InfoSections>
+                </AlertDescription>
+            </Alert>
+        );
+    }
 
     return (
         <Alert>
             <AlertDescription>
-                <InfoSections cols={site.endpoint ? 4 : 3}>
-                    <InfoSection>
-                        <InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
-                        <InfoSectionContent>{site.niceId}</InfoSectionContent>
-                    </InfoSection>
-                    {(site.type == "newt" || site.type == "wireguard") && (
-                        <>
-                            <InfoSection>
-                                <InfoSectionTitle>
-                                    {t("status")}
-                                </InfoSectionTitle>
-                                <InfoSectionContent>
-                                    {site.online ? (
-                                        <div className="text-green-500 flex items-center space-x-2">
-                                            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                                            <span>{t("online")}</span>
-                                        </div>
-                                    ) : (
-                                        <div className="text-neutral-500 flex items-center space-x-2">
-                                            <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
-                                            <span>{t("offline")}</span>
-                                        </div>
-                                    )}
-                                </InfoSectionContent>
-                            </InfoSection>
-                        </>
-                    )}
+                <InfoSections cols={site.endpoint ? 3 : 2}>
+                    {identifierSection}
                     <InfoSection>
                         <InfoSectionTitle>
                             {t("connectionType")}
                         </InfoSectionTitle>
-                        <InfoSectionContent>
-                            {getConnectionTypeString(site.type)}
-                        </InfoSectionContent>
+                        <InfoSectionContent>{t("unknown")}</InfoSectionContent>
                     </InfoSection>
-                    {site.endpoint && (
-                        <InfoSection>
-                            <InfoSectionTitle>
-                                {t("publicIpEndpoint")}
-                            </InfoSectionTitle>
-                            <InfoSectionContent>
-                                {site.endpoint.includes(":")
-                                    ? site.endpoint.substring(0, site.endpoint.lastIndexOf(":"))
-                                    : site.endpoint}
-                            </InfoSectionContent>
-                        </InfoSection>
-                    )}
+                    {endpointSection}
                 </InfoSections>
             </AlertDescription>
         </Alert>