fix open settings in tray, prevent loading profiles when daemon is down

client/ui/frontend/src/modules/daemon-status/DaemonUnavailableOverlay.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { AlertCircleIcon, BookText } from "lucide-react";
 import { Browser } from "@wailsio/runtime";
 import { Button } from "@/components/Button";
-import { useStatus } from "@/hooks/useStatus";
+import { useStatus } from "@/modules/daemon-status/StatusContext.tsx";
 
 const DOCS_URL = "https://docs.netbird.io/how-to/installation";
 
@@ -12,9 +12,9 @@ function openUrl(url: string) {
 
 export const DaemonUnavailableOverlay = () => {
     const { t } = useTranslation();
-    const { status } = useStatus();
+    const { isDaemonUnavailable } = useStatus();
 
-    if (status?.status !== "DaemonUnavailable") return null;
+    if (!isDaemonUnavailable) return null;
 
     return (
         <div

client/ui/frontend/src/modules/daemon-status/StatusContext.tsx

@@ -0,0 +1,96 @@
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
+import { Events } from "@wailsio/runtime";
+import { Peers } from "@bindings/services";
+import type { Status } from "@bindings/services/models.js";
+import { DaemonUnavailableOverlay } from "@/modules/daemon-status/DaemonUnavailableOverlay.tsx";
+
+const EVENT_STATUS = "netbird:status";
+
+// StatusContext is the single subscription point for the daemon status
+// stream. It owns the initial Peers.Get, the netbird:status event listener,
+// and the synthetic DaemonUnavailable handling. The provider also renders
+// the DaemonUnavailableOverlay so every layout that mounts it inherits the
+// same blocker without re-importing the component.
+//
+// Boolean flags consumers should prefer over hand-rolled checks:
+//   - isReady              first Peers.Get has resolved
+//   - isDaemonUnavailable  ready and status === "DaemonUnavailable"
+//   - isDaemonAvailable    ready and status !== "DaemonUnavailable"
+type StatusContextValue = {
+    status: Status | null;
+    error: string | null;
+    refresh: () => Promise<void>;
+    isReady: boolean;
+    isDaemonUnavailable: boolean;
+    isDaemonAvailable: boolean;
+};
+
+const StatusContext = createContext<StatusContextValue | null>(null);
+
+export const useStatus = () => {
+    const ctx = useContext(StatusContext);
+    if (!ctx) {
+        throw new Error("useStatus must be used inside StatusProvider");
+    }
+    return ctx;
+};
+
+export const StatusProvider = ({ children }: { children: ReactNode }) => {
+    const [status, setStatus] = useState<Status | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    const refresh = useCallback(async () => {
+        try {
+            const s = await Peers.Get();
+            setStatus(s);
+            setError(null);
+        } catch (e) {
+            // Peers.Get returns a gRPC error when the socket itself is
+            // unreachable (daemon not running, missing socket, etc.); only
+            // the streaming path synthesizes a DaemonUnavailable status.
+            // Synthesize one here too so the overlay paints on cold start
+            // without a daemon — otherwise the whole UI stays blank since
+            // `isReady` would never flip and StatusProvider's short-circuit
+            // wouldn't render either children or the overlay.
+            setStatus({ status: "DaemonUnavailable" } as Status);
+            setError(String(e));
+        }
+    }, []);
+
+    useEffect(() => {
+        void refresh();
+        const off = Events.On(EVENT_STATUS, (ev: { data: Status }) => {
+            setStatus(ev.data);
+            setError(null);
+        });
+        return () => {
+            off();
+        };
+    }, [refresh]);
+
+    const isReady = status !== null;
+    const isDaemonUnavailable = isReady && status.status === "DaemonUnavailable";
+    const isDaemonAvailable = isReady && !isDaemonUnavailable;
+
+    // Don't mount children until the first Peers.Get has resolved and the
+    // daemon is reachable. Consumers (ProfileContext, SettingsContext, …)
+    // can then assume any daemon RPC they make at mount will reach the
+    // socket — no per-context availability gating. When the daemon flips
+    // back to unavailable the children unmount and remount fresh once it
+    // returns.
+    return (
+        <StatusContext.Provider
+            value={{
+                status,
+                error,
+                refresh,
+                isReady,
+                isDaemonUnavailable,
+                isDaemonAvailable,
+            }}
+        >
+            {isDaemonAvailable && children}
+            <DaemonUnavailableOverlay />
+        </StatusContext.Provider>
+    );
+};

client/ui/frontend/src/modules/profile/ProfileContext.tsx

@@ -74,7 +74,10 @@ export const ProfileProvider = ({ children }: { children: ReactNode }) => {
     }, []);
 
     useEffect(() => {
-        refresh();
+        void refresh();
+    }, [refresh]);
+
+    useEffect(() => {
         // The tray and other windows drive switches through the same
         // ProfileSwitcher.SwitchActive RPC, which emits this event on success.
         // Without the subscription, a tray-initiated switch leaves this

client/ui/frontend/src/modules/session/SessionAboutToExpire.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";
+import { Events } from "@wailsio/runtime";
+import { ClockIcon } from "lucide-react";
+import { Button } from "@/components/Button";
+import {
+    Connection,
+    Profiles as ProfilesSvc,
+    WindowManager,
+} from "@bindings/services";
+
+const EVENT_TRIGGER_LOGIN = "trigger-login";
+const DEFAULT_SECONDS = 360;
+
+function formatMMSS(seconds: number): string {
+    const s = Math.max(0, seconds | 0);
+    const m = Math.floor(s / 60);
+    const r = s % 60;
+    return `${String(m).padStart(2, "0")}:${String(r).padStart(2, "0")}`;
+}
+
+export default function SessionAboutToExpire() {
+    const { t } = useTranslation();
+    const [params] = useSearchParams();
+    const initialSeconds = useMemo(() => {
+        const raw = params.get("seconds");
+        if (!raw) return DEFAULT_SECONDS;
+        const n = Number.parseInt(raw, 10);
+        return Number.isFinite(n) && n > 0 ? n : DEFAULT_SECONDS;
+    }, [params]);
+
+    const [remaining, setRemaining] = useState(initialSeconds);
+    const expired = remaining <= 0;
+
+    useEffect(() => {
+        setRemaining(initialSeconds);
+    }, [initialSeconds]);
+
+    useEffect(() => {
+        if (remaining <= 0) return;
+        const id = window.setInterval(() => {
+            setRemaining((s) => (s <= 1 ? 0 : s - 1));
+        }, 1000);
+        return () => window.clearInterval(id);
+    }, [remaining]);
+
+    const stay = useCallback(() => {
+        void Events.Emit(EVENT_TRIGGER_LOGIN);
+        WindowManager.CloseSessionAboutToExpire().catch(console.error);
+    }, []);
+
+    const logout = useCallback(async () => {
+        try {
+            const username = await ProfilesSvc.Username();
+            const active = await ProfilesSvc.GetActive();
+            await Connection.Logout({
+                profileName: active.profileName || "default",
+                username,
+            });
+        } catch (e) {
+            console.error("logout from session-about-to-expire failed", e);
+        } finally {
+            WindowManager.CloseSessionAboutToExpire().catch(console.error);
+        }
+    }, []);
+
+    return (
+        <div
+            className={
+                "h-screen w-full flex flex-col items-center justify-center text-center px-6 py-8 bg-nb-gray-950"
+            }
+        >
+            <div
+                className={
+                    "h-12 w-12 rounded-full flex items-center justify-center bg-nb-gray-900 text-netbird mb-4"
+                }
+            >
+                <ClockIcon size={22} />
+            </div>
+            <h1 className={"text-base font-semibold text-nb-gray-100"}>
+                {expired
+                    ? t("sessionAboutToExpire.expired")
+                    : t("sessionAboutToExpire.title")}
+            </h1>
+            <p className={"text-xs text-nb-gray-400 mt-1.5 max-w-[20rem] leading-snug"}>
+                {t("sessionAboutToExpire.description")}
+            </p>
+            <div
+                className={
+                    "mt-5 font-mono text-3xl tabular-nums text-nb-gray-100 tracking-wider"
+                }
+                aria-live={"polite"}
+            >
+                {formatMMSS(remaining)}
+            </div>
+            <div className={"flex gap-2 mt-5 w-full max-w-[18rem]"}>
+                <Button
+                    variant={"secondary"}
+                    size={"xs"}
+                    className={"flex-1"}
+                    onClick={logout}
+                >
+                    {t("sessionAboutToExpire.logout")}
+                </Button>
+                <Button
+                    variant={"primary"}
+                    size={"xs"}
+                    className={"flex-1"}
+                    onClick={stay}
+                    disabled={expired}
+                >
+                    {t("sessionAboutToExpire.stay")}
+                </Button>
+            </div>
+        </div>
+    );
+}

client/ui/frontend/src/modules/session/SessionExpired.tsx

@@ -0,0 +1,61 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Events } from "@wailsio/runtime";
+import { ShieldAlertIcon } from "lucide-react";
+import { Button } from "@/components/Button";
+import { WindowManager } from "@bindings/services";
+
+const EVENT_TRIGGER_LOGIN = "trigger-login";
+
+export default function SessionExpired() {
+    const { t } = useTranslation();
+
+    const signIn = useCallback(() => {
+        void Events.Emit(EVENT_TRIGGER_LOGIN);
+        WindowManager.CloseSessionExpired().catch(console.error);
+    }, []);
+
+    const later = useCallback(() => {
+        WindowManager.CloseSessionExpired().catch(console.error);
+    }, []);
+
+    return (
+        <div
+            className={
+                "h-screen w-full flex flex-col items-center justify-center text-center px-6 py-8 bg-nb-gray-950"
+            }
+        >
+            <div
+                className={
+                    "h-12 w-12 rounded-full flex items-center justify-center bg-nb-gray-900 text-netbird mb-4"
+                }
+            >
+                <ShieldAlertIcon size={22} />
+            </div>
+            <h1 className={"text-base font-semibold text-nb-gray-100"}>
+                {t("sessionExpired.title")}
+            </h1>
+            <p className={"text-xs text-nb-gray-400 mt-1.5 max-w-[20rem] leading-snug"}>
+                {t("sessionExpired.description")}
+            </p>
+            <div className={"flex gap-2 mt-5 w-full max-w-[18rem]"}>
+                <Button
+                    variant={"secondary"}
+                    size={"xs"}
+                    className={"flex-1"}
+                    onClick={later}
+                >
+                    {t("sessionExpired.later")}
+                </Button>
+                <Button
+                    variant={"primary"}
+                    size={"xs"}
+                    className={"flex-1"}
+                    onClick={signIn}
+                >
+                    {t("sessionExpired.signIn")}
+                </Button>
+            </div>
+        </div>
+    );
+}

client/ui/frontend/src/modules/settings/Settings.tsx

@@ -13,6 +13,7 @@ import { SettingsSSH } from "@/modules/settings/SettingsSSH.tsx";
 import { SettingsAdvanced } from "@/modules/settings/SettingsAdvanced.tsx";
 import { SettingsTroubleshooting } from "@/modules/settings/SettingsTroubleshooting.tsx";
 import { SettingsAbout } from "@/modules/settings/SettingsAbout.tsx";
+import { SettingsDevelopment } from "@/modules/settings/SettingsDevelopment.tsx";
 
 // The settings window always opens at General. The only way to land on a
 // different tab is via navigation state (e.g. the update-available header
@@ -59,6 +60,11 @@ export const Settings = () => {
                                 <VerticalTabs.Content value={"about"}>
                                     <SettingsAbout />
                                 </VerticalTabs.Content>
+                                {import.meta.env.DEV && (
+                                    <VerticalTabs.Content value={"development"}>
+                                        <SettingsDevelopment />
+                                    </VerticalTabs.Content>
+                                )}
                             </SettingsProvider>
                         </div>
                     </ScrollArea.Viewport>

client/ui/frontend/src/modules/settings/SettingsAbout.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import { Browser } from "@wailsio/runtime";
 import netbirdFull from "@/assets/logos/netbird-full.svg";
 import pkg from "../../../package.json";
-import { useStatus } from "@/hooks/useStatus";
+import { useStatus } from "@/modules/daemon-status/StatusContext.tsx";
 import { UpdateVersionCard } from "@/modules/auto-update/UpdateVersionCard";
 import { useAccentTrigger } from "@/modules/settings/SettingsAccent";
 

client/ui/frontend/src/modules/settings/SettingsDevelopment.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@/components/Button";
+import { WindowManager } from "@bindings/services";
+import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
+
+export function SettingsDevelopment() {
+    return (
+        <SectionGroup title={"Session windows"}>
+            <div className={"flex flex-col gap-2 items-start"}>
+                <Button
+                    variant={"secondary"}
+                    onClick={() =>
+                        WindowManager.OpenSessionExpired().catch(console.error)
+                    }
+                >
+                    Open “Session expired”
+                </Button>
+                <Button
+                    variant={"secondary"}
+                    onClick={() =>
+                        WindowManager.OpenSessionAboutToExpire(336).catch(
+                            console.error,
+                        )
+                    }
+                >
+                    Open “About to expire” (5:36)
+                </Button>
+            </div>
+        </SectionGroup>
+    );
+}

client/ui/frontend/src/modules/settings/SettingsNavigationTriggers.tsx

@@ -5,6 +5,7 @@ import { UpdateBadge } from "@/modules/auto-update/UpdateBadge.tsx";
 import { useClientVersion } from "@/modules/auto-update/ClientVersionContext.tsx";
 import {
     BoltIcon,
+    HammerIcon,
     InfoIcon,
     LifeBuoyIcon,
     NetworkIcon,
@@ -62,6 +63,13 @@ export const SettingsNavigationTriggers = () => {
                 title={t("settings.tabs.about")}
                 adornment={aboutAdornment}
             />
+            {import.meta.env.DEV && (
+                <VerticalTabs.Trigger
+                    value={"development"}
+                    icon={HammerIcon}
+                    title={"Development"}
+                />
+            )}
         </VerticalTabs.List>
         </div>
     );