Merge branch 'ui-refactor' into ui-refactor-ui

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

@@ -0,0 +1,21 @@
+import netbirdLogo from "@/assets/logos/netbird.svg";
+import { SwitchItem } from "@/components/SwitchItem";
+import { SwitchItemGroup } from "@/components/SwitchItemGroup";
+import { ManagementMode } from "@/modules/settings/useManagementUrl.ts";
+
+type Props = {
+    value: ManagementMode;
+    onChange: (mode: ManagementMode) => void;
+};
+
+export const ManagementServerSwitch = ({ value, onChange }: Props) => {
+    return (
+        <SwitchItemGroup value={value} onChange={(v) => onChange(v as ManagementMode)}>
+            <SwitchItem value={ManagementMode.Cloud}>
+                <img src={netbirdLogo} alt={""} className={"h-[0.8rem] aspect-[31/23] shrink-0"} />
+                Cloud
+            </SwitchItem>
+            <SwitchItem value={ManagementMode.SelfHosted}>Self-hosted</SwitchItem>
+        </SwitchItemGroup>
+    );
+};

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

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { cn } from "@/lib/cn";
+import { MainRightSide } from "@/layouts/MainRightSide.tsx";
+import { VerticalTabs } from "@/components/VerticalTabs.tsx";
+import { SettingsNavigationTriggers } from "@/modules/settings/SettingsNavigationTriggers.tsx";
+import { SettingsProvider } from "@/modules/settings/SettingsContext.tsx";
+import { SettingsGeneral } from "@/modules/settings/SettingsGeneral.tsx";
+import { SettingsNetwork } from "@/modules/settings/SettingsNetwork.tsx";
+import { SettingsSecurity } from "@/modules/settings/SettingsSecurity.tsx";
+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";
+
+export const Settings = () => {
+    const [active, setActive] = useState("general");
+
+    return (
+        <VerticalTabs value={active} onValueChange={setActive} className={"p-4"}>
+            <SettingsNavigationTriggers />
+            <MainRightSide>
+                <ScrollArea.Root
+                    type={"auto"}
+                    className={"flex-1 min-h-0 overflow-hidden"}
+                >
+                    <ScrollArea.Viewport className={"h-full w-full"}>
+                        <div className={"py-8 px-7"}>
+                            <SettingsProvider>
+                                <VerticalTabs.Content value={"general"}>
+                                    <SettingsGeneral />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"network"}>
+                                    <SettingsNetwork />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"security"}>
+                                    <SettingsSecurity />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"ssh"}>
+                                    <SettingsSSH />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"advanced"}>
+                                    <SettingsAdvanced />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"troubleshooting"}>
+                                    <SettingsTroubleshooting />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"about"}>
+                                    <SettingsAbout />
+                                </VerticalTabs.Content>
+                            </SettingsProvider>
+                        </div>
+                    </ScrollArea.Viewport>
+                    <ScrollArea.Scrollbar
+                        orientation={"vertical"}
+                        className={cn(
+                            "flex select-none touch-none transition-colors",
+                            "w-1.5 bg-transparent py-1",
+                        )}
+                    >
+                        <ScrollArea.Thumb
+                            className={
+                                "flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative"
+                            }
+                        />
+                    </ScrollArea.Scrollbar>
+                </ScrollArea.Root>
+            </MainRightSide>
+        </VerticalTabs>
+    );
+};

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

@@ -0,0 +1,66 @@
+import { Browser } from "@wailsio/runtime";
+import netbirdFull from "@/assets/logos/netbird-full.svg";
+import pkg from "../../../package.json";
+import { useStatus } from "@/hooks/useStatus";
+import { NetBirdVersionCard } from "@/components/NetBirdVersionCard";
+import { useAccentTrigger } from "@/modules/settings/SettingsAccent";
+
+const LEGAL_LINKS: { label: string; url: string }[] = [
+    { label: "Imprint", url: "https://netbird.io/imprint" },
+    { label: "Privacy", url: "https://netbird.io/privacy" },
+    { label: "CLA", url: "https://netbird.io/cla" },
+    { label: "Terms of Service", url: "https://netbird.io/terms" },
+];
+
+function openUrl(url: string) {
+    void Browser.OpenURL(url).catch(() => window.open(url, "_blank"));
+}
+
+export function SettingsAbout() {
+    const { status } = useStatus();
+    const guiVersion = pkg.version;
+    const daemonVersion = status?.daemonVersion ?? "—";
+
+    const handleVersionClick = useAccentTrigger();
+
+    return (
+        <div
+            className={
+                "flex flex-col items-center justify-center gap-4 max-w-2xl mx-auto min-h-[calc(100vh-10rem)]"
+            }
+        >
+            <img src={netbirdFull} alt={"NetBird"} className={"h-7 w-auto"} />
+            <div className={"flex flex-col items-center gap-0.5 text-center"}>
+                <p
+                    className={"text-sm font-semibold text-nb-gray-100 cursor-default select-none"}
+                    onClick={handleVersionClick}
+                >
+                    NetBird Client v{daemonVersion}
+                </p>
+                <p className={"text-sm text-nb-gray-300"}>GUI v{guiVersion}</p>
+            </div>
+
+            <NetBirdVersionCard />
+
+            <p className={"text-sm text-nb-gray-300 text-center"}>
+                © {new Date().getFullYear()} NetBird. All Rights Reserved.
+            </p>
+            <div
+                className={"flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs text-nb-gray-200"}
+            >
+                {LEGAL_LINKS.map((link) => (
+                    <button
+                        key={link.url}
+                        type={"button"}
+                        onClick={() => openUrl(link.url)}
+                        className={
+                            "decoration-[0.5px] underline-offset-4 hover:text-nb-gray-100 hover:underline transition"
+                        }
+                    >
+                        {link.label}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+export function useAccentTrigger() {
+    const clicksRef = useRef(0);
+    const lastClickRef = useRef(0);
+
+    return useCallback(() => {
+        const now = performance.now();
+        if (now - lastClickRef.current > 400) {
+            clicksRef.current = 0;
+        }
+        lastClickRef.current = now;
+        clicksRef.current += 1;
+        if (clicksRef.current >= 10) {
+            clicksRef.current = 0;
+            triggerAccent();
+        }
+    }, []);
+}
+
+function triggerAccent() {
+    if (document.getElementById("nb-accent-root")) return;
+
+    const container = document.createElement("div");
+    container.id = "nb-accent-root";
+    document.body.appendChild(container);
+    const root = createRoot(container);
+
+    const cleanup = () => {
+        root.unmount();
+        container.remove();
+    };
+
+    root.render(<Accent onDone={cleanup} />);
+}
+
+function Accent({ onDone }: { onDone: () => void }) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [visible, setVisible] = useState(false);
+
+    useEffect(() => {
+        const raf = requestAnimationFrame(() => setVisible(true));
+        return () => cancelAnimationFrame(raf);
+    }, []);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        const dpr = window.devicePixelRatio || 1;
+        const resize = () => {
+            canvas.width = window.innerWidth * dpr;
+            canvas.height = window.innerHeight * dpr;
+            canvas.style.width = `${window.innerWidth}px`;
+            canvas.style.height = `${window.innerHeight}px`;
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        };
+        resize();
+        window.addEventListener("resize", resize);
+
+        const chars = "TEAMNETBIRD";
+        const fontSize = 16;
+        const columns = Math.floor(window.innerWidth / fontSize);
+        const drops = Array.from({ length: columns }, () => Math.random() * -50);
+
+        let raf = 0;
+        let last = 0;
+        const draw = (t: number) => {
+            if (t - last > 50) {
+                last = t;
+
+                ctx.globalCompositeOperation = "destination-out";
+                ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
+                ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
+
+                ctx.globalCompositeOperation = "source-over";
+                ctx.font = `${fontSize}px ui-monospace, monospace`;
+                ctx.fillStyle = "#f68330";
+
+                for (let i = 0; i < drops.length; i++) {
+                    const ch = chars[Math.floor(Math.random() * chars.length)];
+                    const y = drops[i] * fontSize;
+                    ctx.fillText(ch, i * fontSize, y);
+                    if (y > window.innerHeight && Math.random() > 0.975) {
+                        drops[i] = 0;
+                    }
+                    drops[i]++;
+                }
+            }
+            raf = requestAnimationFrame(draw);
+        };
+        raf = requestAnimationFrame(draw);
+
+        const timeout = window.setTimeout(() => {
+            setVisible(false);
+            window.setTimeout(onDone, 500);
+        }, 9000);
+
+        return () => {
+            cancelAnimationFrame(raf);
+            window.clearTimeout(timeout);
+            window.removeEventListener("resize", resize);
+        };
+    }, [onDone]);
+
+    return (
+        <div
+            className={`fixed inset-0 z-50 bg-black/5 transition-opacity duration-500 pointer-events-none ${visible ? "opacity-100" : "opacity-0"}`}
+        >
+            <canvas ref={canvasRef} className={"block"} />
+        </div>
+    );
+}

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

@@ -0,0 +1,103 @@
+import { useState } from "react";
+import Button from "@/components/Button";
+import { HelpText } from "@/components/HelpText";
+import { Input } from "@/components/Input";
+import { Label } from "@/components/Label";
+import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
+import { useSettings } from "@/modules/settings/SettingsContext.tsx";
+
+export function SettingsAdvanced() {
+    const { config, saveFields } = useSettings();
+
+    const [values, setValues] = useState({
+        interfaceName: config.interfaceName,
+        wireguardPort: config.wireguardPort,
+        mtu: config.mtu,
+        preSharedKey: config.preSharedKey,
+    });
+    const [saving, setSaving] = useState(false);
+
+    const hasChanges =
+        values.interfaceName !== config.interfaceName ||
+        values.wireguardPort !== config.wireguardPort ||
+        values.mtu !== config.mtu ||
+        values.preSharedKey !== config.preSharedKey;
+
+    const handleSave = async () => {
+        if (!hasChanges || saving) return;
+        setSaving(true);
+        try {
+            await saveFields(values);
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <>
+            <SectionGroup title={"Interface"}>
+                <Input
+                    label={"Name"}
+                    value={values.interfaceName}
+                    onChange={(e) =>
+                        setValues((v) => ({ ...v, interfaceName: e.target.value }))
+                    }
+                />
+                <div className={"grid grid-cols-2 gap-4"}>
+                    <Input
+                        label={"Port"}
+                        type={"number"}
+                        value={values.wireguardPort}
+                        onChange={(e) =>
+                            setValues((v) => ({
+                                ...v,
+                                wireguardPort: Number(e.target.value),
+                            }))
+                        }
+                    />
+                    <Input
+                        label={"MTU"}
+                        type={"number"}
+                        value={values.mtu}
+                        onChange={(e) =>
+                            setValues((v) => ({ ...v, mtu: Number(e.target.value) }))
+                        }
+                    />
+                </div>
+            </SectionGroup>
+
+            <SectionGroup title={"Security"}>
+                <div>
+                    <Label as={"div"}>Pre-shared Key</Label>
+                    <HelpText>
+                        Optional WireGuard PSK for extra symmetric encryption. Not the same as a
+                        NetBird Setup Key. You will only communicate with peers that use the same
+                        pre-shared key.
+                    </HelpText>
+                    <Input
+                        type={"password"}
+                        showPasswordToggle
+                        placeholder={"kQv0qF3oQpJYdgD5mC9hL7sB2xZ8nT4eU6wY1aR3jK0="}
+                        value={values.preSharedKey}
+                        onChange={(e) =>
+                            setValues((v) => ({ ...v, preSharedKey: e.target.value }))
+                        }
+                    />
+                </div>
+            </SectionGroup>
+
+            <div className={"absolute bottom-0 left-0 w-full"}>
+                <div className={"w-full flex justify-end px-8 py-5 border-t border-nb-gray-910"}>
+                    <Button
+                        variant={"primary"}
+                        size={"md"}
+                        disabled={!hasChanges || saving}
+                        onClick={handleSave}
+                    >
+                        Save Changes
+                    </Button>
+                </div>
+            </div>
+        </>
+    );
+}

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

@@ -0,0 +1,167 @@
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+    type ReactNode,
+} from "react";
+import { Settings as SettingsSvc } from "@bindings/services";
+import type { Config } from "@bindings/services/models.js";
+import { useProfile } from "@/modules/profile/ProfileContext.tsx";
+import { SkeletonSettings } from "@/modules/skeletons/SkeletonSettings.tsx";
+
+const SAVE_DEBOUNCE_MS = 400;
+
+type SettingsContextValue = {
+    config: Config;
+    setField: <K extends keyof Config>(k: K, v: Config[K]) => void;
+    saveField: <K extends keyof Config>(k: K, v: Config[K]) => Promise<void>;
+    saveFields: (partial: Partial<Config>) => Promise<void>;
+    saveNow: () => Promise<void>;
+};
+
+const SettingsContext = createContext<SettingsContextValue | null>(null);
+
+export const useSettings = () => {
+    const ctx = useContext(SettingsContext);
+    if (!ctx) {
+        throw new Error("useSettings must be used inside SettingsProvider");
+    }
+    return ctx;
+};
+
+const useSettingsState = () => {
+    const { username, activeProfile, loaded: profileLoaded } = useProfile();
+    const [config, setConfig] = useState<Config | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(() => {
+        if (!profileLoaded || !activeProfile) return;
+        (async () => {
+            try {
+                const c = await SettingsSvc.GetConfig({
+                    profileName: activeProfile,
+                    username,
+                });
+                setConfig(c);
+                setError(null);
+            } catch (e) {
+                setError(String(e));
+            }
+        })();
+    }, [profileLoaded, activeProfile, username]);
+
+    useEffect(
+        () => () => {
+            if (saveTimer.current) clearTimeout(saveTimer.current);
+        },
+        [],
+    );
+
+    const save = useCallback(
+        async (next: Config) => {
+            // The daemon masks an existing PSK as "**********" in GetConfig.
+            // Sending the mask back round-trips it into the saved config and
+            // wgtypes.ParseKey fails on the next connect. Drop the mask so
+            // unrelated toggles don't corrupt the stored PSK.
+            const { preSharedKey, ...rest } = next;
+            try {
+                await SettingsSvc.SetConfig({
+                    ...rest,
+                    ...(preSharedKey === "**********" ? {} : { preSharedKey }),
+                    profileName: activeProfile,
+                    username,
+                });
+                setError(null);
+            } catch (e) {
+                setError(String(e));
+            }
+        },
+        [activeProfile, username],
+    );
+
+    const setField = useCallback(
+        <K extends keyof Config>(k: K, v: Config[K]) => {
+            setConfig((c) => {
+                if (!c) return c;
+                const next = { ...c, [k]: v };
+                if (saveTimer.current) clearTimeout(saveTimer.current);
+                saveTimer.current = setTimeout(() => {
+                    void save(next);
+                }, SAVE_DEBOUNCE_MS);
+                return next;
+            });
+        },
+        [save],
+    );
+
+    const saveNow = useCallback(async () => {
+        if (!config) return;
+        if (saveTimer.current) {
+            clearTimeout(saveTimer.current);
+            saveTimer.current = null;
+        }
+        await save(config);
+    }, [config, save]);
+
+    const saveField = useCallback(
+        async <K extends keyof Config>(k: K, v: Config[K]) => {
+            if (!config) return;
+            if (saveTimer.current) {
+                clearTimeout(saveTimer.current);
+                saveTimer.current = null;
+            }
+            const next = { ...config, [k]: v };
+            setConfig(next);
+            await save(next);
+        },
+        [config, save],
+    );
+
+    const saveFields = useCallback(
+        async (partial: Partial<Config>) => {
+            if (!config) return;
+            if (saveTimer.current) {
+                clearTimeout(saveTimer.current);
+                saveTimer.current = null;
+            }
+            const next = { ...config, ...partial };
+            setConfig(next);
+            await save(next);
+        },
+        [config, save],
+    );
+
+    return { config, error, setField, saveField, saveFields, saveNow };
+};
+
+export const SettingsProvider = ({ children }: { children: ReactNode }) => {
+    const { config, error, setField, saveField, saveFields, saveNow } = useSettingsState();
+
+    // TODO: Better displaying of errors
+    return (
+        <>
+            {error && <p className={"pb-6 text-sm text-red-500"}>{error}</p>}
+            <div className={"flex-1 min-h-0 overflow-y-auto"}>
+                {!config ? (
+                    <SkeletonSettings />
+                ) : (
+                    <SettingsContext.Provider
+                        value={{
+                            config,
+                            setField,
+                            saveField,
+                            saveFields,
+                            saveNow,
+                        }}
+                    >
+                        {children}
+                    </SettingsContext.Provider>
+                )}
+            </div>
+        </>
+    );
+};

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

@@ -0,0 +1,84 @@
+import { useEffect, useRef } from "react";
+import { Button } from "@/components/Button";
+import FancyToggleSwitch from "@/components/FancyToggleSwitch";
+import { HelpText } from "@/components/HelpText";
+import { Input } from "@/components/Input";
+import { Label } from "@/components/Label";
+import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
+import { useSettings } from "@/modules/settings/SettingsContext.tsx";
+import { ManagementServerSwitch } from "@/modules/settings/ManagementServerSwitch.tsx";
+import { ManagementMode, useManagementUrl } from "@/modules/settings/useManagementUrl.ts";
+
+export function SettingsGeneral() {
+    const { config, setField } = useSettings();
+    const { mode, setMode, setUrl, displayUrl, showError, canSave, save } = useManagementUrl();
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const prevMode = useRef(mode);
+    useEffect(() => {
+        if (
+            prevMode.current === ManagementMode.Cloud &&
+            mode === ManagementMode.SelfHosted
+        ) {
+            inputRef.current?.focus();
+        }
+        prevMode.current = mode;
+    }, [mode]);
+
+    return (
+        <>
+            <SectionGroup title={"General"}>
+                <FancyToggleSwitch
+                    value={!config.disableAutoConnect}
+                    onChange={(v) => setField("disableAutoConnect", !v)}
+                    label={"Connect on Startup"}
+                    helpText={"Automatically establish a connection when the service starts."}
+                />
+                <FancyToggleSwitch
+                    value={!config.disableNotifications}
+                    onChange={(v) => setField("disableNotifications", !v)}
+                    label={"Desktop Notifications"}
+                    helpText={"Show desktop notifications for new updates and connection events."}
+                />
+            </SectionGroup>
+
+            <SectionGroup title={"Connection"}>
+                <div>
+                    <div className={"flex items-start gap-3"}>
+                        <div className={"flex-1 min-w-0"}>
+                            <Label as={"div"}>Management Server</Label>
+                            <HelpText>
+                                Connect to NetBird Cloud or your own self-hosted management server.
+                                Changes will reconnect the client.
+                            </HelpText>
+                        </div>
+                        <ManagementServerSwitch value={mode} onChange={setMode} />
+                    </div>
+                    {mode === ManagementMode.SelfHosted && (
+                        <div className={"flex items-start gap-3 mt-2"}>
+                            <Input
+                                ref={inputRef}
+                                value={displayUrl}
+                                onChange={(e) => setUrl(e.target.value)}
+                                placeholder={"https://netbird.selfhosted.com:443"}
+                                error={
+                                    showError
+                                        ? "Please enter a valid URL, e.g., https://netbird.selfhosted.com:443"
+                                        : undefined
+                                }
+                            />
+                            <Button
+                                variant={"primary"}
+                                size={"md"}
+                                disabled={!canSave}
+                                onClick={() => save()}
+                            >
+                                Save
+                            </Button>
+                        </div>
+                    )}
+                </div>
+            </SectionGroup>
+        </>
+    );
+}

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

@@ -0,0 +1,54 @@
+import { VerticalTabs } from "@/components/VerticalTabs.tsx";
+import {
+    BoltIcon,
+    InfoIcon,
+    LifeBuoyIcon,
+    NetworkIcon,
+    ShieldIcon,
+    SlidersHorizontalIcon,
+    SquareTerminalIcon,
+} from "lucide-react";
+
+export const SettingsNavigationTriggers = () => {
+    return (
+        <div className={"flex flex-col w-52 shrink-0 items-center select-none"}>
+        <VerticalTabs.List>
+            <VerticalTabs.Trigger
+                value={"general"}
+                icon={SlidersHorizontalIcon}
+                title={"General"}
+            />
+            <VerticalTabs.Trigger
+                value={"network"}
+                icon={NetworkIcon}
+                title={"Network"}
+            />
+            <VerticalTabs.Trigger
+                value={"security"}
+                icon={ShieldIcon}
+                title={"Security"}
+            />
+            <VerticalTabs.Trigger
+                value={"ssh"}
+                icon={SquareTerminalIcon}
+                title={"SSH"}
+            />
+            <VerticalTabs.Trigger
+                value={"advanced"}
+                icon={BoltIcon}
+                title={"Advanced"}
+            />
+            <VerticalTabs.Trigger
+                value={"troubleshooting"}
+                icon={LifeBuoyIcon}
+                title={"Troubleshooting"}
+            />
+            <VerticalTabs.Trigger
+                value={"about"}
+                icon={InfoIcon}
+                title={"About"}
+            />
+        </VerticalTabs.List>
+        </div>
+    );
+};

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

@@ -0,0 +1,51 @@
+import FancyToggleSwitch from "@/components/FancyToggleSwitch";
+import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
+import { useSettings } from "@/modules/settings/SettingsContext.tsx";
+
+export function SettingsNetwork() {
+    const { config, setField } = useSettings();
+
+    return (
+        <>
+            <SectionGroup title={"Connectivity"}>
+                <FancyToggleSwitch
+                    value={config.lazyConnectionEnabled}
+                    onChange={(v) => setField("lazyConnectionEnabled", v)}
+                    label={"Lazy Connections"}
+                    helpText={
+                        "Instead of maintaining always-on connections, NetBird activates them on-demand based on activity or signaling."
+                    }
+                />
+                <FancyToggleSwitch
+                    value={config.networkMonitor}
+                    onChange={(v) => setField("networkMonitor", v)}
+                    label={"Reconnect on Network Change"}
+                    helpText={
+                        "Monitor the network and automatically reconnect on changes such as Wi-Fi switching, Ethernet changes, or resume from sleep."
+                    }
+                />
+            </SectionGroup>
+
+            <SectionGroup title={"Routing & DNS"}>
+                <FancyToggleSwitch
+                    value={!config.disableDns}
+                    onChange={(v) => setField("disableDns", !v)}
+                    label={"Enable DNS"}
+                    helpText={"Apply NetBird-managed DNS settings to the host resolver."}
+                />
+                <FancyToggleSwitch
+                    value={!config.disableClientRoutes}
+                    onChange={(v) => setField("disableClientRoutes", !v)}
+                    label={"Enable Client Routes"}
+                    helpText={"Accept routes from other peers to reach their networks."}
+                />
+                <FancyToggleSwitch
+                    value={!config.disableServerRoutes}
+                    onChange={(v) => setField("disableServerRoutes", !v)}
+                    label={"Enable Server Routes"}
+                    helpText={"Advertise this host's local routes to other peers."}
+                />
+            </SectionGroup>
+        </>
+    );
+}

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

@@ -0,0 +1,124 @@
+import FancyToggleSwitch from "@/components/FancyToggleSwitch";
+import { HelpText } from "@/components/HelpText";
+import { Input } from "@/components/Input";
+import { Label } from "@/components/Label";
+import { cn } from "@/lib/cn";
+import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
+import { useSettings } from "@/modules/settings/SettingsContext.tsx";
+import { type ChangeEvent, useEffect, useState } from "react";
+
+export function SettingsSSH() {
+    const { config, setField } = useSettings();
+    const isSSHServerEnabled = config.serverSshAllowed;
+    const [jwtTtlInput, setJwtTtlInput] = useState(String(config.sshJwtCacheTtl));
+
+    // Keep the local input in sync when the config changes from elsewhere
+    useEffect(() => {
+        setJwtTtlInput(String(config.sshJwtCacheTtl));
+    }, [config.sshJwtCacheTtl]);
+
+    const handleJwtTtlChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const v = e.target.value;
+        setJwtTtlInput(v);
+        if (v === "") return;
+        const n = Number(v);
+        if (Number.isFinite(n) && n >= 0) {
+            setField("sshJwtCacheTtl", n);
+        }
+    };
+
+    const handleJwtTtlBlur = () => {
+        if (jwtTtlInput === "") {
+            setJwtTtlInput("0");
+            setField("sshJwtCacheTtl", 0);
+            return;
+        }
+        const n = Number(jwtTtlInput);
+        if (!Number.isFinite(n) || n < 0) {
+            setJwtTtlInput(String(config.sshJwtCacheTtl));
+        }
+    };
+    return (
+        <>
+            <SectionGroup title={"Server"}>
+                <FancyToggleSwitch
+                    value={config.serverSshAllowed}
+                    onChange={(v) => setField("serverSshAllowed", v)}
+                    label={"Enable SSH Server"}
+                    helpText={
+                        "Run the NetBird SSH server on this host so other peers can connect to it."
+                    }
+                />
+            </SectionGroup>
+
+            <SectionGroup title={"Capabilities"} disabled={!isSSHServerEnabled}>
+                <FancyToggleSwitch
+                    value={config.enableSshRoot}
+                    onChange={(v) => setField("enableSshRoot", v)}
+                    label={"Allow Root Login"}
+                    helpText={
+                        "Let peers sign in as the root user. Disable to require a non-privileged account."
+                    }
+                />
+                <FancyToggleSwitch
+                    value={config.enableSshSftp}
+                    onChange={(v) => setField("enableSshSftp", v)}
+                    label={"Allow SFTP"}
+                    helpText={"Transfer files securely using native SFTP or SCP clients."}
+                />
+                <FancyToggleSwitch
+                    value={config.enableSshLocalPortForwarding}
+                    onChange={(v) => setField("enableSshLocalPortForwarding", v)}
+                    label={"Local Port Forwarding"}
+                    helpText={
+                        "Let connecting peers tunnel local ports to services reachable from this host."
+                    }
+                />
+                <FancyToggleSwitch
+                    value={config.enableSshRemotePortForwarding}
+                    onChange={(v) => setField("enableSshRemotePortForwarding", v)}
+                    label={"Remote Port Forwarding"}
+                    helpText={
+                        "Let connecting peers expose ports on this host back to their own machine."
+                    }
+                />
+            </SectionGroup>
+
+            <SectionGroup title={"Authentication"} disabled={!isSSHServerEnabled}>
+                <FancyToggleSwitch
+                    value={!config.disableSshAuth}
+                    onChange={(v) => setField("disableSshAuth", !v)}
+                    label={"Enable JWT Authentication"}
+                    helpText={
+                        "Verify each SSH session against your IdP for user identity and audit. Disable to rely on network ACL policies only, useful when no IdP is available."
+                    }
+                />
+                <div
+                    className={cn(
+                        "flex items-center gap-6 justify-between",
+                        config.disableSshAuth && "opacity-50 pointer-events-none",
+                    )}
+                >
+                    <div className={"flex-1 max-w-md"}>
+                        <Label as={"div"}>JWT Cache TTL</Label>
+                        <HelpText margin={false}>
+                            How long this client caches a JWT before prompting again on outgoing SSH
+                            connections. Set to 0 to disable caching and authenticate on every
+                            connection.
+                        </HelpText>
+                    </div>
+                    <div className={"w-40 shrink-0"}>
+                        <Input
+                            type={"number"}
+                            min={0}
+                            value={jwtTtlInput}
+                            onChange={handleJwtTtlChange}
+                            onBlur={handleJwtTtlBlur}
+                            customSuffix={"Second(s)"}
+                        />
+                    </div>
+                </div>
+            </SectionGroup>
+        </>
+    );
+}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export const SectionGroup = ({
+    title,
+    children,
+    disabled = false,
+}: {
+    title: string;
+    children: ReactNode;
+    disabled?: boolean;
+}) => (
+    <section className={cn("mb-8 last:mb-1 px-1", disabled && "opacity-30 pointer-events-none")}>
+        <h2 className={"text-xs uppercase tracking-wider text-nb-gray-400 mb-4 font-semibold"}>
+            {title}
+        </h2>
+        <div className={"flex flex-col gap-5"}>{children}</div>
+    </section>
+);

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

@@ -0,0 +1,52 @@
+import FancyToggleSwitch from "@/components/FancyToggleSwitch";
+import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
+import { useSettings } from "@/modules/settings/SettingsContext.tsx";
+
+export function SettingsSecurity() {
+    const { config, setField } = useSettings();
+    return (
+        <>
+            <SectionGroup title={"Firewall"}>
+                <FancyToggleSwitch
+                    value={config.blockInbound}
+                    onChange={(v) => setField("blockInbound", v)}
+                    label={"Block Inbound Traffic"}
+                    helpText={
+                        "Reject unsolicited connections from peers to this device and any networks it routes. Outbound traffic is unaffected."
+                    }
+                />
+                <FancyToggleSwitch
+                    value={config.blockLanAccess}
+                    onChange={(v) => setField("blockLanAccess", v)}
+                    label={"Block LAN Access"}
+                    helpText={
+                        "Prevent peers from reaching your local network or its devices when this device routes their traffic."
+                    }
+                />
+            </SectionGroup>
+
+            <SectionGroup title={"Encryption"}>
+                <FancyToggleSwitch
+                    value={config.rosenpassEnabled}
+                    onChange={(v) => {
+                        setField("rosenpassEnabled", v);
+                        if (!v) setField("rosenpassPermissive", false);
+                    }}
+                    label={"Enable Quantum-Resistance"}
+                    helpText={
+                        "Add a post-quantum key exchange via Rosenpass on top of WireGuard®."
+                    }
+                />
+                <FancyToggleSwitch
+                    value={config.rosenpassPermissive}
+                    onChange={(v) => setField("rosenpassPermissive", v)}
+                    label={"Enable Permissive Mode"}
+                    helpText={
+                        "Allow connections to peers without quantum-resistance support."
+                    }
+                    disabled={!config.rosenpassEnabled}
+                />
+            </SectionGroup>
+        </>
+    );
+}

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

@@ -0,0 +1,271 @@
+import type { ReactNode } from "react";
+import { FolderOpen } from "lucide-react";
+import { Debug as DebugSvc } from "@bindings/services";
+import type { DebugBundleResult } from "@bindings/services/models.js";
+import { Button } from "@/components/Button";
+import FancyToggleSwitch from "@/components/FancyToggleSwitch";
+import HelpText from "@/components/HelpText.tsx";
+import { Input } from "@/components/Input";
+import { Label } from "@/components/Label";
+import { StatusPanel } from "@/components/StatusPanel";
+import { cn } from "@/lib/cn";
+import type { DebugStage } from "@/modules/debug-bundle/useDebugBundle.ts";
+import { useDebugBundleContext } from "@/modules/debug-bundle/useDebugBundleContext.ts";
+import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
+
+export function SettingsTroubleshooting() {
+    const {
+        anonymize,
+        setAnonymize,
+        systemInfo,
+        setSystemInfo,
+        upload,
+        setUpload,
+        trace,
+        setTrace,
+        traceMinutes,
+        setTraceMinutes,
+        run,
+        stage,
+        cancel,
+        reset,
+    } = useDebugBundleContext();
+
+    if (stage.kind === "done" || stage.kind === "error") {
+        return <ResultSection stage={stage} onClose={reset} />;
+    }
+    if (stage.kind !== "idle") {
+        return <ProgressSection stage={stage} onCancel={cancel} />;
+    }
+
+    return (
+        <SectionGroup title={"Debug bundle"}>
+            <HelpText className={"-mt-2 mb-2"}>
+                A debug bundle helps NetBird support investigate connection problems. <br /> It's a
+                .zip file with logs, system details and debug information from your device.
+            </HelpText>
+
+            <FancyToggleSwitch
+                value={anonymize}
+                onChange={setAnonymize}
+                label={"Anonymize Sensitive Information"}
+                helpText={"Hides public IP addresses and non-NetBird domains from logs."}
+            />
+            <FancyToggleSwitch
+                value={systemInfo}
+                onChange={setSystemInfo}
+                label={"Include System Information"}
+                helpText={"Include OS, kernel, network interfaces, and routing tables."}
+            />
+            <FancyToggleSwitch
+                value={upload}
+                onChange={setUpload}
+                label={"Upload Bundle to NetBird Servers"}
+                helpText={
+                    "Securely uploads the bundle and returns an upload key. Share the key with NetBird support over GitHub or Slack instead of attaching the file directly."
+                }
+            />
+            <FancyToggleSwitch
+                value={trace}
+                onChange={setTrace}
+                label={"Capture Trace Logs"}
+                helpText={
+                    "Raises logging to TRACE and cycles NetBird up and down to capture connection logs. The previous level is restored after the bundle is built."
+                }
+            />
+            <div
+                className={cn(
+                    "flex items-center gap-6 justify-between",
+                    !trace && "opacity-50 pointer-events-none",
+                )}
+            >
+                <div className={"flex-1 max-w-md"}>
+                    <Label as={"div"}>Capture Duration</Label>
+                    <HelpText margin={false}>
+                        How long to capture trace logs before generating the bundle.
+                    </HelpText>
+                </div>
+                <div className={"w-40 shrink-0"}>
+                    <Input
+                        type={"number"}
+                        min={1}
+                        max={30}
+                        value={traceMinutes}
+                        onChange={(e) =>
+                            setTraceMinutes(Math.max(1, Math.min(30, Number(e.target.value) || 1)))
+                        }
+                        customSuffix={"Minute(s)"}
+                        disabled={!trace}
+                    />
+                </div>
+            </div>
+
+            <BottomBar>
+                <Button variant={"primary"} size={"md"} onClick={run}>
+                    Create Bundle
+                </Button>
+            </BottomBar>
+        </SectionGroup>
+    );
+}
+
+function ProgressSection({ stage, onCancel }: { stage: DebugStage; onCancel: () => void }) {
+    const cancelling = stage.kind === "cancelling";
+    return (
+        <StatusPanel
+            variant={"loading"}
+            title={stageLabel(stage)}
+            description={
+                "Collecting logs, system details, and connection state. This usually takes a moment — keep this window open until it completes."
+            }
+            actions={
+                <Button variant={"secondary"} size={"xs"} onClick={onCancel} disabled={cancelling}>
+                    {cancelling ? "Cancelling…" : "Cancel"}
+                </Button>
+            }
+        />
+    );
+}
+
+function ResultSection({
+    stage,
+    onClose,
+}: {
+    stage: Extract<DebugStage, { kind: "done" } | { kind: "error" }>;
+    onClose: () => void;
+}) {
+    if (stage.kind === "error") {
+        return (
+            <StatusPanel
+                variant={"error"}
+                title={"Bundle failed"}
+                description={stage.message}
+                actions={
+                    <Button variant={"secondary"} size={"xs"} onClick={onClose}>
+                        Close
+                    </Button>
+                }
+            />
+        );
+    }
+    return <DoneResult result={stage.result} uploaded={stage.uploadAttempted} onClose={onClose} />;
+}
+
+function DoneResult({
+    result,
+    uploaded,
+    onClose,
+}: {
+    result: DebugBundleResult;
+    uploaded: boolean;
+    onClose: () => void;
+}) {
+    const showKey = uploaded && Boolean(result.uploadedKey);
+    const uploadFailed = uploaded && !result.uploadedKey;
+    const onRevealPath = () => {
+        if (!result.path) return;
+        void DebugSvc.RevealFile(result.path).catch(() => {});
+    };
+    return (
+        <StatusPanel
+            variant={"success"}
+            title={showKey ? "Debug bundle successfully uploaded!" : "Bundle saved"}
+            description={
+                showKey
+                    ? "Share the upload key below with NetBird support. A local copy was also saved on your device."
+                    : "Your debug bundle has been saved locally."
+            }
+            actions={
+                <>
+                    <Button variant={"secondary"} size={"xs"} onClick={onClose}>
+                        Close
+                    </Button>
+                    {showKey ? (
+                        <Button variant={"primary"} size={"xs"} copy={result.uploadedKey}>
+                            Copy Key
+                        </Button>
+                    ) : (
+                        result.path && (
+                            <Button variant={"primary"} size={"xs"} onClick={onRevealPath}>
+                                <FolderOpen size={12} />
+                                Open Folder
+                            </Button>
+                        )
+                    )}
+                </>
+            }
+        >
+            <div className={"w-full max-w-xs mx-auto flex flex-col gap-3"}>
+                {showKey && <Input value={result.uploadedKey} readOnly copy />}
+
+                {result.path && !showKey && (
+                    <Input
+                        value={result.path}
+                        readOnly
+                        customSuffix={
+                            <button
+                                type={"button"}
+                                onClick={onRevealPath}
+                                className={"pointer-events-auto hover:text-white transition-all"}
+                                aria-label={"Open file location"}
+                            >
+                                <FolderOpen size={16} />
+                            </button>
+                        }
+                    />
+                )}
+
+                {uploadFailed && (
+                    <div
+                        className={
+                            "rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300"
+                        }
+                    >
+                        Upload failed
+                        {result.uploadFailureReason ? `: ${result.uploadFailureReason}` : "."} The
+                        bundle is still saved locally.
+                    </div>
+                )}
+            </div>
+        </StatusPanel>
+    );
+}
+
+function BottomBar({ children }: { children: ReactNode }) {
+    return (
+        <div className={"absolute bottom-0 left-0 w-full"}>
+            <div
+                className={
+                    "w-full flex justify-end gap-3 px-8 py-5 border-t border-nb-gray-900 bg-nb-gray-935"
+                }
+            >
+                {children}
+            </div>
+        </div>
+    );
+}
+
+const stageLabel = (stage: DebugStage): string => {
+    switch (stage.kind) {
+        case "preparing-trace":
+            return "Switching to trace logging…";
+        case "reconnecting":
+            return "Reconnecting NetBird…";
+        case "capturing": {
+            const fmt = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+            return `Capturing logs — ${fmt(
+                stage.totalSec - stage.remainingSec,
+            )} / ${fmt(stage.totalSec)}`;
+        }
+        case "restoring-level":
+            return "Restoring previous log level…";
+        case "bundling":
+            return "Generating debug bundle…";
+        case "uploading":
+            return "Uploading to NetBird…";
+        case "cancelling":
+            return "Cancelling…";
+        default:
+            return "";
+    }
+};

client/ui/frontend/src/modules/settings/useManagementUrl.ts

@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { useSettings } from "@/modules/settings/SettingsContext.tsx";
+
+export enum ManagementMode {
+    Cloud = "cloud",
+    SelfHosted = "selfhosted",
+}
+
+export const CLOUD_MANAGEMENT_URL = "https://api.netbird.io:443";
+
+function normalizeManagementUrl(input: string): string {
+    const trimmed = input.trim();
+    if (!trimmed) return "";
+    if (/^https?:\/\//i.test(trimmed)) return trimmed;
+    return `https://${trimmed}`;
+}
+
+const URL_PATTERN = new RegExp(
+    "^(https?:\\/\\/)?" +
+        "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|localhost|" +
+        "((\\d{1,3}\\.){3}\\d{1,3}))" +
+        "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
+        "(\\?[;&a-z\\d%_.~+=-]*)?" +
+        "(\\#[-a-z\\d_]*)?$",
+    "i",
+);
+
+function isValidManagementUrl(input: string): boolean {
+    const trimmed = input.trim();
+    if (!trimmed) return false;
+    return URL_PATTERN.test(trimmed);
+}
+
+function modeFromUrl(url: string): ManagementMode {
+    return url === CLOUD_MANAGEMENT_URL ? ManagementMode.Cloud : ManagementMode.SelfHosted;
+}
+
+export function useManagementUrl() {
+    const { config, saveField } = useSettings();
+    const [mode, setModeState] = useState<ManagementMode>(
+        modeFromUrl(config.managementUrl),
+    );
+    const [url, setUrl] = useState(
+        config.managementUrl === CLOUD_MANAGEMENT_URL ? "" : config.managementUrl,
+    );
+
+    useEffect(() => {
+        setModeState(modeFromUrl(config.managementUrl));
+        if (config.managementUrl !== CLOUD_MANAGEMENT_URL) {
+            setUrl(config.managementUrl);
+        }
+    }, [config.managementUrl]);
+
+    const setMode = (next: ManagementMode) => {
+        setModeState(next);
+        if (
+            next === ManagementMode.Cloud &&
+            config.managementUrl !== CLOUD_MANAGEMENT_URL
+        ) {
+            void saveField("managementUrl", CLOUD_MANAGEMENT_URL);
+        }
+    };
+
+    const normalizedUrl = normalizeManagementUrl(url);
+    const urlValid = isValidManagementUrl(url);
+    const targetUrl =
+        mode === ManagementMode.Cloud ? CLOUD_MANAGEMENT_URL : normalizedUrl;
+    const dirty = targetUrl !== config.managementUrl;
+    const showError =
+        mode === ManagementMode.SelfHosted && url.trim() !== "" && !urlValid;
+    const canSave = dirty && (mode === ManagementMode.Cloud || urlValid);
+    const displayUrl = mode === ManagementMode.Cloud ? CLOUD_MANAGEMENT_URL : url;
+
+    const save = () => saveField("managementUrl", targetUrl);
+
+    return {
+        mode,
+        setMode,
+        url,
+        setUrl,
+        displayUrl,
+        showError,
+        canSave,
+        save,
+    };
+}