update telemetry

messages/en-US.json

@@ -3142,5 +3142,35 @@
     "idpDeleteAllOrgsMenu": "Delete",
     "publicIpEndpoint": "Endpoint",
     "lastTriggeredAt": "Last Trigger",
-    "reject": "Reject"
+    "reject": "Reject",
+    "uptimeDaysAgo": "{count} days ago",
+    "uptimeToday": "Today",
+    "uptimeNoDataAvailable": "No data available",
+    "uptimeSuffix": "uptime",
+    "uptimeDowntimeSuffix": "downtime",
+    "uptimeTooltipUptimeLabel": "Uptime",
+    "uptimeTooltipDowntimeLabel": "Downtime",
+    "uptimeOngoing": "ongoing",
+    "uptimeNoMonitoringData": "No monitoring data",
+    "uptimeNoData": "No data",
+    "uptimeMiniBarDown": "Down",
+    "uptimeSectionTitle": "Uptime",
+    "uptimeSectionDescription": "Site availability over the last {days} days.",
+    "uptimeAddAlert": "Add Alert",
+    "uptimeViewAlerts": "View Alerts",
+    "uptimeCreateEmailAlert": "Create Email Alert",
+    "uptimeAlertDescriptionSite": "Get notified by email when this site goes offline or comes back online.",
+    "uptimeAlertDescriptionResource": "Get notified by email when this resource goes offline or comes back online.",
+    "uptimeAlertNamePlaceholder": "Alert name",
+    "uptimeAdditionalEmails": "Additional Emails",
+    "uptimeCreateAlert": "Create Alert",
+    "uptimeAlertNoRecipients": "No recipients",
+    "uptimeAlertNoRecipientsDescription": "Please add at least one user, role, or email to notify.",
+    "uptimeAlertCreated": "Alert created",
+    "uptimeAlertCreatedDescription": "You will be notified when this changes status.",
+    "uptimeAlertCreateFailed": "Failed to create alert",
+    "webhookUrlLabel": "URL",
+    "webhookHeaderKeyPlaceholder": "Key",
+    "webhookHeaderValuePlaceholder": "Value",
+    "alertLabel": "Alert"
 }

server/lib/telemetry.ts

@@ -2,7 +2,7 @@ import { PostHog } from "posthog-node";
 import config from "./config";
 import { getHostMeta } from "./hostMeta";
 import logger from "@server/logger";
-import { apiKeys, db, roles, siteResources } from "@server/db";
+import { alertRules, apiKeys, blueprints, db, roles, siteResources } from "@server/db";
 import { sites, users, orgs, resources, clients, idp } from "@server/db";
 import { eq, count, notInArray, and, isNotNull, isNull } from "drizzle-orm";
 import { APP_VERSION } from "./consts";
@@ -15,6 +15,7 @@ class TelemetryClient {
     private client: PostHog | null = null;
     private enabled: boolean;
     private intervalId: NodeJS.Timeout | null = null;
+    private collectionIntervalDays = 14;
 
     constructor() {
         const enabled = config.getRawConfig().app.telemetry.anonymous_usage;
@@ -33,7 +34,7 @@ class TelemetryClient {
             this.client = new PostHog(
                 "phc_QYuATSSZt6onzssWcYJbXLzQwnunIpdGGDTYhzK3VjX",
                 {
-                    host: "https://pangolin.net/relay-O7yI"
+                    host: "https://telemetry.fossorial.io/relay-O7yI"
                 }
             );
 
@@ -72,7 +73,7 @@ class TelemetryClient {
                         logger.debug("Successfully sent analytics data");
                     });
             },
-            336 * 60 * 60 * 1000
+            this.collectionIntervalDays * 24 * 60 * 60 * 1000 // Convert days to milliseconds
         );
 
         this.collectAndSendAnalytics().catch((err) => {
@@ -157,6 +158,14 @@ class TelemetryClient {
                 })
                 .from(sites);
 
+            const [numAlertRules] = await db
+                .select({ count: count() })
+                .from(alertRules);
+
+            const [blueprintsCount] = await db
+                .select({ count: count() })
+                .from(blueprints);
+
             const supporterKey = config.getSupporterData();
 
             const allPrivateResources = await db.select().from(siteResources);
@@ -165,11 +174,14 @@ class TelemetryClient {
             let numPrivResourceAliases = 0;
             let numPrivResourceHosts = 0;
             let numPrivResourceCidr = 0;
+            let numPrivResourceHttp = 0;
             for (const res of allPrivateResources) {
                 if (res.mode === "host") {
                     numPrivResourceHosts += 1;
                 } else if (res.mode === "cidr") {
                     numPrivResourceCidr += 1;
+                } else if (res.mode === "http") {
+                    numPrivResourceHttp += 1;
                 }
 
                 if (res.alias) {
@@ -187,6 +199,9 @@ class TelemetryClient {
                 numPrivateResources: numPrivResources,
                 numPrivateResourceAliases: numPrivResourceAliases,
                 numPrivateResourceHosts: numPrivResourceHosts,
+                numPrivateResourceCidr: numPrivResourceCidr,
+                numPrivateResourceHttp: numPrivResourceHttp,
+                numAlertRules: numAlertRules.count,
                 numUserDevices: userDevicesCount.count,
                 numMachineClients: machineClients.count,
                 numIdentityProviders: idpCount.count,
@@ -197,6 +212,7 @@ class TelemetryClient {
                 appVersion: APP_VERSION,
                 numApiKeys: numApiKeys.count,
                 numCustomRoles: customRoles.count,
+                numBlueprints: blueprintsCount.count,
                 supporterStatus: {
                     valid: supporterKey?.valid || false,
                     tier: supporterKey?.tier || "None",
@@ -285,10 +301,12 @@ class TelemetryClient {
                     num_private_resource_aliases:
                         stats.numPrivateResourceAliases,
                     num_private_resource_hosts: stats.numPrivateResourceHosts,
+                    num_private_resource_cidr: stats.numPrivateResourceCidr,
                     num_user_devices: stats.numUserDevices,
                     num_machine_clients: stats.numMachineClients,
                     num_identity_providers: stats.numIdentityProviders,
                     num_sites_online: stats.numSitesOnline,
+                    num_blueprint_runs: stats.numBlueprints,
                     num_resources_sso_enabled: stats.resources.filter(
                         (r) => r.sso
                     ).length,

server/private/lib/alerts/sendAlertWebhook.ts

@@ -15,6 +15,8 @@ import logger from "@server/logger";
 import { AlertContext, WebhookAlertConfig } from "@server/routers/alertRule/types";
 
 const REQUEST_TIMEOUT_MS = 15_000;
+const MAX_RETRIES = 3;
+const RETRY_BASE_DELAY_MS = 500;
 
 /**
  * Sends a single webhook POST for an alert event.
@@ -49,45 +51,70 @@ export async function sendAlertWebhook(
     const body = JSON.stringify(payload);
     const headers = buildHeaders(webhookConfig);
 
-    const controller = new AbortController();
-    const timeoutHandle = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+    let lastError: Error | undefined;
 
-    let response: Response;
-    try {
-        response = await fetch(url, {
-            method: webhookConfig.method ?? "POST",
-            headers,
-            body,
-            signal: controller.signal
-        });
-    } catch (err: unknown) {
-        const isAbort = err instanceof Error && err.name === "AbortError";
-        if (isAbort) {
-            throw new Error(
-                `Alert webhook: request to "${url}" timed out after ${REQUEST_TIMEOUT_MS} ms`
-            );
-        }
-        const msg = err instanceof Error ? err.message : String(err);
-        throw new Error(`Alert webhook: request to "${url}" failed – ${msg}`);
-    } finally {
-        clearTimeout(timeoutHandle);
-    }
+    for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+        const controller = new AbortController();
+        const timeoutHandle = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
 
-    if (!response.ok) {
-        let snippet = "";
+        let response: Response;
         try {
-            const text = await response.text();
-            snippet = text.slice(0, 300);
-        } catch {
-            // best-effort
+            response = await fetch(url, {
+                method: webhookConfig.method ?? "POST",
+                headers,
+                body,
+                signal: controller.signal
+            });
+        } catch (err: unknown) {
+            clearTimeout(timeoutHandle);
+            const isAbort = err instanceof Error && err.name === "AbortError";
+            if (isAbort) {
+                lastError = new Error(
+                    `Alert webhook: request to "${url}" timed out after ${REQUEST_TIMEOUT_MS} ms`
+                );
+            } else {
+                const msg = err instanceof Error ? err.message : String(err);
+                lastError = new Error(`Alert webhook: request to "${url}" failed – ${msg}`);
+            }
+            if (attempt < MAX_RETRIES) {
+                const delay = RETRY_BASE_DELAY_MS * 2 ** (attempt - 1);
+                logger.warn(
+                    `Alert webhook: attempt ${attempt}/${MAX_RETRIES} failed – retrying in ${delay} ms. ${lastError.message}`
+                );
+                await new Promise((resolve) => setTimeout(resolve, delay));
+            }
+            continue;
+        } finally {
+            clearTimeout(timeoutHandle);
         }
-        throw new Error(
-            `Alert webhook: server at "${url}" returned HTTP ${response.status} ${response.statusText}` +
-                (snippet ? ` – ${snippet}` : "")
-        );
+
+        if (!response.ok) {
+            let snippet = "";
+            try {
+                const text = await response.text();
+                snippet = text.slice(0, 300);
+            } catch {
+                // best-effort
+            }
+            lastError = new Error(
+                `Alert webhook: server at "${url}" returned HTTP ${response.status} ${response.statusText}` +
+                    (snippet ? ` – ${snippet}` : "")
+            );
+            if (attempt < MAX_RETRIES) {
+                const delay = RETRY_BASE_DELAY_MS * 2 ** (attempt - 1);
+                logger.warn(
+                    `Alert webhook: attempt ${attempt}/${MAX_RETRIES} failed – retrying in ${delay} ms. ${lastError.message}`
+                );
+                await new Promise((resolve) => setTimeout(resolve, delay));
+            }
+            continue;
+        }
+
+        logger.debug(`Alert webhook sent successfully to "${url}" for event "${context.eventType}" (attempt ${attempt}/${MAX_RETRIES})`);
+        return;
     }
 
-    logger.debug(`Alert webhook sent successfully to "${url}" for event "${context.eventType}"`);
+    throw lastError ?? new Error(`Alert webhook: all ${MAX_RETRIES} attempts failed for "${url}"`);
 }
 
 // ---------------------------------------------------------------------------

src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx

@@ -161,6 +161,7 @@ function MaintenanceSectionForm({
             </SettingsSectionHeader>
 
             <SettingsSectionBody>
+                <PaidFeaturesAlert tiers={tierMatrix.maintencePage} />
                 <SettingsSectionForm>
                     <Form {...maintenanceForm}>
                         <form
@@ -168,9 +169,6 @@ function MaintenanceSectionForm({
                             className="space-y-4"
                             id="maintenance-settings-form"
                         >
-                            <PaidFeaturesAlert
-                                tiers={tierMatrix.maintencePage}
-                            />
                             <FormField
                                 control={maintenanceForm.control}
                                 name="maintenanceModeEnabled"

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -113,7 +113,7 @@ export default function GeneralPage() {
 
     return (
         <SettingsContainer>
-            {site?.siteId && site?.orgId && (
+            {site?.siteId && site?.orgId && site.type != "local" && (
                 <UptimeAlertSection
                     orgId={site.orgId}
                     siteId={site.siteId}

src/app/globals.css

@@ -41,11 +41,11 @@
 }
 
 .dark {
-    --background: #0d0d0f;
+    --background: #141415;
     --foreground: oklch(0.985 0 0);
-    --card: #0d0d0f;
+    --card: #141415;
     --card-foreground: oklch(0.985 0 0);
-    --popover: #0d0d0f;
+    --popover: #141415;
     --popover-foreground: oklch(0.985 0 0);
     --primary: oklch(0.6717 0.1946 41.93);
     --primary-foreground: oklch(0.98 0.016 73.684);
@@ -65,11 +65,11 @@
     --chart-3: oklch(0.769 0.188 70.08);
     --chart-4: oklch(0.627 0.265 303.9);
     --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: #040404;
+    --sidebar: #0C0C0D;
     --sidebar-foreground: oklch(0.985 0 0);
     --sidebar-primary: oklch(0.646 0.222 41.116);
     --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
-    --sidebar-accent: #131317;
+    --sidebar-accent: #171717;
     --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.646 0.222 41.116);

src/components/BrandingLogo.tsx

@@ -57,11 +57,6 @@ export default function BrandingLogo(props: BrandingLogoProps) {
                 alt="Logo"
                 width={props.width}
                 height={props.height}
-                style={
-                    isNextImage
-                        ? { width: "auto", height: "auto" }
-                        : undefined
-                }
             />
         )
     );

src/components/Credenza.tsx

@@ -84,7 +84,7 @@ const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
     return (
         <CredenzaContent
             className={cn(
-                "overflow-y-auto max-h-[100dvh] md:max-h-[calc(100vh-clamp(3rem,24vh,400px))] md:top-[clamp(1.5rem,12vh,200px)] md:translate-y-0",
+                "flex min-h-0 max-h-[100dvh] flex-col overflow-hidden md:top-[clamp(1.5rem,12vh,200px)] md:max-h-[calc(100vh-clamp(3rem,24vh,400px))] md:translate-y-0",
                 className
             )}
             {...props}
@@ -122,7 +122,10 @@ const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
     const CredenzaHeader = isDesktop ? DialogHeader : SheetHeader;
 
     return (
-        <CredenzaHeader className={cn("-mx-6 px-6", className)} {...props}>
+        <CredenzaHeader
+            className={cn("shrink-0 -mx-6 px-6", className)}
+            {...props}
+        >
             {children}
         </CredenzaHeader>
     );
@@ -151,7 +154,7 @@ const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
     return (
         <div
             className={cn(
-                "px-0 mb-4 space-y-4 overflow-x-hidden min-w-0",
+                "min-h-0 min-w-0 flex-1 space-y-4 overflow-y-auto overflow-x-hidden px-0",
                 className
             )}
             {...props}
@@ -169,7 +172,7 @@ const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
     return (
         <CredenzaFooter
             className={cn(
-                "mt-8 md:mt-0 -mx-6 md:-mb-4 px-6 py-4 border-t border-border gap-2 md:gap-0",
+                "mt-8 shrink-0 border-t border-border py-4 -mx-6 gap-2 px-6 bg-card md:mt-0 md:-mb-4 md:gap-0",
                 className
             )}
             {...props}

src/components/LayoutSidebar.tsx

@@ -165,7 +165,7 @@ export function LayoutSidebar({
                             <Link
                                 href="/admin"
                                 className={cn(
-                                    "flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 rounded-md",
+                                    "flex items-center transition-colors text-muted-foreground hover:text-foreground text-sm w-full hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 rounded-md",
                                     isSidebarCollapsed
                                         ? "px-2 py-2 justify-center"
                                         : "px-3 py-1.5"
@@ -216,7 +216,7 @@ export function LayoutSidebar({
                                         setHasManualToggle(true);
                                         setSidebarStateCookie(false);
                                     }}
-                                    className="rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 transition-colors"
+                                    className="rounded-md p-2 text-muted-foreground hover:text-foreground hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 transition-colors"
                                     aria-label={t("sidebarExpand")}
                                 >
                                     <PanelRightOpen className="h-4 w-4" />

src/components/OrgSelector.tsx

@@ -76,8 +76,8 @@ export function OrgSelector({
                     className={cn(
                         "cursor-pointer transition-colors",
                         isCollapsed
-                            ? "w-full h-16 flex items-center justify-center hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50"
-                            : "w-full px-5 py-4 hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50"
+                            ? "w-full h-16 flex items-center justify-center hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50"
+                            : "w-full px-5 py-4 hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50"
                     )}
                 >
                     {isCollapsed ? (

src/components/PathMatchRenameModal.tsx

@@ -14,6 +14,7 @@ import { Input } from "./ui/input";
 import { Button } from "./ui/button";
 import {
     Credenza,
+    CredenzaBody,
     CredenzaContent,
     CredenzaDescription,
     CredenzaFooter,
@@ -88,7 +89,7 @@ export function PathMatchModal({
                         {t("pathMatchModalDescription")}
                     </CredenzaDescription>
                 </CredenzaHeader>
-                <div className="grid gap-4">
+                <CredenzaBody className="grid gap-4 space-y-0">
                     <div className="grid gap-2">
                         <Label htmlFor="match-type">{t("pathMatchType")}</Label>
                         <Select value={matchType} onValueChange={setMatchType}>
@@ -122,7 +123,7 @@ export function PathMatchModal({
                             {getHelpText()}
                         </p>
                     </div>
-                </div>
+                </CredenzaBody>
                 <CredenzaFooter className="gap-2">
                     {/* {value?.path && (
                         )} */}
@@ -215,7 +216,7 @@ export function PathRewriteModal({
                         {t("pathRewriteModalDescription")}
                     </CredenzaDescription>
                 </CredenzaHeader>
-                <div className="grid gap-4">
+                <CredenzaBody className="grid gap-4 space-y-0">
                     <div className="grid gap-2">
                         <Label htmlFor="rewrite-type">
                             {t("pathRewriteType")}
@@ -257,7 +258,7 @@ export function PathRewriteModal({
                             {getHelpText()}
                         </p>
                     </div>
-                </div>
+                </CredenzaBody>
                 <CredenzaFooter className="gap-2">
                     {value?.rewritePath && (
                         <Button variant="outline" onClick={handleClear}>

src/components/SidebarNav.tsx

@@ -122,7 +122,7 @@ function CollapsibleNavItem({
                         "px-3 py-1.5",
                         isActive
                             ? "bg-sidebar-accent font-medium"
-                            : "text-muted-foreground hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 hover:text-foreground",
+                            : "text-muted-foreground hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 hover:text-foreground",
                         isDisabled && "cursor-not-allowed opacity-60"
                     )}
                     disabled={isDisabled}
@@ -257,7 +257,7 @@ function CollapsedNavItemWithPopover({
                                     "flex items-center rounded-md transition-colors px-2 py-2 justify-center w-full",
                                     isActive || isChildActive
                                         ? "bg-sidebar-accent font-medium"
-                                        : "text-muted-foreground hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 hover:text-foreground",
+                                        : "text-muted-foreground hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 hover:text-foreground",
                                     isDisabled &&
                                         "cursor-not-allowed opacity-60"
                                 )}
@@ -451,7 +451,7 @@ export function SidebarNav({
                     isCollapsed ? "px-2 py-2 justify-center" : "px-3 py-1.5",
                     isActive
                         ? "bg-sidebar-accent font-medium"
-                        : "text-muted-foreground hover:bg-sidebar-accent/80 dark:hover:bg-sidebar-accent/50 hover:text-foreground",
+                        : "text-muted-foreground hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50 hover:text-foreground",
                     isDisabled && "cursor-not-allowed opacity-60"
                 )}
                 onClick={(e) => {

src/components/SitesTable.tsx

@@ -46,7 +46,7 @@ export type SiteRow = {
     mbIn: string;
     mbOut: string;
     orgId: string;
-    type: "newt" | "wireguard";
+    type: "newt" | "wireguard" | "local";
     newtVersion?: string;
     newtUpdateAvailable?: boolean;
     online: boolean;
@@ -236,6 +236,9 @@ export default function SitesTable({
             header: () => <span className="p-3">{t("uptime30d")}</span>,
             cell: ({ row }) => {
                 const originalRow = row.original;
+                if (originalRow.type == "local") {
+                    return <span>-</span>;
+                }
                 return (
                     <UptimeMiniBar siteId={originalRow.id} days={30} />
                 );

src/components/SupporterStatus.tsx

@@ -230,7 +230,7 @@ export default function SupporterStatus({
                             <p className="text-sm">
                                 <strong>Business & Enterprise Users:</strong> For larger organizations or teams requiring advanced features, consider our self-serve enterprise license and Enterprise Edition.{" "}
                                 <Link
-                                    href="https://pangolin.net/pricing?hosting=self-host"
+                                    href="https://pangolin.net/pricing#Self-Hosted"
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     className="underline inline-flex items-center gap-1"

src/components/SwitchInput.tsx

@@ -45,6 +45,7 @@ export function SwitchInput({
     return (
         <div>
             <div className="flex items-center space-x-2 mb-2">
+                {label && <Label htmlFor={id}>{label}</Label>}
                 <Switch
                     id={id}
                     checked={checked}
@@ -52,7 +53,6 @@ export function SwitchInput({
                     onCheckedChange={onCheckedChange}
                     disabled={disabled}
                 />
-                {label && <Label htmlFor={id}>{label}</Label>}
                 {info && (
                     <Popover>
                         <PopoverTrigger asChild>

src/components/UptimeAlertSection.tsx

@@ -34,6 +34,7 @@ import { orgQueries } from "@app/lib/queries";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { useTranslations } from "next-intl";
 
 interface UptimeAlertSectionProps {
     orgId: string;
@@ -50,6 +51,7 @@ export default function UptimeAlertSection({
     resourceId,
     days = 90
 }: UptimeAlertSectionProps) {
+    const t = useTranslations();
     const api = createApiClient(useEnvContext());
     const queryClient = useQueryClient();
     const { isPaidUser } = usePaidStatus();
@@ -57,7 +59,7 @@ export default function UptimeAlertSection({
 
     const [open, setOpen] = useState(false);
     const [name, setName] = useState(
-        `${siteId ? "Site" : "Resource"} ${startingName} Alert`
+        `${siteId ? t("site") : t("resource")} ${startingName} ${t("alertLabel")}`
     );
     const [userTags, setUserTags] = useState<Tag[]>([]);
     const [roleTags, setRoleTags] = useState<Tag[]>([]);
@@ -73,9 +75,10 @@ export default function UptimeAlertSection({
     >(null);
     const [loading, setLoading] = useState(false);
 
-    const { data: alertRules, isLoading: alertRulesLoading } = useQuery(
-        orgQueries.alertRulesForSource({ orgId, siteId, resourceId })
-    );
+    const { data: alertRules, isLoading: alertRulesLoading } = useQuery({
+        ...orgQueries.alertRulesForSource({ orgId, siteId, resourceId }),
+        enabled: isPaid
+    });
 
     const { data: orgUsers = [] } = useQuery(orgQueries.users({ orgId }));
     const { data: orgRoles = [] } = useQuery(orgQueries.roles({ orgId }));
@@ -111,9 +114,8 @@ export default function UptimeAlertSection({
         ) {
             toast({
                 variant: "destructive",
-                title: "No recipients",
-                description:
-                    "Please add at least one user, role, or email to notify."
+                title: t("uptimeAlertNoRecipients"),
+                description: t("uptimeAlertNoRecipientsDescription")
             });
             return;
         }
@@ -135,12 +137,12 @@ export default function UptimeAlertSection({
             });
 
             toast({
-                title: "Alert created",
-                description: "You will be notified when this changes status."
+                title: t("uptimeAlertCreated"),
+                description: t("uptimeAlertCreatedDescription")
             });
 
             setOpen(false);
-            setName("Uptime Alert");
+            setName(t("uptimeSectionTitle"));
             setUserTags([]);
             setRoleTags([]);
             setEmailTags([]);
@@ -155,8 +157,8 @@ export default function UptimeAlertSection({
         } catch (e) {
             toast({
                 variant: "destructive",
-                title: "Failed to create alert",
-                description: formatAxiosError(e, "An error occurred.")
+                title: t("uptimeAlertCreateFailed"),
+                description: formatAxiosError(e, t("errorOccurred"))
             });
         }
         setLoading(false);
@@ -173,19 +175,19 @@ export default function UptimeAlertSection({
     const alertButton = alertRulesLoading ? (
         <Button variant="outline" type="button" loading aria-busy="true">
             <BellPlus className="size-4 mr-2" />
-            Add Alert
+            {t("uptimeAddAlert")}
         </Button>
     ) : hasRules ? (
         <Button variant="outline" asChild>
             <Link href={rulesListHref}>
                 <BellRing className="size-4 mr-2" />
-                View Alerts
+                {t("uptimeViewAlerts")}
             </Link>
         </Button>
     ) : (
         <Button variant="outline" onClick={() => setOpen(true)}>
             <BellPlus className="size-4 mr-2" />
-            Add Alert
+            {t("uptimeAddAlert")}
         </Button>
     );
 
@@ -195,9 +197,11 @@ export default function UptimeAlertSection({
                 <SettingsSectionHeader>
                     <div className="flex justify-between items-start">
                         <div>
-                            <SettingsSectionTitle>Uptime</SettingsSectionTitle>
+                            <SettingsSectionTitle>
+                                {t("uptimeSectionTitle")}
+                            </SettingsSectionTitle>
                             <SettingsSectionDescription>
-                                Site availability over the last {days} days.
+                                {t("uptimeSectionDescription", { days })}
                             </SettingsSectionDescription>
                         </div>
                         {alertButton}
@@ -215,11 +219,13 @@ export default function UptimeAlertSection({
             <Credenza open={open} onOpenChange={setOpen}>
                 <CredenzaContent>
                     <CredenzaHeader>
-                        <CredenzaTitle>Create Email Alert</CredenzaTitle>
+                        <CredenzaTitle>
+                            {t("uptimeCreateEmailAlert")}
+                        </CredenzaTitle>
                         <CredenzaDescription>
-                            Get notified by email when this{" "}
-                            {siteId ? "site" : "resource"} goes offline or comes
-                            back online.
+                            {siteId
+                                ? t("uptimeAlertDescriptionSite")
+                                : t("uptimeAlertDescriptionResource")}
                         </CredenzaDescription>
                     </CredenzaHeader>
                     <CredenzaBody>
@@ -231,20 +237,22 @@ export default function UptimeAlertSection({
                             >
                                 <div className="space-y-4">
                                     <div className="space-y-2">
-                                        <Label htmlFor="alert-name">Name</Label>
+                                        <Label htmlFor="alert-name">
+                                            {t("name")}
+                                        </Label>
                                         <Input
                                             id="alert-name"
                                             value={name}
                                             onChange={(e) => setName(e.target.value)}
-                                            placeholder="Alert name"
+                                            placeholder={t("uptimeAlertNamePlaceholder")}
                                         />
                                     </div>
                                     <div className="space-y-2">
-                                        <Label>Notify Users</Label>
+                                        <Label>{t("alertingNotifyUsers")}</Label>
                                         <TagInput
                                             activeTagIndex={activeUserTagIndex}
                                             setActiveTagIndex={setActiveUserTagIndex}
-                                            placeholder="Select users..."
+                                            placeholder={t("alertingSelectUsers")}
                                             size="sm"
                                             tags={userTags}
                                             setTags={(newTags) => {
@@ -262,11 +270,11 @@ export default function UptimeAlertSection({
                                         />
                                     </div>
                                     <div className="space-y-2">
-                                        <Label>Notify Roles</Label>
+                                        <Label>{t("alertingNotifyRoles")}</Label>
                                         <TagInput
                                             activeTagIndex={activeRoleTagIndex}
                                             setActiveTagIndex={setActiveRoleTagIndex}
-                                            placeholder="Select roles..."
+                                            placeholder={t("alertingSelectRoles")}
                                             size="sm"
                                             tags={roleTags}
                                             setTags={(newTags) => {
@@ -284,11 +292,11 @@ export default function UptimeAlertSection({
                                         />
                                     </div>
                                     <div className="space-y-2">
-                                        <Label>Additional Emails</Label>
+                                        <Label>{t("uptimeAdditionalEmails")}</Label>
                                         <TagInput
                                             activeTagIndex={activeEmailTagIndex}
                                             setActiveTagIndex={setActiveEmailTagIndex}
-                                            placeholder="Enter email addresses..."
+                                            placeholder={t("alertingEmailPlaceholder")}
                                             size="sm"
                                             tags={emailTags}
                                             setTags={(newTags) => {
@@ -312,14 +320,14 @@ export default function UptimeAlertSection({
                     </CredenzaBody>
                     <CredenzaFooter>
                         <CredenzaClose asChild>
-                            <Button variant="outline">Cancel</Button>
+                            <Button variant="outline">{t("cancel")}</Button>
                         </CredenzaClose>
                         <Button
                             onClick={handleSubmit}
                             loading={loading}
                             disabled={loading || !isPaid}
                         >
-                            Create Alert
+                            {t("uptimeCreateAlert")}
                         </Button>
                     </CredenzaFooter>
                 </CredenzaContent>

src/components/UptimeBar.tsx

@@ -10,6 +10,7 @@ import {
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { createApiClient } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
+import { useTranslations } from "next-intl";
 
 function formatDuration(seconds: number): string {
     if (seconds === 0) return "0s";
@@ -63,6 +64,7 @@ export default function UptimeBar({
     title,
     className
 }: UptimeBarProps) {
+    const t = useTranslations();
     const api = createApiClient(useEnvContext());
 
     const siteQuery = useQuery({
@@ -104,7 +106,7 @@ export default function UptimeBar({
                     <div
                         className="flex items-center gap-4 text-sm ml-auto"
                         aria-busy="true"
-                        aria-label="Loading uptime summary"
+                        aria-label={t("loading")}
                     >
                         <span className="h-4 w-[4.5rem] shrink-0 rounded-md bg-muted animate-pulse" />
                         <span className="h-4 w-[7rem] shrink-0 rounded-md bg-muted animate-pulse" />
@@ -122,8 +124,8 @@ export default function UptimeBar({
                     ))}
                 </div>
                 <div className="flex justify-between text-xs text-muted-foreground">
-                    <span>{days} days ago</span>
-                    <span>Today</span>
+                    <span>{t("uptimeDaysAgo", { count: days })}</span>
+                    <span>{t("uptimeToday")}</span>
                 </div>
             </div>
         );
@@ -145,7 +147,7 @@ export default function UptimeBar({
                                 <span className="font-semibold text-foreground">
                                     {data.overallUptimePercent.toFixed(2)}%
                                 </span>{" "}
-                                uptime
+                                {t("uptimeSuffix")}
                             </span>
                             {data.totalDowntimeSeconds > 0 && (
                                 <span className="text-muted-foreground">
@@ -154,14 +156,14 @@ export default function UptimeBar({
                                             data.totalDowntimeSeconds
                                         )}
                                     </span>{" "}
-                                    downtime
+                                    {t("uptimeDowntimeSuffix")}
                                 </span>
                             )}
                         </>
                     )}
                     {allNoData && (
                         <span className="text-muted-foreground text-xs">
-                            No data available
+                            {t("uptimeNoDataAvailable")}
                         </span>
                     )}
                 </div>
@@ -188,7 +190,7 @@ export default function UptimeBar({
                             </div>
                             {day.status !== "no_data" && (
                                 <div className="text-xs text-primary-foreground/80">
-                                    Uptime:{" "}
+                                    {t("uptimeTooltipUptimeLabel")}:{" "}
                                     <span className="font-medium text-primary-foreground">
                                         {day.uptimePercent.toFixed(1)}%
                                     </span>
@@ -196,7 +198,7 @@ export default function UptimeBar({
                             )}
                             {day.totalDowntimeSeconds > 0 && (
                                 <div className="text-xs text-primary-foreground/80">
-                                    Downtime:{" "}
+                                    {t("uptimeTooltipDowntimeLabel")}:{" "}
                                     <span className="font-medium text-primary-foreground">
                                         {formatDuration(
                                             day.totalDowntimeSeconds
@@ -214,7 +216,7 @@ export default function UptimeBar({
                                             {formatTime(w.start)}
                                             {w.end
                                                 ? ` – ${formatTime(w.end)}`
-                                                : " – ongoing"}{" "}
+                                                : ` – ${t("uptimeOngoing")}`}{" "}
                                             <span className="capitalize">
                                                 ({w.status})
                                             </span>
@@ -224,7 +226,7 @@ export default function UptimeBar({
                             )}
                             {day.status === "no_data" && (
                                 <div className="text-xs text-primary-foreground/60">
-                                    No monitoring data
+                                    {t("uptimeNoMonitoringData")}
                                 </div>
                             )}
                         </TooltipContent>
@@ -234,9 +236,9 @@ export default function UptimeBar({
 
             {/* Date labels */}
             <div className="flex justify-between text-xs text-muted-foreground">
-                <span>{days} days ago</span>
-                <span>Today</span>
+                <span>{t("uptimeDaysAgo", { count: days })}</span>
+                <span>{t("uptimeToday")}</span>
             </div>
         </div>
     );
-}
+}

src/components/UptimeMiniBar.tsx

@@ -10,6 +10,7 @@ import {
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { createApiClient } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
+import { useTranslations } from "next-intl";
 
 function formatDuration(seconds: number): string {
     if (seconds === 0) return "0s";
@@ -51,6 +52,7 @@ export default function UptimeMiniBar({
     healthCheckId,
     days = 30
 }: UptimeMiniBarProps) {
+    const t = useTranslations();
     const api = createApiClient(useEnvContext());
 
     const siteQuery = useQuery({
@@ -105,7 +107,7 @@ export default function UptimeMiniBar({
                 <span
                     className="inline-flex min-w-[7ch] items-center justify-end text-xs text-muted-foreground whitespace-nowrap"
                     aria-busy="true"
-                    aria-label="Loading uptime"
+                    aria-label={t("loading")}
                 >
                     <span className="h-4 w-[5.5ch] max-w-full rounded bg-muted animate-pulse" />
                 </span>
@@ -136,12 +138,12 @@ export default function UptimeMiniBar({
                             </div>
                             <div className="text-xs text-primary-foreground/80">
                                 {day.status === "no_data"
-                                    ? "No data"
-                                    : `${day.uptimePercent.toFixed(1)}% uptime`}
+                                    ? t("uptimeNoData")
+                                    : `${day.uptimePercent.toFixed(1)}% ${t("uptimeSuffix")}`}
                             </div>
                             {day.totalDowntimeSeconds > 0 && (
                                 <div className="text-xs text-primary-foreground/70">
-                                    Down:{" "}
+                                    {t("uptimeMiniBarDown")}:{" "}
                                     {formatDuration(day.totalDowntimeSeconds)}
                                 </div>
                             )}
@@ -151,9 +153,9 @@ export default function UptimeMiniBar({
             </div>
             <span className="text-xs text-muted-foreground whitespace-nowrap">
                 {allNoData
-                    ? "No data"
+                    ? t("uptimeNoData")
                     : `${data.overallUptimePercent.toFixed(1)}%`}
             </span>
         </div>
     );
-}
+}

src/components/alert-rule-editor/AlertRuleFields.tsx

@@ -714,7 +714,7 @@ function WebhookActionFields({
                 name={`actions.${index}.url`}
                 render={({ field }) => (
                     <FormItem>
-                        <FormLabel>URL</FormLabel>
+                        <FormLabel>{t("webhookUrlLabel")}</FormLabel>
                         <FormControl>
                             <Input
                                 {...field}
@@ -961,7 +961,7 @@ function WebhookHeadersField({
                         render={({ field }) => (
                             <FormItem className="flex-1">
                                 <FormControl>
-                                    <Input {...field} placeholder="Key" />
+                                    <Input {...field} placeholder={t("webhookHeaderKeyPlaceholder")} />
                                 </FormControl>
                             </FormItem>
                         )}
@@ -972,7 +972,7 @@ function WebhookHeadersField({
                         render={({ field }) => (
                             <FormItem className="flex-1">
                                 <FormControl>
-                                    <Input {...field} placeholder="Value" />
+                                    <Input {...field} placeholder={t("webhookHeaderValuePlaceholder")} />
                                 </FormControl>
                             </FormItem>
                         )}

src/components/alert-rule-editor/AlertRuleGraphEditor.tsx

@@ -174,11 +174,7 @@ export default function AlertRuleGraphEditor({
                                 <CardContent className="p-4 sm:p-5 space-y-4">
                                     <fieldset
                                         disabled={disabled}
-                                        className={
-                                            disabled
-                                                ? "opacity-50 pointer-events-none"
-                                                : "space-y-4"
-                                        }
+                                        className={`space-y-4${disabled ? " opacity-50 pointer-events-none" : ""}`}
                                     >
                                         <div className="flex flex-wrap items-center gap-2">
                                             {isNew && (

src/components/multi-site-selector.tsx

@@ -12,7 +12,7 @@ import {
 import { Checkbox } from "./ui/checkbox";
 import { useTranslations } from "next-intl";
 import { useDebounce } from "use-debounce";
-import type { Selectedsite } from "./site-selector";
+import { SiteOnlineStatus, type Selectedsite } from "./site-selector";
 
 export type MultiSitesSelectorProps = {
     orgId: string;
@@ -107,7 +107,16 @@ export function MultiSitesSelector({
                                 aria-hidden
                                 tabIndex={-1}
                             />
-                            <span className="truncate">{site.name}</span>
+                            <div className="min-w-0 flex-1 flex items-center gap-2">
+                                <span className="min-w-0 flex-1 truncate">
+                                    {site.name}
+                                </span>
+                                <SiteOnlineStatus
+                                    type={site.type}
+                                    online={site.online}
+                                    t={t}
+                                />
+                            </div>
                         </CommandItem>
                     ))}
                 </CommandGroup>

src/components/site-selector.tsx

@@ -18,7 +18,41 @@ import { useDebounce } from "use-debounce";
 export type Selectedsite = Pick<
     ListSitesResponse["sites"][number],
     "name" | "siteId" | "type"
->;
+> & {
+    /** When omitted, no online/offline indicator is shown. */
+    online?: ListSitesResponse["sites"][number]["online"];
+};
+
+type SiteOnlineStatusProps = {
+    type: Selectedsite["type"];
+    online: Selectedsite["online"];
+    t: (key: "online" | "offline") => string;
+};
+
+/** Dot-only indicator matching `SitesTable` colors (newt/wireguard only; nothing for local or missing status). */
+export function SiteOnlineStatus({ type, online, t }: SiteOnlineStatusProps) {
+    if (type !== "newt" && type !== "wireguard") {
+        return null;
+    }
+    if (typeof online !== "boolean") {
+        return null;
+    }
+    return (
+        <span
+            className="shrink-0 flex items-center"
+            role="img"
+            aria-label={online ? t("online") : t("offline")}
+        >
+            <div
+                className={
+                    online
+                        ? "w-2 h-2 bg-green-500 rounded-full"
+                        : "w-2 h-2 bg-neutral-500 rounded-full"
+                }
+            />
+        </span>
+    );
+}
 
 export type SitesSelectorProps = {
     orgId: string;
@@ -86,7 +120,16 @@ export function SitesSelector({
                                         : "opacity-0"
                                 )}
                             />
-                            {site.name}
+                            <div className="min-w-0 flex-1 flex items-center gap-2">
+                                <span className="min-w-0 flex-1 truncate">
+                                    {site.name}
+                                </span>
+                                <SiteOnlineStatus
+                                    type={site.type}
+                                    online={site.online}
+                                    t={t}
+                                />
+                            </div>
                         </CommandItem>
                     ))}
                 </CommandGroup>

src/components/ui/controlled-data-table.tsx

@@ -413,7 +413,7 @@ export function ControlledDataTable<TData, TValue>({
                     </div>
                 </CardHeader>
                 <CardContent>
-                    <div className="overflow-x-auto">
+                    <div className="overflow-x-auto overflow-y-hidden">
                         <Table>
                             <TableHeader>
                                 {table.getHeaderGroups().map((headerGroup) => (

src/components/ui/data-table.tsx

@@ -695,7 +695,7 @@ export function DataTable<TData, TValue>({
                     </div>
                 </CardHeader>
                 <CardContent>
-                    <div className="overflow-x-auto">
+                    <div className="overflow-x-auto overflow-y-hidden">
                         <Table>
                             <TableHeader>
                                 {table.getHeaderGroups().map((headerGroup) => (

src/components/ui/table.tsx

@@ -12,7 +12,7 @@ const Table = React.forwardRef<
 >(({ className, sticky, ...props }, ref) => (
     <div
         className={cn("relative w-full", {
-            "overflow-auto": !sticky
+            "overflow-x-auto overflow-y-hidden": !sticky
         })}
     >
         <table