Trim numeric build suffix from sidebar version display. (#749)

Self-hosted management versions can carry a numeric build suffix
  (e.g. 0.76.3-31256681241) that overflows the sidebar box. Show the
  semver only and move the full string into the hover tooltip alongside
  the latest version. Pre-release labels like -rc.1 are preserved.

e2e/tests/agent-network-settings-shapes.spec.ts

@@ -0,0 +1,144 @@
+/**
+ * Agent Network settings wire-shape spec.
+ *
+ * The management API signals "account not bootstrapped" differently by
+ * generation: current servers answer GET /agent-network/settings with the
+ * defaults object carrying an empty cluster/subdomain/endpoint, older ones
+ * with 200 + a JSON null body, and the oldest with a 404.
+ * useAgentNetworkSettings normalizes all three to the same null-settings
+ * signal, and this spec pins that: the providers page must render the
+ * connect-first endpoint placeholder for every unbootstrapped shape, and the
+ * endpoint badge once the account is bootstrapped. The settings route is
+ * mocked per test, so the assertions do not depend on the backend build or
+ * on account state left behind by other suites.
+ */
+import { test, expect, type Browser, type Page } from "@playwright/test";
+import { loginToApp } from "../helpers/auth";
+
+const AGENT_NETWORK_CONFIG_KEY = "netbird-test-agent-network";
+
+const EMPTY_STATE_TEXT =
+  "Connect your first provider to set up your agent network endpoint.";
+
+const BOOTSTRAPPED_ENDPOINT = "violet.eu.proxy.netbird.io";
+
+// The defaults object current servers return before the account is
+// bootstrapped: values present, cluster/subdomain/endpoint empty, no
+// timestamps (no row has been persisted yet).
+const UNBOOTSTRAPPED_DEFAULTS = {
+  cluster: "",
+  subdomain: "",
+  endpoint: "",
+  enable_log_collection: true,
+  enable_prompt_collection: false,
+  redact_pii: false,
+  access_log_retention_days: 30,
+};
+
+const BOOTSTRAPPED_SETTINGS = {
+  cluster: "eu.proxy.netbird.io",
+  subdomain: "violet",
+  endpoint: BOOTSTRAPPED_ENDPOINT,
+  enable_log_collection: true,
+  enable_prompt_collection: false,
+  redact_pii: false,
+  access_log_retention_days: 30,
+  created_at: "2026-01-01T00:00:00Z",
+  updated_at: "2026-01-01T00:00:00Z",
+};
+
+async function mockSettingsResponse(
+  page: Page,
+  response: { status: number; body: string },
+) {
+  await page.route("**/api/agent-network/settings", (route) => {
+    if (route.request().method() !== "GET") return route.continue();
+    return route.fulfill({
+      status: response.status,
+      contentType: "application/json",
+      body: response.body,
+    });
+  });
+}
+
+async function openProvidersPage(
+  browser: Browser,
+  settingsResponse: { status: number; body: string },
+): Promise<{ page: Page; close: () => Promise<void> }> {
+  const context = await browser.newContext({
+    storageState: "e2e/fixtures/auth/owner.json",
+  });
+  // Close the context on any setup failure — the caller only receives the
+  // close callback once setup succeeds.
+  try {
+    await context.addInitScript(
+      ([key, value]) => {
+        try {
+          window.localStorage.setItem(key as string, value as string);
+        } catch (e) {}
+      },
+      [AGENT_NETWORK_CONFIG_KEY, "enabled"],
+    );
+    const page = await context.newPage();
+    await mockSettingsResponse(page, settingsResponse);
+    await loginToApp(page, "owner");
+    await page.goto("/agent-network/providers");
+    await page.keyboard.press("Escape");
+    return { page, close: () => context.close() };
+  } catch (e) {
+    await context.close();
+    throw e;
+  }
+}
+
+const UNBOOTSTRAPPED_SHAPES: {
+  name: string;
+  response: { status: number; body: string };
+}[] = [
+  {
+    name: "defaults object with empty endpoint (current servers)",
+    response: { status: 200, body: JSON.stringify(UNBOOTSTRAPPED_DEFAULTS) },
+  },
+  {
+    name: "200 with JSON null body (older servers)",
+    response: { status: 200, body: "null" },
+  },
+  {
+    name: "404 (oldest servers)",
+    response: {
+      status: 404,
+      body: JSON.stringify({ message: "settings not found", code: 404 }),
+    },
+  },
+];
+
+test.describe("Agent Network settings wire shapes @agent-network", () => {
+  for (const shape of UNBOOTSTRAPPED_SHAPES) {
+    test(`unbootstrapped account renders the empty state: ${shape.name}`, async ({
+      browser,
+    }) => {
+      const { page, close } = await openProvidersPage(browser, shape.response);
+      try {
+        await expect(page.getByText(EMPTY_STATE_TEXT)).toBeVisible();
+        await expect(page.getByText(BOOTSTRAPPED_ENDPOINT)).toHaveCount(0);
+      } finally {
+        await close();
+      }
+    });
+  }
+
+  test("bootstrapped account renders the endpoint instead of the empty state", async ({
+    browser,
+  }) => {
+    const { page, close } = await openProvidersPage(browser, {
+      status: 200,
+      body: JSON.stringify(BOOTSTRAPPED_SETTINGS),
+    });
+    try {
+      await expect(page.getByText(BOOTSTRAPPED_ENDPOINT)).toBeVisible();
+      await expect(page.getByText(EMPTY_STATE_TEXT)).toHaveCount(0);
+    } finally {
+      await close();
+    }
+  });
+});

src/components/VersionInfo.tsx

@@ -17,6 +17,13 @@ function formatVersion(version: string): string {
   return version;
 }
 
+// Self-hosted builds can carry a numeric build suffix (e.g. "0.76.3-31256681241")
+// that overflows the sidebar. Show the semver only and keep the rest for the
+// tooltip. Pre-release labels like "-rc.1" are left intact so they stay visible.
+function formatShortVersion(version: string): string {
+  return formatVersion(version).replace(/^(v?\d+(?:\.\d+)*)-\d+$/, "$1");
+}
+
 function compareVersions(current: string, latest: string): boolean {
   // Returns true if latest is newer than current
   if (!current || !latest) return false;
@@ -98,9 +105,15 @@ const NavigationVersionInfoContent = () => {
       <div className="flex flex-col gap-1 text-nb-gray-400">
         <FullTooltip
           content={
-            <span className="text-xs">
-              Latest: {formatVersion(versionInfo.management_available_version)}
-            </span>
+            <div className="text-xs flex flex-col gap-1">
+              <span>
+                Installed:{" "}
+                {formatVersion(versionInfo.management_current_version)}
+              </span>
+              <span>
+                Latest: {formatVersion(versionInfo.management_available_version)}
+              </span>
+            </div>
           }
           side="top"
           className="w-full"
@@ -108,15 +121,18 @@ const NavigationVersionInfoContent = () => {
           <div className="flex items-center justify-between w-full cursor-default">
             <span>Management</span>
             <span className="text-nb-gray-300 font-medium">
-              {formatVersion(versionInfo.management_current_version)}
+              {formatShortVersion(versionInfo.management_current_version)}
             </span>
           </div>
         </FullTooltip>
         <FullTooltip
           content={
-            <span className="text-xs">
-              Latest: {formatVersion(versionInfo.dashboard_available_version)}
-            </span>
+            <div className="text-xs flex flex-col gap-1">
+              <span>Installed: {formatVersion(dashboardVersion)}</span>
+              <span>
+                Latest: {formatVersion(versionInfo.dashboard_available_version)}
+              </span>
+            </div>
           }
           side="top"
           className="w-full"
@@ -124,7 +140,7 @@ const NavigationVersionInfoContent = () => {
           <div className="flex items-center justify-between w-full cursor-default">
             <span>Dashboard</span>
             <span className="text-nb-gray-300 font-medium">
-              {formatVersion(dashboardVersion)}
+              {formatShortVersion(dashboardVersion)}
             </span>
           </div>
         </FullTooltip>

src/modules/agent-network/AIProvidersProvider.tsx

@@ -125,8 +125,10 @@ export type APIAgentNetworkSettings = {
   enable_prompt_collection: boolean;
   redact_pii: boolean;
   access_log_retention_days?: number;
-  created_at: string;
-  updated_at: string;
+  // Absent until the account is bootstrapped — pre-bootstrap the backend
+  // returns the defaults without a persisted row to date.
+  created_at?: string;
+  updated_at?: string;
 };
 
 // APIAgentNetworkSettingsRequest matches the PUT /agent-network/settings
@@ -521,10 +523,12 @@ export function useAIProviders() {
 }
 
 // useAgentNetworkSettings fetches the account-level agent-network settings.
-// Returns null until the first provider is created — newer backends respond
-// 200 + JSON null while no settings row exists; older backends respond 404,
-// which we still tolerate via ignoreError so older deploys don't surface
-// a spurious error in the empty state.
+// Returns null until the account is bootstrapped (first provider create, or
+// a settings update carrying a cluster). Backends signal the unbootstrapped
+// state differently by age: current ones respond 200 with the defaults and
+// an empty cluster/subdomain/endpoint, older ones 200 + JSON null, and the
+// oldest 404 — tolerated via ignoreError so old deploys don't surface a
+// spurious error in the empty state. All three normalize to null here.
 export function useAgentNetworkSettings() {
   const { enabled: agentNetworkEnabled } = useAgentNetworkMode();
   const { data, error, isLoading, mutate } =
@@ -534,11 +538,14 @@ export function useAgentNetworkSettings() {
       true,
       agentNetworkEnabled,
     );
-  const settings = useMemo<AgentNetworkSettings | null>(
-    () => (data ? settingsFromAPI(data) : null),
-    [data],
-  );
   const notFound = !!error && (error as { code?: number }).code === 404;
+  // SWR keeps the previous data alongside the error (keepPreviousData), so a
+  // later 404 must not expose the stale settings; other transient errors keep
+  // them, which is what keepPreviousData is for.
+  const settings = useMemo<AgentNetworkSettings | null>(
+    () => (data && data.endpoint && !notFound ? settingsFromAPI(data) : null),
+    [data, notFound],
+  );
   return {
     settings,
     isLoading: isLoading && !notFound,
@@ -676,7 +683,7 @@ export default function AIProvidersProvider({ children }: Readonly<Props>) {
           updates.metadataDisabled ?? existing.metadata_disabled,
         models: updates.models
           ? toAPIModels(updates.models)
-          : existing.models ?? [],
+          : (existing.models ?? []),
         enabled: updates.enabled ?? existing.enabled,
       };
       try {
@@ -761,7 +768,7 @@ export default function AIProvidersProvider({ children }: Readonly<Props>) {
         guardrail_ids: updates.guardrailIds ?? existing.guardrail_ids ?? [],
         limits: updates.limits
           ? policyLimitsToAPI(updates.limits)
-          : existing.limits ?? policyLimitsToAPI(EMPTY_POLICY_LIMITS),
+          : (existing.limits ?? policyLimitsToAPI(EMPTY_POLICY_LIMITS)),
       };
       try {
         await policiesApi.put(merged, `/${id}`);

src/modules/onboarding/Onboarding.tsx

@@ -30,7 +30,6 @@ import { OnboardingExplainDefaultPolicy } from "@/modules/onboarding/p2p/Onboard
 import { OnboardingFirstDevice } from "@/modules/onboarding/p2p/OnboardingFirstDevice";
 import { OnboardingSecondDevice } from "@/modules/onboarding/p2p/OnboardingSecondDevice";
 import { OnboardingTestP2P } from "@/modules/onboarding/p2p/OnboardingTestP2P";
-import { OnboardingDemoCall } from "@/modules/onboarding/OnboardingDemoCall";
 
 export interface OnboardingState {
   intent: Intent;
@@ -111,7 +110,6 @@ export const Onboarding = ({
 
   const [onboarding, dispatch] = useReducer(onboardingReducer, initial);
   const { step, intent } = onboarding;
-  const [demoCallModal, setDemoCallModal] = useState(false);
 
   const [resource, setResource] = useState<NetworkResource>();
   const [firstRoutingPeer, setFirstRoutingPeer] = useState<Peer>();
@@ -395,22 +393,10 @@ export const Onboarding = ({
                             payload: new Date().toISOString(),
                           });
                         }
-
-                        const companySize = fields?.find(
-                          (f) => f.name === "planned_users",
-                        );
-                        if (Number(companySize?.value) >= 50) {
-                          setDemoCallModal(true);
-                        }
                       }}
                     />
                   )}
 
-                  <OnboardingDemoCall
-                    open={demoCallModal}
-                    onOpenChange={setDemoCallModal}
-                  />
-
                   {step === 2 && (
                     <OnboardingIntent
                       useCases={useCases}

src/modules/onboarding/OnboardingDemoCall.tsx

@@ -1,261 +0,0 @@
-import Button from "@components/Button";
-import {
-  Modal,
-  ModalClose,
-  ModalContent,
-  ModalFooter,
-} from "@components/modal/Modal";
-import { CalendarClockIcon, CalendarIcon, Check } from "lucide-react";
-import Image from "next/image";
-import * as React from "react";
-import Avatar from "@/assets/avatars/jack.jpeg";
-import NetBirdIcon from "@/assets/icons/NetBirdIcon";
-import { useExperiment } from "@/cloud/cloud-hooks/useExperiment";
-import { useAnalytics } from "@/contexts/AnalyticsProvider";
-import { useAccount } from "@/modules/account/useAccount";
-import { useLoggedInUser } from "@/contexts/UsersProvider";
-
-type Props = {
-  open: boolean;
-  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-const NAME = "Jack Carter";
-const BOOK_A_DEMO_URL =
-  "https://meetings-eu1.hubspot.com/jack81/selfserve45-dashboard";
-
-export const OnboardingDemoCall = ({ open, onOpenChange }: Props) => {
-  const { trackEventV2 } = useAnalytics();
-  const account = useAccount();
-  const { loggedInUser } = useLoggedInUser();
-
-  const [variant, variantKey] = useExperiment("onboarding-call", {
-    v1: {
-      title: "Book a Technical Overview (Not a Sales Call)",
-      desc: "You’ll meet with a solutions engineer who will walk through how NetBird works, answer your implementation questions - no slides, no hard sell.",
-      features: [
-        "Live walkthrough of setup and architecture",
-        "Implementation of use case, for your stack",
-        "Best practices and general overview",
-      ],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v2: {
-      title: "Talk to our Solutions Engineer",
-      desc: (
-        <>
-          Get a 30-min technical overview. We’ll go over your specific use-case
-          and answer any technical questions you might have. <br /> We’re
-          offering this as a technical onboard support for you. <br /> This is
-          NOT a sales call.
-        </>
-      ),
-      features: [],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v3: {
-      title: "Book a Technical Overview (Not a Sales Call)",
-      desc: (
-        <>
-          Get a 30-min technical overview. We’ll go over your specific use-case
-          and answer any technical questions you might have. <br /> We’re
-          offering this as a technical onboard support for you. <br /> This is
-          NOT a sales call.
-        </>
-      ),
-      features: [],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v4: {
-      title: "Book a Technical Overview",
-      desc: "You’ll meet with a solutions engineer who will walk through how NetBird works, answer your implementation questions - no slides, no hard sell.",
-      features: [
-        "Live walkthrough of setup and architecture",
-        "Implementation of use case, for your stack",
-        "Best practices and general overview",
-      ],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v5: {
-      title: "Talk to our Solutions Engineer",
-      desc: (
-        <>
-          Get a 30-min technical overview. We’ll go over your specific use-case
-          and answer any technical questions you might have. <br /> We’re
-          offering this as a technical onboard support for you.
-        </>
-      ),
-      features: [],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-    v6: {
-      title: "Book a Technical Overview",
-      desc: (
-        <>
-          Get a 30-min technical overview. We’ll go over your specific use-case
-          and answer any technical questions you might have. <br /> We’re
-          offering this as a technical onboard support for you.
-        </>
-      ),
-      features: [],
-      cta: "Book Now",
-      cancel: "No Thanks",
-    },
-  });
-
-  const openBookADemo = () => {
-    if (typeof window !== "undefined") {
-      trackEventV2(
-        "Onboarding Call Experiment",
-        variantKey,
-        account?.id,
-        loggedInUser?.id,
-      );
-      window.open(BOOK_A_DEMO_URL, "_blank");
-      onOpenChange(false);
-    }
-  };
-
-  return (
-    <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent
-        maxWidthClass={"max-w-lg relative !z-[70]"}
-        showClose={false}
-      >
-        <div className={"flex flex-col gap-4 overflow-hidden relative  -top-3"}>
-          <div
-            className={
-              "flex items-center justify-center absolute bottom-0 w-full z-20"
-            }
-          >
-            <Image
-              src={Avatar}
-              alt={NAME}
-              height={50}
-              width={50}
-              className={"rounded-full"}
-            />
-          </div>
-          <span
-            className={
-              "absolute inset-0 w-full h-full bg-gradient-to-b from-transparent to-nb-gray-950 z-10"
-            }
-          ></span>
-          <div className={"flex gap-8 relative z-0 opacity-10 grayscale h-4"}>
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-          </div>
-          <div
-            className={
-              "flex gap-8 -left-8 relative z-0 opacity-10 grayscale h-4"
-            }
-          >
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-          </div>
-          <div className={"flex gap-4 relative z-0 opacity-10 grayscale h-4"}>
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-            <NetBirdIcon size={20} />
-          </div>
-        </div>
-
-        <div
-          className={
-            "flex items-center justify-center flex-col px-8 gap-3 mt-1"
-          }
-        >
-          <div className={"text-xl font-medium text-center"}>
-            {variant?.title}
-          </div>
-          <div className={"text-sm text-nb-gray-300 text-center"}>
-            {variant?.desc}
-          </div>
-          {variant?.features?.length > 1 && (
-            <ul className="flex flex-col gap-3.5 mt-4 mb-3 w-full">
-              {variant?.features.map((feature, index) => (
-                <li
-                  className="flex items-center gap-3 text-sm text-nb-gray-200"
-                  key={index}
-                >
-                  <Check size={16} className={"text-netbird shrink-0"} />
-                  {feature}
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-        <ModalFooter separator={false} className={"gap-x-2"}>
-          <ModalClose asChild={true}>
-            <Button variant={"secondary"} className={"w-full"}>
-              {variant?.cancel}
-            </Button>
-          </ModalClose>
-
-          <Button
-            className={"w-full"}
-            variant={"primary"}
-            onClick={openBookADemo}
-          >
-            <CalendarIcon size={15} className={"shrink-0"} />
-            {variant?.cta}
-          </Button>
-        </ModalFooter>
-        <div
-          className={
-            "text-center z-0 mt-3 text-sm text-nb-gray-300 flex items-center justify-center gap-2 font-normal"
-          }
-        >
-          <CalendarClockIcon size={12} />
-          <div>
-            The call usually takes around
-            <span className={"font-medium"}> 30 minutes</span>
-          </div>
-        </div>
-      </ModalContent>
-    </Modal>
-  );
-};