[client/uiwails] Windows cross-build support and notification actions

- Add build/windows/Taskfile.yml to cross-compile from Linux with
  mingw-w64 (CC=x86_64-w64-mingw32-gcc, CGO_ENABLED=1, -H=windowsgui).
- Rename xembed_tray.{c,h} to xembed_tray_linux.{c,h} so the Go
  toolchain only compiles these X11/GTK sources on Linux.
- Add sendShowWindowSignal on Windows: opens the named Global event
  and calls SetEvent so the already-running instance shows its window.
- Register a notification category with Open/Dismiss action buttons
  and wire a response handler. Do this inside the ApplicationStarted
  hook so it runs after the notifications service's Startup has
  initialized appName/appGUID on Windows; otherwise the category is
  saved under an empty registry path and SendNotificationWithActions
  silently falls back to a plain toast with no buttons.
- Bump github.com/wailsapp/wails/v3 to v3.0.0-alpha.78.

client/cmd/root.go

@@ -22,6 +22,7 @@ import (
 	"google.golang.org/grpc"
 	"google.golang.org/grpc/credentials/insecure"
 
+	daddr "github.com/netbirdio/netbird/client/internal/daemonaddr"
 	"github.com/netbirdio/netbird/client/internal/profilemanager"
 )
 
@@ -80,6 +81,15 @@ var (
 		Short:        "",
 		Long:         "",
 		SilenceUsage: true,
+		PersistentPreRunE: func(cmd *cobra.Command, args []string) error {
+			SetFlagsFromEnvVars(cmd.Root())
+
+			// Don't resolve for service commands — they create the socket, not connect to it.
+			if !isServiceCmd(cmd) {
+				daemonAddr = daddr.ResolveUnixDaemonAddr(daemonAddr)
+			}
+			return nil
+		},
 	}
 )
 
@@ -386,7 +396,6 @@ func migrateToNetbird(oldPath, newPath string) bool {
 }
 
 func getClient(cmd *cobra.Command) (*grpc.ClientConn, error) {
-	SetFlagsFromEnvVars(rootCmd)
 	cmd.SetOut(cmd.OutOrStdout())
 
 	conn, err := DialClientGRPCServer(cmd.Context(), daemonAddr)
@@ -399,3 +408,13 @@ func getClient(cmd *cobra.Command) (*grpc.ClientConn, error) {
 
 	return conn, nil
 }
+
+// isServiceCmd returns true if cmd is the "service" command or a child of it.
+func isServiceCmd(cmd *cobra.Command) bool {
+	for c := cmd; c != nil; c = c.Parent() {
+		if c.Name() == "service" {
+			return true
+		}
+	}
+	return false
+}

client/internal/daemonaddr/resolve.go

@@ -0,0 +1,60 @@
+//go:build !windows && !ios && !android
+
+package daemonaddr
+
+import (
+	"os"
+	"path/filepath"
+	"strings"
+
+	log "github.com/sirupsen/logrus"
+)
+
+var scanDir = "/var/run/netbird"
+
+// setScanDir overrides the scan directory (used by tests).
+func setScanDir(dir string) {
+	scanDir = dir
+}
+
+// ResolveUnixDaemonAddr checks whether the default Unix socket exists and, if not,
+// scans /var/run/netbird/ for a single .sock file to use instead. This handles the
+// mismatch between the netbird@.service template (which places the socket under
+// /var/run/netbird/<instance>.sock) and the CLI default (/var/run/netbird.sock).
+func ResolveUnixDaemonAddr(addr string) string {
+	if !strings.HasPrefix(addr, "unix://") {
+		return addr
+	}
+
+	sockPath := strings.TrimPrefix(addr, "unix://")
+	if _, err := os.Stat(sockPath); err == nil {
+		return addr
+	}
+
+	entries, err := os.ReadDir(scanDir)
+	if err != nil {
+		return addr
+	}
+
+	var found []string
+	for _, e := range entries {
+		if e.IsDir() {
+			continue
+		}
+		if strings.HasSuffix(e.Name(), ".sock") {
+			found = append(found, filepath.Join(scanDir, e.Name()))
+		}
+	}
+
+	switch len(found) {
+	case 1:
+		resolved := "unix://" + found[0]
+		log.Infof("Default daemon socket not found, using discovered socket: %s", resolved)
+		return resolved
+	case 0:
+		return addr
+	default:
+		log.Warnf("Default daemon socket not found and multiple sockets discovered in %s; pass --daemon-addr explicitly", scanDir)
+		return addr
+	}
+}

client/internal/daemonaddr/resolve_stub.go

@@ -0,0 +1,8 @@
+//go:build windows || ios || android
+
+package daemonaddr
+
+// ResolveUnixDaemonAddr is a no-op on platforms that don't use Unix sockets.
+func ResolveUnixDaemonAddr(addr string) string {
+	return addr
+}

client/internal/daemonaddr/resolve_test.go

@@ -0,0 +1,121 @@
+//go:build !windows && !ios && !android
+
+package daemonaddr
+
+import (
+	"os"
+	"path/filepath"
+	"testing"
+)
+
+// createSockFile creates a regular file with a .sock extension.
+// ResolveUnixDaemonAddr uses os.Stat (not net.Dial), so a regular file is
+// sufficient and avoids Unix socket path-length limits on macOS.
+func createSockFile(t *testing.T, path string) {
+	t.Helper()
+	if err := os.WriteFile(path, nil, 0o600); err != nil {
+		t.Fatalf("failed to create test sock file at %s: %v", path, err)
+	}
+}
+
+func TestResolveUnixDaemonAddr_DefaultExists(t *testing.T) {
+	tmp := t.TempDir()
+	sock := filepath.Join(tmp, "netbird.sock")
+	createSockFile(t, sock)
+
+	addr := "unix://" + sock
+	got := ResolveUnixDaemonAddr(addr)
+	if got != addr {
+		t.Errorf("expected %s, got %s", addr, got)
+	}
+}
+
+func TestResolveUnixDaemonAddr_SingleDiscovered(t *testing.T) {
+	tmp := t.TempDir()
+
+	// Default socket does not exist
+	defaultAddr := "unix://" + filepath.Join(tmp, "netbird.sock")
+
+	// Create a scan dir with one socket
+	sd := filepath.Join(tmp, "netbird")
+	if err := os.MkdirAll(sd, 0o755); err != nil {
+		t.Fatal(err)
+	}
+	instanceSock := filepath.Join(sd, "main.sock")
+	createSockFile(t, instanceSock)
+
+	origScanDir := scanDir
+	setScanDir(sd)
+	t.Cleanup(func() { setScanDir(origScanDir) })
+
+	got := ResolveUnixDaemonAddr(defaultAddr)
+	expected := "unix://" + instanceSock
+	if got != expected {
+		t.Errorf("expected %s, got %s", expected, got)
+	}
+}
+
+func TestResolveUnixDaemonAddr_MultipleDiscovered(t *testing.T) {
+	tmp := t.TempDir()
+
+	defaultAddr := "unix://" + filepath.Join(tmp, "netbird.sock")
+
+	sd := filepath.Join(tmp, "netbird")
+	if err := os.MkdirAll(sd, 0o755); err != nil {
+		t.Fatal(err)
+	}
+	createSockFile(t, filepath.Join(sd, "main.sock"))
+	createSockFile(t, filepath.Join(sd, "other.sock"))
+
+	origScanDir := scanDir
+	setScanDir(sd)
+	t.Cleanup(func() { setScanDir(origScanDir) })
+
+	got := ResolveUnixDaemonAddr(defaultAddr)
+	if got != defaultAddr {
+		t.Errorf("expected original %s, got %s", defaultAddr, got)
+	}
+}
+
+func TestResolveUnixDaemonAddr_NoSocketsFound(t *testing.T) {
+	tmp := t.TempDir()
+
+	defaultAddr := "unix://" + filepath.Join(tmp, "netbird.sock")
+
+	sd := filepath.Join(tmp, "netbird")
+	if err := os.MkdirAll(sd, 0o755); err != nil {
+		t.Fatal(err)
+	}
+
+	origScanDir := scanDir
+	setScanDir(sd)
+	t.Cleanup(func() { setScanDir(origScanDir) })
+
+	got := ResolveUnixDaemonAddr(defaultAddr)
+	if got != defaultAddr {
+		t.Errorf("expected original %s, got %s", defaultAddr, got)
+	}
+}
+
+func TestResolveUnixDaemonAddr_NonUnixAddr(t *testing.T) {
+	addr := "tcp://127.0.0.1:41731"
+	got := ResolveUnixDaemonAddr(addr)
+	if got != addr {
+		t.Errorf("expected %s, got %s", addr, got)
+	}
+}
+
+func TestResolveUnixDaemonAddr_ScanDirMissing(t *testing.T) {
+	tmp := t.TempDir()
+
+	defaultAddr := "unix://" + filepath.Join(tmp, "netbird.sock")
+
+	origScanDir := scanDir
+	setScanDir(filepath.Join(tmp, "nonexistent"))
+	t.Cleanup(func() { setScanDir(origScanDir) })
+
+	got := ResolveUnixDaemonAddr(defaultAddr)
+	if got != defaultAddr {
+		t.Errorf("expected original %s, got %s", defaultAddr, got)
+	}
+}

client/internal/dns/mgmt/mgmt.go

@@ -376,9 +376,9 @@ func (m *Resolver) extractDomainsFromServerDomains(serverDomains dnsconfig.Serve
 		}
 	}
 
-	if serverDomains.Flow != "" {
-		domains = append(domains, serverDomains.Flow)
-	}
+	// Flow receiver domain is intentionally excluded from caching.
+	// Cloud providers may rotate the IP behind this domain; a stale cached record
+	// causes TLS certificate verification failures on reconnect.
 
 	for _, stun := range serverDomains.Stuns {
 		if stun != "" {

client/internal/dns/mgmt/mgmt_test.go

@@ -391,7 +391,8 @@ func TestResolver_PartialUpdateAddsNewTypePreservesExisting(t *testing.T) {
 	}
 	assert.Len(t, resolver.GetCachedDomains(), 3)
 
-	// Update with partial ServerDomains (only flow domain - new type, should preserve all existing)
+	// Update with partial ServerDomains (only flow domain - flow is intentionally excluded from
+	// caching to prevent TLS failures from stale records, so all existing domains are preserved)
 	partialDomains := dnsconfig.ServerDomains{
 		Flow: "github.com",
 	}
@@ -400,10 +401,10 @@ func TestResolver_PartialUpdateAddsNewTypePreservesExisting(t *testing.T) {
 		t.Skipf("Skipping test due to DNS resolution failure: %v", err)
 	}
 
-	assert.Len(t, removedDomains, 0, "Should not remove any domains when adding new type")
+	assert.Len(t, removedDomains, 0, "Should not remove any domains when only flow domain is provided")
 
 	finalDomains := resolver.GetCachedDomains()
-	assert.Len(t, finalDomains, 4, "Should have all original domains plus new flow domain")
+	assert.Len(t, finalDomains, 3, "Flow domain is not cached; all original domains should be preserved")
 
 	domainStrings := make([]string, len(finalDomains))
 	for i, d := range finalDomains {
@@ -412,5 +413,5 @@ func TestResolver_PartialUpdateAddsNewTypePreservesExisting(t *testing.T) {
 	assert.Contains(t, domainStrings, "example.org")
 	assert.Contains(t, domainStrings, "google.com")
 	assert.Contains(t, domainStrings, "cloudflare.com")
-	assert.Contains(t, domainStrings, "github.com")
+	assert.NotContains(t, domainStrings, "github.com")
 }

client/ssh/client/client.go

@@ -19,6 +19,7 @@ import (
 	"google.golang.org/grpc"
 	"google.golang.org/grpc/credentials/insecure"
 
+	"github.com/netbirdio/netbird/client/internal/daemonaddr"
 	"github.com/netbirdio/netbird/client/internal/profilemanager"
 	"github.com/netbirdio/netbird/client/proto"
 	nbssh "github.com/netbirdio/netbird/client/ssh"
@@ -268,7 +269,7 @@ func getDefaultDaemonAddr() string {
 	if runtime.GOOS == "windows" {
 		return DefaultDaemonAddrWindows
 	}
-	return DefaultDaemonAddr
+	return daemonaddr.ResolveUnixDaemonAddr(DefaultDaemonAddr)
 }
 
 // DialOptions contains options for SSH connections

client/uiwails/.gitignore

@@ -0,0 +1,4 @@
+frontend/node_modules/
+frontend/dist/
+bin/
+.task/

client/uiwails/Taskfile.yml

@@ -0,0 +1,33 @@
+version: '3'
+
+includes:
+  common: ./build/Taskfile.yml
+  linux: ./build/linux/Taskfile.yml
+  darwin: ./build/darwin/Taskfile.yml
+  windows: ./build/windows/Taskfile.yml
+
+vars:
+  APP_NAME: "netbird-ui"
+  BIN_DIR: "bin"
+  VITE_PORT: '{{.WAILS_VITE_PORT | default 9245}}'
+
+tasks:
+  build:
+    summary: Builds the application
+    cmds:
+      - task: "{{OS}}:build"
+
+  package:
+    summary: Packages a production build of the application
+    cmds:
+      - task: "{{OS}}:package"
+
+  run:
+    summary: Runs the application
+    cmds:
+      - task: "{{OS}}:run"
+
+  dev:
+    summary: Runs the application in development mode
+    cmds:
+      - wails3 dev -config ./build/config.yml -port {{.VITE_PORT}}

client/uiwails/build/Taskfile.yml

@@ -0,0 +1,61 @@
+version: '3'
+
+tasks:
+  go:mod:tidy:
+    summary: Runs `go mod tidy`
+    internal: true
+    cmds:
+      - go mod tidy
+
+  install:frontend:deps:
+    summary: Install frontend dependencies
+    dir: frontend
+    sources:
+      - package.json
+      - package-lock.json
+    generates:
+      - node_modules
+    preconditions:
+      - sh: npm version
+        msg: "Looks like npm isn't installed. Npm is part of the Node installer: https://nodejs.org/en/download/"
+    cmds:
+      - npm install
+
+  build:frontend:
+    label: build:frontend (DEV={{.DEV}})
+    summary: Build the frontend project
+    dir: frontend
+    sources:
+      - "**/*"
+      - exclude: node_modules/**/*
+    generates:
+      - dist/**/*
+    deps:
+      - task: install:frontend:deps
+    cmds:
+      - npm run {{.BUILD_COMMAND}} -q
+    env:
+      PRODUCTION: '{{if eq .DEV "true"}}false{{else}}true{{end}}'
+    vars:
+      BUILD_COMMAND: '{{if eq .DEV "true"}}build:dev{{else}}build{{end}}'
+
+  generate:icons:
+    summary: Generates Windows `.ico` and Mac `.icns` from an image
+    dir: build
+    sources:
+      - "appicon.png"
+    generates:
+      - "icons.icns"
+      - "icon.ico"
+    cmds:
+      - echo "Icon generation skipped (no appicon.png)"
+    status:
+      - test ! -f appicon.png
+
+  dev:frontend:
+    summary: Runs the frontend in development mode
+    dir: frontend
+    deps:
+      - task: install:frontend:deps
+    cmds:
+      - npm run dev -- --port {{.VITE_PORT}} --strictPort

client/uiwails/build/build-ui-linux.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+# Build script for NetBird Wails v3 on Linux
+set -e
+
+echo "Installing system dependencies for Wails v3 on Linux..."
+sudo apt-get update
+sudo apt-get install -y \
+  libayatana-appindicator3-dev \
+  gcc \
+  libgtk-3-dev \
+  libwebkit2gtk-4.1-dev \
+  libglib2.0-dev \
+  libsoup-3.0-dev \
+  libx11-dev \
+  npm
+
+echo "Installing wails3 CLI..."
+go install github.com/wailsapp/wails/v3/cmd/wails3@v3.0.0-alpha.72
+
+echo "Building fancyui..."
+cd "$(dirname "$0")/.."
+wails3 build
+
+echo "Build complete."

client/uiwails/build/darwin/Taskfile.yml

@@ -0,0 +1,35 @@
+version: '3'
+
+includes:
+  common: ../Taskfile.yml
+
+tasks:
+  build:
+    summary: Builds the application for macOS
+    cmds:
+      - task: build:native
+        vars:
+          DEV: '{{.DEV}}'
+          OUTPUT: '{{.OUTPUT}}'
+
+  build:native:
+    summary: Builds the application natively on macOS
+    internal: true
+    deps:
+      - task: common:build:frontend
+        vars:
+          DEV:
+            ref: .DEV
+    cmds:
+      - go build {{.BUILD_FLAGS}} -o {{.OUTPUT}}
+    vars:
+      BUILD_FLAGS: '{{if eq .DEV "true"}}-buildvcs=false -gcflags=all="-l"{{else}}-tags production -trimpath -buildvcs=false -ldflags="-w -s"{{end}}'
+      DEFAULT_OUTPUT: '{{.BIN_DIR}}/{{.APP_NAME}}'
+      OUTPUT: '{{ .OUTPUT | default .DEFAULT_OUTPUT }}'
+    env:
+      GOOS: darwin
+      CGO_ENABLED: 1
+
+  run:
+    cmds:
+      - '{{.BIN_DIR}}/{{.APP_NAME}}'

client/uiwails/build/linux/Taskfile.yml

@@ -0,0 +1,35 @@
+version: '3'
+
+includes:
+  common: ../Taskfile.yml
+
+tasks:
+  build:
+    summary: Builds the application for Linux
+    cmds:
+      - task: build:native
+        vars:
+          DEV: '{{.DEV}}'
+          OUTPUT: '{{.OUTPUT}}'
+
+  build:native:
+    summary: Builds the application natively on Linux
+    internal: true
+    deps:
+      - task: common:build:frontend
+        vars:
+          DEV:
+            ref: .DEV
+    cmds:
+      - go build {{.BUILD_FLAGS}} -o {{.OUTPUT}}
+    vars:
+      BUILD_FLAGS: '{{if eq .DEV "true"}}-buildvcs=false -gcflags=all="-l"{{else}}-tags production -trimpath -buildvcs=false -ldflags="-w -s"{{end}}'
+      DEFAULT_OUTPUT: '{{.BIN_DIR}}/{{.APP_NAME}}'
+      OUTPUT: '{{ .OUTPUT | default .DEFAULT_OUTPUT }}'
+    env:
+      GOOS: linux
+      CGO_ENABLED: 1
+
+  run:
+    cmds:
+      - '{{.BIN_DIR}}/{{.APP_NAME}}'

client/uiwails/build/windows/Taskfile.yml

@@ -0,0 +1,41 @@
+version: '3'
+
+includes:
+  common: ../Taskfile.yml
+
+tasks:
+  build:
+    summary: Cross-compiles the application for Windows from Linux using mingw-w64
+    cmds:
+      - task: build:cross
+        vars:
+          DEV: '{{.DEV}}'
+          OUTPUT: '{{.OUTPUT}}'
+
+  build:cross:
+    summary: Cross-compiles for Windows with mingw-w64
+    internal: true
+    deps:
+      - task: common:build:frontend
+        vars:
+          DEV:
+            ref: .DEV
+    preconditions:
+      - sh: command -v {{.CC}}
+        msg: "{{.CC}} not found. Install with: sudo apt-get install gcc-mingw-w64-x86-64"
+    cmds:
+      - go build {{.BUILD_FLAGS}} -o {{.OUTPUT}}
+    vars:
+      BUILD_FLAGS: '{{if eq .DEV "true"}}-buildvcs=false -gcflags=all="-l" -ldflags="-H=windowsgui"{{else}}-tags production -trimpath -buildvcs=false -ldflags="-w -s -H=windowsgui"{{end}}'
+      DEFAULT_OUTPUT: '{{.BIN_DIR}}/{{.APP_NAME}}.exe'
+      OUTPUT: '{{ .OUTPUT | default .DEFAULT_OUTPUT }}'
+      CC: '{{.CC | default "x86_64-w64-mingw32-gcc"}}'
+    env:
+      GOOS: windows
+      GOARCH: amd64
+      CGO_ENABLED: 1
+      CC: '{{.CC}}'
+
+  run:
+    cmds:
+      - '{{.BIN_DIR}}/{{.APP_NAME}}.exe'

client/uiwails/event/event.go

@@ -0,0 +1,217 @@
+//go:build !(linux && 386)
+
+package event
+
+import (
+	"context"
+	"fmt"
+	"slices"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/cenkalti/backoff/v4"
+	log "github.com/sirupsen/logrus"
+	"google.golang.org/grpc"
+	"google.golang.org/grpc/credentials/insecure"
+
+	"github.com/netbirdio/netbird/client/proto"
+	"github.com/netbirdio/netbird/version"
+)
+
+// NotifyFunc is a callback used to send desktop notifications.
+type NotifyFunc func(title, body string)
+
+// Handler is a callback invoked for each received daemon event.
+type Handler func(*proto.SystemEvent)
+
+// Manager subscribes to daemon events and dispatches them.
+type Manager struct {
+	addr   string
+	notify NotifyFunc
+
+	mu       sync.Mutex
+	ctx      context.Context
+	cancel   context.CancelFunc
+	enabled  bool
+	handlers []Handler
+
+	connMu sync.Mutex
+	conn   *grpc.ClientConn
+	client proto.DaemonServiceClient
+}
+
+// NewManager creates a new event Manager.
+func NewManager(addr string, notify NotifyFunc) *Manager {
+	return &Manager{
+		addr:   addr,
+		notify: notify,
+	}
+}
+
+// Start begins event streaming with exponential backoff reconnection.
+func (m *Manager) Start(ctx context.Context) {
+	m.mu.Lock()
+	m.ctx, m.cancel = context.WithCancel(ctx)
+	m.mu.Unlock()
+
+	expBackOff := backoff.WithContext(&backoff.ExponentialBackOff{
+		InitialInterval:     time.Second,
+		RandomizationFactor: backoff.DefaultRandomizationFactor,
+		Multiplier:          backoff.DefaultMultiplier,
+		MaxInterval:         10 * time.Second,
+		MaxElapsedTime:      0,
+		Stop:                backoff.Stop,
+		Clock:               backoff.SystemClock,
+	}, ctx)
+
+	if err := backoff.Retry(m.streamEvents, expBackOff); err != nil {
+		log.Errorf("event stream ended: %v", err)
+	}
+}
+
+func (m *Manager) streamEvents() error {
+	m.mu.Lock()
+	ctx := m.ctx
+	m.mu.Unlock()
+
+	client, err := m.getClient()
+	if err != nil {
+		return fmt.Errorf("create client: %w", err)
+	}
+
+	stream, err := client.SubscribeEvents(ctx, &proto.SubscribeRequest{})
+	if err != nil {
+		return fmt.Errorf("subscribe events: %w", err)
+	}
+
+	log.Info("subscribed to daemon events")
+	defer log.Info("unsubscribed from daemon events")
+
+	for {
+		event, err := stream.Recv()
+		if err != nil {
+			return fmt.Errorf("receive event: %w", err)
+		}
+		m.handleEvent(event)
+	}
+}
+
+// Stop cancels the event stream and closes the connection.
+func (m *Manager) Stop() {
+	m.mu.Lock()
+	if m.cancel != nil {
+		m.cancel()
+	}
+	m.mu.Unlock()
+
+	m.connMu.Lock()
+	if m.conn != nil {
+		m.conn.Close()
+		m.conn = nil
+		m.client = nil
+	}
+	m.connMu.Unlock()
+}
+
+// SetNotificationsEnabled enables or disables desktop notifications.
+func (m *Manager) SetNotificationsEnabled(enabled bool) {
+	m.mu.Lock()
+	defer m.mu.Unlock()
+	m.enabled = enabled
+}
+
+// AddHandler registers an event handler.
+func (m *Manager) AddHandler(h Handler) {
+	m.mu.Lock()
+	defer m.mu.Unlock()
+	m.handlers = append(m.handlers, h)
+}
+
+func (m *Manager) handleEvent(event *proto.SystemEvent) {
+	m.mu.Lock()
+	enabled := m.enabled
+	handlers := slices.Clone(m.handlers)
+	m.mu.Unlock()
+
+	// Critical events are always shown.
+	if !enabled && event.Severity != proto.SystemEvent_CRITICAL {
+		goto dispatch
+	}
+
+	if event.UserMessage != "" && m.notify != nil {
+		title := getEventTitle(event)
+		body := event.UserMessage
+		if id := event.Metadata["id"]; id != "" {
+			body += fmt.Sprintf(" ID: %s", id)
+		}
+		m.notify(title, body)
+	}
+
+dispatch:
+	for _, h := range handlers {
+		go h(event)
+	}
+}
+
+func getEventTitle(event *proto.SystemEvent) string {
+	var prefix string
+	switch event.Severity {
+	case proto.SystemEvent_CRITICAL:
+		prefix = "Critical"
+	case proto.SystemEvent_ERROR:
+		prefix = "Error"
+	case proto.SystemEvent_WARNING:
+		prefix = "Warning"
+	default:
+		prefix = "Info"
+	}
+
+	var category string
+	switch event.Category {
+	case proto.SystemEvent_DNS:
+		category = "DNS"
+	case proto.SystemEvent_NETWORK:
+		category = "Network"
+	case proto.SystemEvent_AUTHENTICATION:
+		category = "Authentication"
+	case proto.SystemEvent_CONNECTIVITY:
+		category = "Connectivity"
+	default:
+		category = "System"
+	}
+
+	return fmt.Sprintf("%s: %s", prefix, category)
+}
+
+// getClient returns a cached gRPC client, creating the connection on first use.
+func (m *Manager) getClient() (proto.DaemonServiceClient, error) {
+	m.connMu.Lock()
+	defer m.connMu.Unlock()
+
+	if m.client != nil {
+		return m.client, nil
+	}
+
+	target := m.addr
+	if strings.HasPrefix(target, "tcp://") {
+		target = strings.TrimPrefix(target, "tcp://")
+	} else if strings.HasPrefix(target, "unix://") {
+		target = "unix:" + strings.TrimPrefix(target, "unix://")
+	}
+
+	conn, err := grpc.NewClient(
+		target,
+		grpc.WithTransportCredentials(insecure.NewCredentials()),
+		grpc.WithUserAgent("netbird-fancyui/"+version.NetbirdVersion()),
+	)
+	if err != nil {
+		return nil, err
+	}
+
+	m.conn = conn
+	m.client = proto.NewDaemonServiceClient(conn)
+	log.Debugf("event manager: gRPC connection established to %s", m.addr)
+
+	return m.client, nil
+}

client/uiwails/frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>NetBird</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/uiwails/frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "netbird-fancyui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@wailsio/runtime": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.6",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.0.6",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.5"
+  }
+}

client/uiwails/frontend/src/App.tsx

@@ -0,0 +1,59 @@
+import { HashRouter, Routes, Route, useNavigate } from 'react-router-dom'
+import { useEffect } from 'react'
+import { Events } from '@wailsio/runtime'
+import Status from './pages/Status'
+import Settings from './pages/Settings'
+import Networks from './pages/Networks'
+import Profiles from './pages/Profiles'
+import Peers from './pages/Peers'
+import Debug from './pages/Debug'
+import Update from './pages/Update'
+import NavBar from './components/NavBar'
+
+/**
+ * Navigator listens for the "navigate" event emitted by the Go backend
+ * and programmatically navigates the React router.
+ */
+function Navigator() {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const unsub = Events.On('navigate', (event: { data: string[] }) => {
+      const path = event.data[0]
+      if (path) navigate(path)
+    })
+    return () => {
+      if (typeof unsub === 'function') unsub()
+    }
+  }, [navigate])
+
+  return null
+}
+
+export default function App() {
+  return (
+    <HashRouter>
+      <Navigator />
+      <div
+        className="min-h-screen flex"
+        style={{
+          backgroundColor: 'var(--color-bg-primary)',
+          color: 'var(--color-text-primary)',
+        }}
+      >
+        <NavBar />
+        <main className="flex-1 px-10 py-8 overflow-y-auto h-screen">
+          <Routes>
+            <Route path="/" element={<Status />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="/peers" element={<Peers />} />
+            <Route path="/networks" element={<Networks />} />
+            <Route path="/profiles" element={<Profiles />} />
+            <Route path="/debug" element={<Debug />} />
+            <Route path="/update" element={<Update />} />
+          </Routes>
+        </main>
+      </div>
+    </HashRouter>
+  )
+}

client/uiwails/frontend/src/bindings.ts

@@ -0,0 +1,126 @@
+/**
+ * Type definitions for the auto-generated Wails v3 service bindings.
+ * Run `wails3 generate bindings` to regenerate the actual TypeScript bindings
+ * from the Go service methods. These types mirror the Go structs.
+ *
+ * The actual binding files will be generated into frontend/bindings/ by the
+ * Wails CLI. This file serves as a centralized re-export and type reference.
+ */
+
+// ---- Connection service ----
+
+export interface StatusInfo {
+  status: string
+  ip: string
+  publicKey: string
+  fqdn: string
+  connectedPeers: number
+}
+
+// ---- Settings service ----
+
+export interface ConfigInfo {
+  managementUrl: string
+  adminUrl: string
+  preSharedKey: string
+  interfaceName: string
+  wireguardPort: number
+  disableAutoConnect: boolean
+  serverSshAllowed: boolean
+  rosenpassEnabled: boolean
+  rosenpassPermissive: boolean
+  lazyConnectionEnabled: boolean
+  blockInbound: boolean
+  disableNotifications: boolean
+}
+
+// ---- Network service ----
+
+export interface NetworkInfo {
+  id: string
+  range: string
+  domains: string[]
+  selected: boolean
+  resolvedIPs: Record<string, string[]>
+}
+
+// ---- Profile service ----
+
+export interface ProfileInfo {
+  name: string
+  isActive: boolean
+}
+
+export interface ActiveProfileInfo {
+  profileName: string
+  username: string
+  email: string
+}
+
+// ---- Debug service ----
+
+export interface DebugBundleParams {
+  anonymize: boolean
+  systemInfo: boolean
+  upload: boolean
+  uploadUrl: string
+  runDurationMins: number
+  enablePersistence: boolean
+}
+
+export interface DebugBundleResult {
+  localPath: string
+  uploadedKey: string
+  uploadFailureReason: string
+}
+
+// ---- Peers service ----
+
+export interface PeerInfo {
+  ip: string
+  pubKey: string
+  fqdn: string
+  connStatus: string
+  connStatusUpdate: string
+  relayed: boolean
+  relayAddress: string
+  latencyMs: number
+  bytesRx: number
+  bytesTx: number
+  rosenpassEnabled: boolean
+  networks: string[]
+  lastHandshake: string
+  localIceType: string
+  remoteIceType: string
+  localEndpoint: string
+  remoteEndpoint: string
+}
+
+// ---- Update service ----
+
+export interface InstallerResult {
+  success: boolean
+  errorMsg: string
+}
+
+/**
+ * Wails v3 service call helper.
+ * After running `wails3 generate bindings`, use the generated functions directly.
+ * This helper wraps window.__wails.call for manual use during development.
+ */
+export async function call<T>(service: string, method: string, ...args: unknown[]): Promise<T> {
+  // This will be replaced by generated bindings after `wails3 generate bindings`
+  // For now, call via the Wails runtime bridge
+  const w = window as typeof window & {
+    go?: {
+      [svc: string]: {
+        [method: string]: (...args: unknown[]) => Promise<T>
+      }
+    }
+  }
+  const svc = w.go?.[service]
+  if (!svc) throw new Error(`Service ${service} not found. Run wails3 generate bindings.`)
+  const fn = svc[method]
+  if (!fn) throw new Error(`Method ${service}.${method} not found.`)
+  return fn(...args)
+}

client/uiwails/frontend/src/components/NavBar.tsx

@@ -0,0 +1,162 @@
+import { NavLink } from 'react-router-dom'
+import NetBirdLogo from './NetBirdLogo'
+
+const mainItems = [
+  { to: '/', label: 'Status', icon: StatusIcon },
+  { to: '/peers', label: 'Peers', icon: PeersIcon },
+  { to: '/networks', label: 'Networks', icon: NetworksIcon },
+  { to: '/profiles', label: 'Profiles', icon: ProfilesIcon },
+]
+
+const systemItems = [
+  { to: '/settings', label: 'Settings', icon: SettingsIcon },
+  { to: '/debug', label: 'Debug', icon: DebugIcon },
+  { to: '/update', label: 'Update', icon: UpdateIcon },
+]
+
+function NavGroup({ items }: { items: typeof mainItems }) {
+  return (
+    <div className="space-y-0.5">
+      {items.map((item) => (
+        <NavLink
+          key={item.to}
+          to={item.to}
+          end={item.to === '/'}
+          className="block"
+        >
+          {({ isActive }) => (
+            <div
+              className="flex items-center gap-2.5 px-2.5 py-[5px] rounded-[var(--radius-sidebar-item)] text-[13px] transition-colors"
+              style={{
+                backgroundColor: isActive ? 'var(--color-sidebar-selected)' : 'transparent',
+                fontWeight: isActive ? 500 : 400,
+                color: isActive ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
+              }}
+              onMouseEnter={e => {
+                if (!isActive) e.currentTarget.style.backgroundColor = 'var(--color-sidebar-hover)'
+              }}
+              onMouseLeave={e => {
+                if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'
+              }}
+            >
+              <item.icon active={isActive} />
+              <span>{item.label}</span>
+            </div>
+          )}
+        </NavLink>
+      ))}
+    </div>
+  )
+}
+
+export default function NavBar() {
+  return (
+    <nav
+      className="w-[216px] min-w-[216px] flex flex-col h-screen"
+      style={{
+        backgroundColor: 'var(--color-bg-sidebar)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        borderRight: '0.5px solid var(--color-separator)',
+      }}
+    >
+      {/* Logo */}
+      <div className="px-4 py-4" style={{ borderBottom: '0.5px solid var(--color-separator)' }}>
+        <NetBirdLogo full />
+      </div>
+
+      {/* Nav items */}
+      <div className="flex-1 px-2.5 py-3 overflow-y-auto">
+        <NavGroup items={mainItems} />
+        <div className="my-2 mx-2.5" style={{ borderTop: '0.5px solid var(--color-separator)' }} />
+        <NavGroup items={systemItems} />
+      </div>
+
+      {/* Version footer */}
+      <div className="px-4 py-2.5 text-[11px]" style={{ color: 'var(--color-text-quaternary)', borderTop: '0.5px solid var(--color-separator)' }}>
+        NetBird Client
+      </div>
+    </nav>
+  )
+}
+
+/* ── Icons (18px, stroke) ──────────────────────────────────────── */
+
+function StatusIcon({ active }: { active: boolean }) {
+  return (
+    <svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+    </svg>
+  )
+}
+
+function PeersIcon({ active }: { active: boolean }) {
+  return (
+    <svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="2" y="3" width="20" height="14" rx="2" />
+      <line x1="8" y1="21" x2="16" y2="21" />
+      <line x1="12" y1="17" x2="12" y2="21" />
+    </svg>
+  )
+}
+
+function NetworksIcon({ active }: { active: boolean }) {
+  return (
+    <svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="5" r="2" />
+      <circle cx="5" cy="19" r="2" />
+      <circle cx="19" cy="19" r="2" />
+      <line x1="12" y1="7" x2="5" y2="17" />
+      <line x1="12" y1="7" x2="19" y2="17" />
+    </svg>
+  )
+}
+
+function ProfilesIcon({ active }: { active: boolean }) {
+  return (
+    <svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </svg>
+  )
+}
+
+function SettingsIcon({ active }: { active: boolean }) {
+  return (
+    <svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  )
+}
+
+function DebugIcon({ active }: { active: boolean }) {
+  return (
+    <svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="m8 2 1.88 1.88" />
+      <path d="M14.12 3.88 16 2" />
+      <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+      <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" />
+      <path d="M12 20v-9" />
+      <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
+      <path d="M6 13H2" />
+      <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+      <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
+      <path d="M22 13h-4" />
+      <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4" />
+    </svg>
+  )
+}
+
+function UpdateIcon({ active }: { active: boolean }) {
+  return (
+    <svg className="w-[18px] h-[18px] shrink-0" style={{ color: active ? 'var(--color-accent)' : 'var(--color-text-secondary)' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+      <path d="M3 3v5h5" />
+      <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+      <path d="M16 16h5v5" />
+    </svg>
+  )
+}

client/uiwails/frontend/src/components/NetBirdLogo.tsx

@@ -0,0 +1,20 @@
+function BirdMark({ className }: { className?: string }) {
+  return (
+    <svg className={className} width="31" height="23" viewBox="0 0 31 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M21.4631 0.523438C17.8173 0.857913 16.0028 2.95675 15.3171 4.01871L4.66406 22.4734H17.5163L30.1929 0.523438H21.4631Z" fill="#F68330"/>
+      <path d="M17.5265 22.4737L0 3.88525C0 3.88525 19.8177 -1.44128 21.7493 15.1738L17.5265 22.4737Z" fill="#F68330"/>
+      <path d="M14.9236 4.70563L9.54688 14.0208L17.5158 22.4747L21.7385 15.158C21.0696 9.44682 18.2851 6.32784 14.9236 4.69727" fill="#F05252"/>
+    </svg>
+  )
+}
+
+export default function NetBirdLogo({ full = false, className }: { full?: boolean; className?: string }) {
+  if (!full) return <BirdMark className={className} />
+
+  return (
+    <div className={`flex items-center gap-2 ${className ?? ''}`}>
+      <BirdMark />
+      <span className="text-lg font-bold tracking-wide" style={{ color: 'var(--color-text-primary)' }}>NETBIRD</span>
+    </div>
+  )
+}

client/uiwails/frontend/src/components/ui/Button.tsx

@@ -0,0 +1,35 @@
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'destructive'
+  size?: 'sm' | 'md'
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  primary: {
+    backgroundColor: 'var(--color-accent)',
+    color: '#ffffff',
+  },
+  secondary: {
+    backgroundColor: 'var(--color-control-bg)',
+    color: 'var(--color-text-primary)',
+  },
+  destructive: {
+    backgroundColor: 'var(--color-status-red-bg)',
+    color: 'var(--color-status-red)',
+  },
+}
+
+export default function Button({ variant = 'primary', size = 'md', className, style, children, ...props }: ButtonProps) {
+  const variantStyle = styles[variant]
+  const pad = size === 'sm' ? '4px 12px' : '6px 20px'
+  const fontSize = size === 'sm' ? 12 : 13
+
+  return (
+    <button
+      className={`inline-flex items-center justify-center gap-1.5 font-medium rounded-[8px] transition-opacity hover:opacity-85 active:opacity-75 disabled:opacity-50 disabled:cursor-not-allowed ${className ?? ''}`}
+      style={{ padding: pad, fontSize, ...variantStyle, ...style }}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

client/uiwails/frontend/src/components/ui/Card.tsx

@@ -0,0 +1,26 @@
+interface CardProps {
+  label?: string
+  children: React.ReactNode
+  className?: string
+}
+
+export default function Card({ label, children, className }: CardProps) {
+  return (
+    <div className={className}>
+      {label && (
+        <h3 className="text-[11px] font-semibold uppercase tracking-wide px-4 mb-1.5" style={{ color: 'var(--color-text-tertiary)' }}>
+          {label}
+        </h3>
+      )}
+      <div
+        className="rounded-[var(--radius-card)] overflow-hidden"
+        style={{
+          backgroundColor: 'var(--color-bg-secondary)',
+          boxShadow: 'var(--shadow-card)',
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

client/uiwails/frontend/src/components/ui/CardRow.tsx

@@ -0,0 +1,31 @@
+interface CardRowProps {
+  label?: string
+  description?: string
+  children?: React.ReactNode
+  className?: string
+  onClick?: () => void
+}
+
+export default function CardRow({ label, description, children, className, onClick }: CardRowProps) {
+  return (
+    <div
+      className={`flex items-center justify-between gap-4 px-4 py-3 min-h-[44px] ${onClick ? 'cursor-pointer' : ''} ${className ?? ''}`}
+      style={{ borderBottom: '0.5px solid var(--color-separator)' }}
+      onClick={onClick}
+    >
+      <div className="flex flex-col min-w-0 flex-1">
+        {label && (
+          <span className="text-[13px]" style={{ color: 'var(--color-text-primary)' }}>
+            {label}
+          </span>
+        )}
+        {description && (
+          <span className="text-[11px] mt-0.5" style={{ color: 'var(--color-text-tertiary)' }}>
+            {description}
+          </span>
+        )}
+      </div>
+      {children && <div className="shrink-0 flex items-center">{children}</div>}
+    </div>
+  )
+}

client/uiwails/frontend/src/components/ui/Input.tsx

@@ -0,0 +1,40 @@
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+}
+
+export default function Input({ label, className, style, ...props }: InputProps) {
+  const input = (
+    <input
+      className={`w-full rounded-[var(--radius-control)] text-[13px] outline-none transition-shadow ${className ?? ''}`}
+      style={{
+        height: 28,
+        padding: '0 8px',
+        backgroundColor: 'var(--color-input-bg)',
+        border: '0.5px solid var(--color-input-border)',
+        color: 'var(--color-text-primary)',
+        boxShadow: 'none',
+        ...style,
+      }}
+      onFocus={e => {
+        e.currentTarget.style.boxShadow = '0 0 0 3px rgba(246,131,48,0.3)'
+        e.currentTarget.style.borderColor = 'var(--color-accent)'
+      }}
+      onBlur={e => {
+        e.currentTarget.style.boxShadow = 'none'
+        e.currentTarget.style.borderColor = 'var(--color-input-border)'
+      }}
+      {...props}
+    />
+  )
+
+  if (!label) return input
+
+  return (
+    <div>
+      <label className="block text-[11px] font-medium mb-1" style={{ color: 'var(--color-text-secondary)' }}>
+        {label}
+      </label>
+      {input}
+    </div>
+  )
+}

client/uiwails/frontend/src/components/ui/Modal.tsx

@@ -0,0 +1,46 @@
+import Button from './Button'
+
+interface ModalProps {
+  title: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  destructive?: boolean
+  loading?: boolean
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export default function Modal({ title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', destructive, loading, onConfirm, onCancel }: ModalProps) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center" style={{ backgroundColor: 'rgba(0,0,0,0.4)' }}>
+      <div
+        className="max-w-sm w-full mx-4 p-5 rounded-[12px]"
+        style={{
+          backgroundColor: 'var(--color-bg-elevated)',
+          boxShadow: 'var(--shadow-elevated)',
+        }}
+      >
+        <h2 className="text-[15px] font-semibold mb-1" style={{ color: 'var(--color-text-primary)' }}>
+          {title}
+        </h2>
+        <p className="text-[13px] mb-5" style={{ color: 'var(--color-text-secondary)' }}>
+          {message}
+        </p>
+        <div className="flex gap-2 justify-end">
+          <Button variant="secondary" size="sm" onClick={onCancel}>
+            {cancelLabel}
+          </Button>
+          <Button
+            variant={destructive ? 'destructive' : 'primary'}
+            size="sm"
+            onClick={onConfirm}
+            disabled={loading}
+          >
+            {confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

client/uiwails/frontend/src/components/ui/SearchInput.tsx

@@ -0,0 +1,47 @@
+interface SearchInputProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  className?: string
+}
+
+export default function SearchInput({ value, onChange, placeholder = 'Search...', className }: SearchInputProps) {
+  return (
+    <div className={`relative ${className ?? ''}`}>
+      <svg
+        className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5"
+        style={{ color: 'var(--color-text-tertiary)' }}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <circle cx={11} cy={11} r={8} />
+        <path d="m21 21-4.3-4.3" />
+      </svg>
+      <input
+        className="w-full text-[13px] outline-none transition-shadow"
+        style={{
+          height: 28,
+          paddingLeft: 28,
+          paddingRight: 8,
+          backgroundColor: 'var(--color-control-bg)',
+          border: '0.5px solid transparent',
+          borderRadius: 999,
+          color: 'var(--color-text-primary)',
+        }}
+        placeholder={placeholder}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        onFocus={e => {
+          e.currentTarget.style.boxShadow = '0 0 0 3px rgba(246,131,48,0.3)'
+          e.currentTarget.style.borderColor = 'var(--color-accent)'
+        }}
+        onBlur={e => {
+          e.currentTarget.style.boxShadow = 'none'
+          e.currentTarget.style.borderColor = 'transparent'
+        }}
+      />
+    </div>
+  )
+}

client/uiwails/frontend/src/components/ui/SegmentedControl.tsx

@@ -0,0 +1,34 @@
+interface SegmentedControlProps<T extends string> {
+  options: { value: T; label: string }[]
+  value: T
+  onChange: (value: T) => void
+  className?: string
+}
+
+export default function SegmentedControl<T extends string>({ options, value, onChange, className }: SegmentedControlProps<T>) {
+  return (
+    <div
+      className={`inline-flex rounded-[8px] p-[3px] ${className ?? ''}`}
+      style={{ backgroundColor: 'var(--color-control-bg)' }}
+    >
+      {options.map(opt => {
+        const active = opt.value === value
+        return (
+          <button
+            key={opt.value}
+            onClick={() => onChange(opt.value)}
+            className="relative px-3 py-1 text-[12px] font-medium rounded-[6px] transition-all duration-200"
+            style={{
+              backgroundColor: active ? 'var(--color-bg-elevated)' : 'transparent',
+              color: active ? 'var(--color-text-primary)' : 'var(--color-text-secondary)',
+              boxShadow: active ? 'var(--shadow-segment)' : 'none',
+              minWidth: 64,
+            }}
+          >
+            {opt.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

client/uiwails/frontend/src/components/ui/StatusBadge.tsx

@@ -0,0 +1,34 @@
+interface StatusBadgeProps {
+  status: 'connected' | 'disconnected' | 'connecting' | string
+  label?: string
+}
+
+function getStatusColors(status: string): { dot: string; text: string; bg: string } {
+  switch (status.toLowerCase()) {
+    case 'connected':
+      return { dot: 'var(--color-status-green)', text: 'var(--color-status-green)', bg: 'var(--color-status-green-bg)' }
+    case 'connecting':
+      return { dot: 'var(--color-status-yellow)', text: 'var(--color-status-yellow)', bg: 'var(--color-status-yellow-bg)' }
+    case 'disconnected':
+      return { dot: 'var(--color-status-gray)', text: 'var(--color-text-secondary)', bg: 'var(--color-status-gray-bg)' }
+    default:
+      return { dot: 'var(--color-status-red)', text: 'var(--color-status-red)', bg: 'var(--color-status-red-bg)' }
+  }
+}
+
+export default function StatusBadge({ status, label }: StatusBadgeProps) {
+  const colors = getStatusColors(status)
+
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium"
+      style={{ backgroundColor: colors.bg, color: colors.text }}
+    >
+      <span
+        className={`w-1.5 h-1.5 rounded-full ${status.toLowerCase() === 'connecting' ? 'animate-pulse' : ''}`}
+        style={{ backgroundColor: colors.dot }}
+      />
+      {label ?? status}
+    </span>
+  )
+}

client/uiwails/frontend/src/components/ui/Table.tsx

@@ -0,0 +1,72 @@
+/* Table primitives for macOS System Settings style tables */
+
+export function TableContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="rounded-[var(--radius-card)] overflow-hidden"
+      style={{
+        backgroundColor: 'var(--color-bg-secondary)',
+        boxShadow: 'var(--shadow-card)',
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function TableHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <thead>
+      <tr style={{ borderBottom: '0.5px solid var(--color-separator)' }}>
+        {children}
+      </tr>
+    </thead>
+  )
+}
+
+export function TableHeaderCell({ children, onClick, className }: { children: React.ReactNode; onClick?: () => void; className?: string }) {
+  return (
+    <th
+      className={`px-4 py-2.5 text-left text-[11px] font-semibold uppercase tracking-wide ${onClick ? 'cursor-pointer select-none' : ''} ${className ?? ''}`}
+      style={{ color: 'var(--color-text-tertiary)' }}
+      onClick={onClick}
+    >
+      {children}
+    </th>
+  )
+}
+
+export function TableRow({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <tr
+      className={`transition-colors group/row ${className ?? ''}`}
+      style={{ borderBottom: '0.5px solid var(--color-separator)' }}
+      onMouseEnter={e => (e.currentTarget.style.backgroundColor = 'var(--color-sidebar-hover)')}
+      onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+    >
+      {children}
+    </tr>
+  )
+}
+
+export function TableCell({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <td className={`px-4 py-3 align-middle ${className ?? ''}`}>
+      {children}
+    </td>
+  )
+}
+
+export function TableFooter({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="px-4 py-2 text-[11px]"
+      style={{
+        borderTop: '0.5px solid var(--color-separator)',
+        color: 'var(--color-text-tertiary)',
+      }}
+    >
+      {children}
+    </div>
+  )
+}

client/uiwails/frontend/src/components/ui/Toggle.tsx

@@ -0,0 +1,39 @@
+interface ToggleProps {
+  checked: boolean
+  onChange: (value: boolean) => void
+  small?: boolean
+  disabled?: boolean
+}
+
+export default function Toggle({ checked, onChange, small, disabled }: ToggleProps) {
+  const w = small ? 30 : 38
+  const h = small ? 18 : 22
+  const thumb = small ? 14 : 18
+  const travel = w - thumb - 4
+
+  return (
+    <button
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className="relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50"
+      style={{
+        width: w,
+        height: h,
+        backgroundColor: checked ? 'var(--color-accent)' : 'var(--color-control-bg)',
+        padding: 2,
+      }}
+    >
+      <span
+        className="block rounded-full bg-white transition-transform duration-200"
+        style={{
+          width: thumb,
+          height: thumb,
+          transform: `translateX(${checked ? travel : 0}px)`,
+          boxShadow: '0 1px 3px rgba(0,0,0,0.15), 0 0.5px 1px rgba(0,0,0,0.1)',
+        }}
+      />
+    </button>
+  )
+}

client/uiwails/frontend/src/index.css

@@ -0,0 +1,186 @@
+@import "tailwindcss";
+
+/* ── Light-mode tokens (default) ────────────────────────────────── */
+:root {
+  --color-bg-primary:       #ffffff;
+  --color-bg-secondary:     #f5f5f7;
+  --color-bg-tertiary:      #e8e8ed;
+  --color-bg-elevated:      #ffffff;
+  --color-bg-sidebar:       rgba(245, 245, 247, 0.8);
+  --color-sidebar-selected: rgba(0, 0, 0, 0.06);
+  --color-sidebar-hover:    rgba(0, 0, 0, 0.04);
+
+  --color-text-primary:     #1d1d1f;
+  --color-text-secondary:   #6e6e73;
+  --color-text-tertiary:    #86868b;
+  --color-text-quaternary:  #aeaeb2;
+
+  --color-separator:        rgba(0, 0, 0, 0.09);
+  --color-separator-heavy:  rgba(0, 0, 0, 0.16);
+
+  --color-accent:           #f68330;
+  --color-accent-hover:     #e55311;
+
+  --color-status-green:     #34c759;
+  --color-status-green-bg:  rgba(52, 199, 89, 0.12);
+  --color-status-yellow:    #ff9f0a;
+  --color-status-yellow-bg: rgba(255, 159, 10, 0.12);
+  --color-status-red:       #ff3b30;
+  --color-status-red-bg:    rgba(255, 59, 48, 0.12);
+  --color-status-gray:      #8e8e93;
+  --color-status-gray-bg:   rgba(142, 142, 147, 0.12);
+
+  --color-input-bg:         #ffffff;
+  --color-input-border:     rgba(0, 0, 0, 0.12);
+  --color-input-focus:      var(--color-accent);
+
+  --color-control-bg:       rgba(116, 116, 128, 0.08);
+
+  --shadow-card:            0 0.5px 1px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08);
+  --shadow-elevated:        0 2px 8px rgba(0,0,0,0.12), 0 0.5px 1px rgba(0,0,0,0.08);
+  --shadow-segment:         0 1px 3px rgba(0,0,0,0.12), 0 0.5px 1px rgba(0,0,0,0.06);
+
+  --radius-card:            10px;
+  --radius-control:         6px;
+  --radius-sidebar-item:    7px;
+
+  --spacing-xs:             4px;
+  --spacing-sm:             8px;
+  --spacing-md:             16px;
+  --spacing-lg:             24px;
+  --spacing-xl:             32px;
+
+  color-scheme: light dark;
+}
+
+/* ── Dark-mode tokens ───────────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg-primary:       #1c1c1e;
+    --color-bg-secondary:     #2c2c2e;
+    --color-bg-tertiary:      #3a3a3c;
+    --color-bg-elevated:      #2c2c2e;
+    --color-bg-sidebar:       rgba(44, 44, 46, 0.8);
+    --color-sidebar-selected: rgba(255, 255, 255, 0.08);
+    --color-sidebar-hover:    rgba(255, 255, 255, 0.05);
+
+    --color-text-primary:     #f5f5f7;
+    --color-text-secondary:   #98989d;
+    --color-text-tertiary:    #6e6e73;
+    --color-text-quaternary:  #48484a;
+
+    --color-separator:        rgba(255, 255, 255, 0.08);
+    --color-separator-heavy:  rgba(255, 255, 255, 0.15);
+
+    --color-status-green:     #30d158;
+    --color-status-green-bg:  rgba(48, 209, 88, 0.15);
+    --color-status-yellow:    #ffd60a;
+    --color-status-yellow-bg: rgba(255, 214, 10, 0.15);
+    --color-status-red:       #ff453a;
+    --color-status-red-bg:    rgba(255, 69, 58, 0.15);
+    --color-status-gray:      #636366;
+    --color-status-gray-bg:   rgba(99, 99, 102, 0.15);
+
+    --color-input-bg:         rgba(255, 255, 255, 0.05);
+    --color-input-border:     rgba(255, 255, 255, 0.1);
+
+    --color-control-bg:       rgba(118, 118, 128, 0.24);
+
+    --shadow-card:            0 0.5px 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);
+    --shadow-elevated:        0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
+    --shadow-segment:         0 1px 3px rgba(0,0,0,0.3), 0 0.5px 1px rgba(0,0,0,0.2);
+  }
+}
+
+/* Manual toggle for WebKitGTK fallback */
+[data-theme="dark"] {
+  --color-bg-primary:       #1c1c1e;
+  --color-bg-secondary:     #2c2c2e;
+  --color-bg-tertiary:      #3a3a3c;
+  --color-bg-elevated:      #2c2c2e;
+  --color-bg-sidebar:       rgba(44, 44, 46, 0.8);
+  --color-sidebar-selected: rgba(255, 255, 255, 0.08);
+  --color-sidebar-hover:    rgba(255, 255, 255, 0.05);
+
+  --color-text-primary:     #f5f5f7;
+  --color-text-secondary:   #98989d;
+  --color-text-tertiary:    #6e6e73;
+  --color-text-quaternary:  #48484a;
+
+  --color-separator:        rgba(255, 255, 255, 0.08);
+  --color-separator-heavy:  rgba(255, 255, 255, 0.15);
+
+  --color-status-green:     #30d158;
+  --color-status-green-bg:  rgba(48, 209, 88, 0.15);
+  --color-status-yellow:    #ffd60a;
+  --color-status-yellow-bg: rgba(255, 214, 10, 0.15);
+  --color-status-red:       #ff453a;
+  --color-status-red-bg:    rgba(255, 69, 58, 0.15);
+  --color-status-gray:      #636366;
+  --color-status-gray-bg:   rgba(99, 99, 102, 0.15);
+
+  --color-input-bg:         rgba(255, 255, 255, 0.05);
+  --color-input-border:     rgba(255, 255, 255, 0.1);
+
+  --color-control-bg:       rgba(118, 118, 128, 0.24);
+
+  --shadow-card:            0 0.5px 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);
+  --shadow-elevated:        0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
+  --shadow-segment:         0 1px 3px rgba(0,0,0,0.3), 0 0.5px 1px rgba(0,0,0,0.2);
+}
+
+@theme {
+  --color-netbird-50:  #fff6ed;
+  --color-netbird-100: #feecd6;
+  --color-netbird-150: #ffdfb8;
+  --color-netbird-200: #ffd4a6;
+  --color-netbird-300: #fab677;
+  --color-netbird-400: #f68330;
+  --color-netbird-DEFAULT: #f68330;
+  --color-netbird-500: #f46d1b;
+  --color-netbird-600: #e55311;
+  --color-netbird-700: #be3e10;
+  --color-netbird-800: #973215;
+  --color-netbird-900: #7a2b14;
+  --color-netbird-950: #421308;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+}
+
+/* ── Base ────────────────────────────────────────────────────────── */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+/* ── Scrollbar (macOS-like thin) ────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-text-quaternary);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-tertiary);
+  background-clip: content-box;
+}

client/uiwails/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

client/uiwails/frontend/src/pages/Debug.tsx

@@ -0,0 +1,182 @@
+import { useState } from 'react'
+import { Call } from '@wailsio/runtime'
+import type { DebugBundleParams, DebugBundleResult } from '../bindings'
+import Card from '../components/ui/Card'
+import CardRow from '../components/ui/CardRow'
+import Toggle from '../components/ui/Toggle'
+import Input from '../components/ui/Input'
+import Button from '../components/ui/Button'
+
+const DEFAULT_UPLOAD_URL = 'https://upload.netbird.io'
+
+export default function Debug() {
+  const [anonymize, setAnonymize] = useState(false)
+  const [systemInfo, setSystemInfo] = useState(true)
+  const [upload, setUpload] = useState(true)
+  const [uploadUrl, setUploadUrl] = useState(DEFAULT_UPLOAD_URL)
+  const [runForDuration, setRunForDuration] = useState(true)
+  const [durationMins, setDurationMins] = useState(1)
+
+  const [running, setRunning] = useState(false)
+  const [progress, setProgress] = useState('')
+  const [result, setResult] = useState<DebugBundleResult | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleCreate() {
+    if (upload && !uploadUrl) {
+      setError('Upload URL is required when upload is enabled')
+      return
+    }
+
+    setRunning(true)
+    setError(null)
+    setResult(null)
+    setProgress(runForDuration ? `Running with trace logs for ${durationMins} minute(s)\u2026` : 'Creating debug bundle\u2026')
+
+    const params: DebugBundleParams = {
+      anonymize,
+      systemInfo,
+      upload,
+      uploadUrl: upload ? uploadUrl : '',
+      runDurationMins: runForDuration ? durationMins : 0,
+      enablePersistence: true,
+    }
+
+    try {
+      console.log('[Debug] calling services.DebugService.CreateDebugBundle')
+      const res = await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.DebugService.CreateDebugBundle', params) as DebugBundleResult
+      console.log('[Debug] CreateDebugBundle result:', JSON.stringify(res))
+      if (res) {
+        setResult(res)
+        setProgress('Bundle created successfully')
+      }
+    } catch (e) {
+      console.error('[Debug] CreateDebugBundle error:', e)
+      setError(String(e))
+      setProgress('')
+    } finally {
+      setRunning(false)
+    }
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1 className="text-xl font-semibold mb-1" style={{ color: 'var(--color-text-primary)' }}>Debug</h1>
+      <p className="text-[13px] mb-6" style={{ color: 'var(--color-text-secondary)' }}>
+        Create a debug bundle to help troubleshoot issues with NetBird.
+      </p>
+
+      <Card label="OPTIONS" className="mb-5">
+        <CardRow label="Anonymize sensitive information">
+          <Toggle checked={anonymize} onChange={setAnonymize} />
+        </CardRow>
+        <CardRow label="Include system information">
+          <Toggle checked={systemInfo} onChange={setSystemInfo} />
+        </CardRow>
+        <CardRow label="Upload bundle automatically">
+          <Toggle checked={upload} onChange={setUpload} />
+        </CardRow>
+      </Card>
+
+      {upload && (
+        <Card label="UPLOAD" className="mb-5">
+          <CardRow label="Upload URL">
+            <Input
+              value={uploadUrl}
+              onChange={e => setUploadUrl(e.target.value)}
+              disabled={running}
+              style={{ width: 240 }}
+            />
+          </CardRow>
+        </Card>
+      )}
+
+      <Card label="TRACE LOGGING" className="mb-5">
+        <CardRow label="Run with trace logs before creating bundle">
+          <Toggle checked={runForDuration} onChange={setRunForDuration} />
+        </CardRow>
+        {runForDuration && (
+          <CardRow label="Duration">
+            <div className="flex items-center gap-2">
+              <Input
+                type="number"
+                min={1}
+                max={60}
+                value={durationMins}
+                onChange={e => setDurationMins(Math.max(1, parseInt(e.target.value) || 1))}
+                disabled={running}
+                style={{ width: 64, textAlign: 'center' }}
+              />
+              <span className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>
+                {durationMins === 1 ? 'minute' : 'minutes'}
+              </span>
+            </div>
+          </CardRow>
+        )}
+        {runForDuration && (
+          <div className="px-4 py-2 text-[11px]" style={{ color: 'var(--color-text-tertiary)' }}>
+            Note: NetBird will be brought up and down during collection.
+          </div>
+        )}
+      </Card>
+
+      {error && (
+        <div
+          className="mb-4 p-3 rounded-[var(--radius-control)] text-[13px]"
+          style={{ backgroundColor: 'var(--color-status-red-bg)', color: 'var(--color-status-red)' }}
+        >
+          {error}
+        </div>
+      )}
+
+      {progress && (
+        <div
+          className="mb-4 p-3 rounded-[var(--radius-control)] text-[13px]"
+          style={{
+            backgroundColor: 'var(--color-bg-secondary)',
+            boxShadow: 'var(--shadow-card)',
+            color: running ? 'var(--color-status-yellow)' : 'var(--color-status-green)',
+          }}
+        >
+          <span className={running ? 'animate-pulse' : ''}>{progress}</span>
+        </div>
+      )}
+
+      {result && (
+        <Card className="mb-4">
+          <div className="px-4 py-3 space-y-2 text-[13px]">
+            {result.uploadedKey ? (
+              <>
+                <p style={{ color: 'var(--color-status-green)' }} className="font-medium">Bundle uploaded successfully!</p>
+                <div className="flex items-center gap-2">
+                  <span style={{ color: 'var(--color-text-secondary)' }}>Upload key:</span>
+                  <code
+                    className="px-2 py-0.5 rounded text-[12px] font-mono"
+                    style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
+                  >
+                    {result.uploadedKey}
+                  </code>
+                </div>
+              </>
+            ) : result.uploadFailureReason ? (
+              <p style={{ color: 'var(--color-status-yellow)' }}>Upload failed: {result.uploadFailureReason}</p>
+            ) : null}
+            <div className="flex items-center gap-2">
+              <span style={{ color: 'var(--color-text-secondary)' }}>Local path:</span>
+              <code
+                className="px-2 py-0.5 rounded text-[12px] font-mono break-all"
+                style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
+              >
+                {result.localPath}
+              </code>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      <Button onClick={handleCreate} disabled={running}>
+        {running ? 'Running\u2026' : 'Create Debug Bundle'}
+      </Button>
+    </div>
+  )
+}

client/uiwails/frontend/src/pages/Networks.tsx

@@ -0,0 +1,337 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { Call } from '@wailsio/runtime'
+import type { NetworkInfo } from '../bindings'
+import SearchInput from '../components/ui/SearchInput'
+import Button from '../components/ui/Button'
+import Toggle from '../components/ui/Toggle'
+import SegmentedControl from '../components/ui/SegmentedControl'
+import { TableContainer, TableHeader, TableHeaderCell, TableRow, TableCell, TableFooter } from '../components/ui/Table'
+
+const SVC = 'github.com/netbirdio/netbird/client/uiwails/services.NetworkService'
+
+type Tab = 'all' | 'overlapping' | 'exit-node'
+type SortKey = 'id' | 'range'
+type SortDir = 'asc' | 'desc'
+
+const tabOptions: { value: Tab; label: string }[] = [
+  { value: 'all', label: 'All Networks' },
+  { value: 'overlapping', label: 'Overlapping' },
+  { value: 'exit-node', label: 'Exit Nodes' },
+]
+
+export default function Networks() {
+  const [networks, setNetworks] = useState<NetworkInfo[]>([])
+  const [tab, setTab] = useState<Tab>('all')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+  const [sortKey, setSortKey] = useState<SortKey>('id')
+  const [sortDir, setSortDir] = useState<SortDir>('asc')
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      let method: string
+      if (tab === 'all') method = 'ListNetworks'
+      else if (tab === 'overlapping') method = 'ListOverlappingNetworks'
+      else method = 'ListExitNodes'
+      const data = await Call.ByName(`${SVC}.${method}`) as NetworkInfo[]
+      setNetworks(data ?? [])
+    } catch (e) {
+      console.error('[Networks] load error:', e)
+      setError(String(e))
+    } finally {
+      setLoading(false)
+    }
+  }, [tab])
+
+  useEffect(() => {
+    load()
+    const id = setInterval(load, 10000)
+    return () => clearInterval(id)
+  }, [load])
+
+  const filtered = useMemo(() => {
+    let list = networks
+    if (search) {
+      const q = search.toLowerCase()
+      list = list.filter(n =>
+        n.id.toLowerCase().includes(q) ||
+        n.range?.toLowerCase().includes(q) ||
+        n.domains?.some(d => d.toLowerCase().includes(q))
+      )
+    }
+    return [...list].sort((a, b) => {
+      const aVal = sortKey === 'id' ? a.id : (a.range ?? '')
+      const bVal = sortKey === 'id' ? b.id : (b.range ?? '')
+      const cmp = aVal.localeCompare(bVal)
+      return sortDir === 'asc' ? cmp : -cmp
+    })
+  }, [networks, search, sortKey, sortDir])
+
+  function toggleSort(key: SortKey) {
+    if (sortKey === key) {
+      setSortDir(d => d === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortDir('asc')
+    }
+  }
+
+  async function toggle(id: string, selected: boolean) {
+    try {
+      if (selected) await Call.ByName(`${SVC}.DeselectNetwork`, id)
+      else await Call.ByName(`${SVC}.SelectNetwork`, id)
+      await load()
+    } catch (e) {
+      setError(String(e))
+    }
+  }
+
+  async function selectAll() {
+    try {
+      await Call.ByName(`${SVC}.SelectAllNetworks`)
+      await load()
+    } catch (e) { setError(String(e)) }
+  }
+
+  async function deselectAll() {
+    try {
+      await Call.ByName(`${SVC}.DeselectAllNetworks`)
+      await load()
+    } catch (e) { setError(String(e)) }
+  }
+
+  const selectedCount = networks.filter(n => n.selected).length
+
+  return (
+    <div className="max-w-5xl mx-auto">
+      <h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Networks</h1>
+
+      <SegmentedControl options={tabOptions} value={tab} onChange={setTab} className="mb-5" />
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-3 mb-4">
+        <SearchInput
+          value={search}
+          onChange={setSearch}
+          placeholder="Search by name, range or domain..."
+          className="flex-1 max-w-sm"
+        />
+        <div className="flex gap-2 ml-auto">
+          <Button variant="secondary" size="sm" onClick={selectAll}>Select All</Button>
+          <Button variant="secondary" size="sm" onClick={deselectAll}>Deselect All</Button>
+          <Button variant="secondary" size="sm" onClick={load}>Refresh</Button>
+        </div>
+      </div>
+
+      {error && (
+        <div
+          className="mb-4 p-3 rounded-[var(--radius-control)] text-[12px]"
+          style={{ backgroundColor: 'var(--color-status-red-bg)', color: 'var(--color-status-red)' }}
+        >
+          {error}
+        </div>
+      )}
+
+      {selectedCount > 0 && (
+        <div className="mb-3 text-[12px]" style={{ color: 'var(--color-text-tertiary)' }}>
+          {selectedCount} of {networks.length} network{networks.length !== 1 ? 's' : ''} selected
+        </div>
+      )}
+
+      {loading && networks.length === 0 ? (
+        <TableSkeleton />
+      ) : filtered.length === 0 && networks.length === 0 ? (
+        <EmptyState tab={tab} />
+      ) : filtered.length === 0 ? (
+        <div className="py-12 text-center text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>
+          No networks match your search.
+          <button onClick={() => setSearch('')} className="ml-2 hover:underline" style={{ color: 'var(--color-accent)' }}>Clear search</button>
+        </div>
+      ) : (
+        <TableContainer>
+          <table className="w-full text-[13px]">
+            <TableHeader>
+              <SortableHeader label="Network" sortKey="id" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
+              <SortableHeader label="Range / Domains" sortKey="range" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
+              <TableHeaderCell>Resolved IPs</TableHeaderCell>
+              <TableHeaderCell className="w-20">Active</TableHeaderCell>
+            </TableHeader>
+            <tbody>
+              {filtered.map(n => (
+                <NetworkRow key={n.id} network={n} onToggle={() => toggle(n.id, n.selected)} />
+              ))}
+            </tbody>
+          </table>
+          <TableFooter>
+            Showing {filtered.length} of {networks.length} network{networks.length !== 1 ? 's' : ''}
+          </TableFooter>
+        </TableContainer>
+      )}
+    </div>
+  )
+}
+
+/* ---- Row ---- */
+
+function NetworkRow({ network, onToggle }: { network: NetworkInfo; onToggle: () => void }) {
+  const domains = network.domains ?? []
+  const resolvedEntries = Object.entries(network.resolvedIPs ?? {})
+  const hasDomains = domains.length > 0
+
+  return (
+    <TableRow>
+      <TableCell>
+        <div className="flex items-center gap-3 min-w-[180px]">
+          <NetworkSquare name={network.id} active={network.selected} />
+          <div className="flex flex-col">
+            <span className="font-medium text-[13px]" style={{ color: 'var(--color-text-primary)' }}>{network.id}</span>
+            {hasDomains && domains.length > 1 && (
+              <span className="text-[11px] mt-0.5" style={{ color: 'var(--color-text-tertiary)' }}>{domains.length} domains</span>
+            )}
+          </div>
+        </div>
+      </TableCell>
+
+      <TableCell>
+        {hasDomains ? (
+          <div className="flex flex-col gap-1">
+            {domains.slice(0, 2).map(d => (
+              <span key={d} className="font-mono text-[12px]" style={{ color: 'var(--color-text-secondary)' }}>{d}</span>
+            ))}
+            {domains.length > 2 && (
+              <span className="text-[11px]" style={{ color: 'var(--color-text-tertiary)' }} title={domains.join(', ')}>+{domains.length - 2} more</span>
+            )}
+          </div>
+        ) : (
+          <span className="font-mono text-[12px]" style={{ color: 'var(--color-text-secondary)' }}>{network.range}</span>
+        )}
+      </TableCell>
+
+      <TableCell>
+        {resolvedEntries.length > 0 ? (
+          <div className="flex flex-col gap-1">
+            {resolvedEntries.slice(0, 2).map(([domain, ips]) => (
+              <span key={domain} className="font-mono text-[11px]" style={{ color: 'var(--color-text-tertiary)' }} title={`${domain}: ${ips.join(', ')}`}>
+                {ips[0]}{ips.length > 1 && <span style={{ color: 'var(--color-text-quaternary)' }}> +{ips.length - 1}</span>}
+              </span>
+            ))}
+            {resolvedEntries.length > 2 && (
+              <span className="text-[11px]" style={{ color: 'var(--color-text-quaternary)' }}>+{resolvedEntries.length - 2} more</span>
+            )}
+          </div>
+        ) : (
+          <span style={{ color: 'var(--color-text-quaternary)' }}>{'\u2014'}</span>
+        )}
+      </TableCell>
+
+      <TableCell>
+        <Toggle checked={network.selected} onChange={onToggle} small />
+      </TableCell>
+    </TableRow>
+  )
+}
+
+/* ---- Network Icon Square ---- */
+
+function NetworkSquare({ name, active }: { name: string; active: boolean }) {
+  const initials = name.substring(0, 2).toUpperCase()
+  return (
+    <div
+      className="relative h-10 w-10 shrink-0 rounded-[var(--radius-control)] flex items-center justify-center text-[13px] font-medium uppercase"
+      style={{
+        backgroundColor: 'var(--color-bg-tertiary)',
+        color: 'var(--color-text-primary)',
+      }}
+    >
+      {initials}
+      <span
+        className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full"
+        style={{
+          backgroundColor: active ? 'var(--color-status-green)' : 'var(--color-status-gray)',
+          border: '2px solid var(--color-bg-secondary)',
+        }}
+      />
+    </div>
+  )
+}
+
+/* ---- Sortable Header ---- */
+
+function SortableHeader({ label, sortKey, currentKey, dir, onSort }: {
+  label: string; sortKey: SortKey; currentKey: SortKey; dir: SortDir; onSort: (k: SortKey) => void
+}) {
+  const isActive = currentKey === sortKey
+  return (
+    <TableHeaderCell onClick={() => onSort(sortKey)}>
+      <span className="inline-flex items-center gap-1">
+        {label}
+        {isActive && (
+          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            {dir === 'asc' ? <path d="M5 15l7-7 7 7" /> : <path d="M19 9l-7 7-7-7" />}
+          </svg>
+        )}
+      </span>
+    </TableHeaderCell>
+  )
+}
+
+/* ---- Empty State ---- */
+
+function EmptyState({ tab }: { tab: Tab }) {
+  const msg = tab === 'exit-node'
+    ? 'No exit nodes configured.'
+    : tab === 'overlapping'
+    ? 'No overlapping networks detected.'
+    : 'No networks found.'
+
+  return (
+    <div
+      className="rounded-[var(--radius-card)] py-16 flex flex-col items-center gap-3"
+      style={{
+        backgroundColor: 'var(--color-bg-secondary)',
+        boxShadow: 'var(--shadow-card)',
+      }}
+    >
+      <div
+        className="h-12 w-12 rounded-[var(--radius-card)] flex items-center justify-center"
+        style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
+      >
+        <svg className="w-6 h-6" style={{ color: 'var(--color-text-tertiary)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+          <path d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5a17.92 17.92 0 01-8.716-2.247m0 0A8.966 8.966 0 013 12c0-1.777.514-3.434 1.4-4.832" />
+        </svg>
+      </div>
+      <p className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>{msg}</p>
+    </div>
+  )
+}
+
+/* ---- Loading Skeleton ---- */
+
+function TableSkeleton() {
+  return (
+    <div
+      className="rounded-[var(--radius-card)] overflow-hidden"
+      style={{ backgroundColor: 'var(--color-bg-secondary)', boxShadow: 'var(--shadow-card)' }}
+    >
+      <div className="h-11" style={{ backgroundColor: 'var(--color-bg-tertiary)', opacity: 0.5 }} />
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-4 px-4 py-4 animate-pulse"
+          style={{ borderBottom: '0.5px solid var(--color-separator)' }}
+        >
+          <div className="flex items-center gap-3 flex-1">
+            <div className="w-10 h-10 rounded-[var(--radius-control)]" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+            <div className="h-4 w-24 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+          </div>
+          <div className="h-4 w-32 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+          <div className="h-4 w-20 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+          <div className="h-6 w-12 rounded-full" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+        </div>
+      ))}
+    </div>
+  )
+}

client/uiwails/frontend/src/pages/Peers.tsx

@@ -0,0 +1,334 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { Call } from '@wailsio/runtime'
+import type { PeerInfo } from '../bindings'
+import SearchInput from '../components/ui/SearchInput'
+import Button from '../components/ui/Button'
+import StatusBadge from '../components/ui/StatusBadge'
+import { TableContainer, TableHeader, TableHeaderCell, TableRow, TableCell, TableFooter } from '../components/ui/Table'
+
+const SVC = 'github.com/netbirdio/netbird/client/uiwails/services.PeersService'
+
+type SortKey = 'fqdn' | 'ip' | 'status' | 'latency'
+type SortDir = 'asc' | 'desc'
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(1024))
+  return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`
+}
+
+function formatLatency(ms: number): string {
+  if (ms <= 0) return '\u2014'
+  if (ms < 1) return '<1 ms'
+  return `${ms.toFixed(1)} ms`
+}
+
+function peerName(p: PeerInfo): string {
+  if (p.fqdn) return p.fqdn.replace(/\.netbird\.cloud\.?$/, '')
+  return p.ip || p.pubKey.substring(0, 8)
+}
+
+export default function Peers() {
+  const [peers, setPeers] = useState<PeerInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+  const [sortKey, setSortKey] = useState<SortKey>('fqdn')
+  const [sortDir, setSortDir] = useState<SortDir>('asc')
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const data = await Call.ByName(`${SVC}.GetPeers`) as PeerInfo[]
+      setPeers(data ?? [])
+    } catch (e) {
+      console.error('[Peers] load error:', e)
+      setError(String(e))
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    load()
+    const id = setInterval(load, 10000)
+    return () => clearInterval(id)
+  }, [load])
+
+  const connectedCount = useMemo(() => peers.filter(p => p.connStatus === 'Connected').length, [peers])
+
+  const filtered = useMemo(() => {
+    let list = peers
+    if (search) {
+      const q = search.toLowerCase()
+      list = list.filter(p =>
+        peerName(p).toLowerCase().includes(q) ||
+        p.ip?.toLowerCase().includes(q) ||
+        p.connStatus?.toLowerCase().includes(q) ||
+        p.fqdn?.toLowerCase().includes(q)
+      )
+    }
+    return [...list].sort((a, b) => {
+      let cmp = 0
+      switch (sortKey) {
+        case 'fqdn': cmp = peerName(a).localeCompare(peerName(b)); break
+        case 'ip': cmp = (a.ip ?? '').localeCompare(b.ip ?? ''); break
+        case 'status': cmp = (a.connStatus ?? '').localeCompare(b.connStatus ?? ''); break
+        case 'latency': cmp = (a.latencyMs ?? 0) - (b.latencyMs ?? 0); break
+      }
+      return sortDir === 'asc' ? cmp : -cmp
+    })
+  }, [peers, search, sortKey, sortDir])
+
+  function toggleSort(key: SortKey) {
+    if (sortKey === key) {
+      setSortDir(d => d === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortKey(key)
+      setSortDir('asc')
+    }
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto">
+      <h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Peers</h1>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-3 mb-4">
+        <SearchInput
+          value={search}
+          onChange={setSearch}
+          placeholder="Search by name, IP or status..."
+          className="flex-1 max-w-sm"
+        />
+        <div className="flex gap-2 ml-auto">
+          <Button variant="secondary" size="sm" onClick={load}>Refresh</Button>
+        </div>
+      </div>
+
+      {error && (
+        <div
+          className="mb-4 p-3 rounded-[var(--radius-control)] text-[12px]"
+          style={{ backgroundColor: 'var(--color-status-red-bg)', color: 'var(--color-status-red)' }}
+        >
+          {error}
+        </div>
+      )}
+
+      {peers.length > 0 && (
+        <div className="mb-3 text-[12px]" style={{ color: 'var(--color-text-tertiary)' }}>
+          {connectedCount} of {peers.length} peer{peers.length !== 1 ? 's' : ''} connected
+        </div>
+      )}
+
+      {loading && peers.length === 0 ? (
+        <TableSkeleton />
+      ) : peers.length === 0 ? (
+        <EmptyState />
+      ) : filtered.length === 0 ? (
+        <div className="py-12 text-center text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>
+          No peers match your search.
+          <button onClick={() => setSearch('')} className="ml-2 hover:underline" style={{ color: 'var(--color-accent)' }}>Clear search</button>
+        </div>
+      ) : (
+        <TableContainer>
+          <table className="w-full text-[13px]">
+            <TableHeader>
+              <SortableHeader label="Peer" sortKey="fqdn" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
+              <SortableHeader label="IP" sortKey="ip" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
+              <SortableHeader label="Status" sortKey="status" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
+              <TableHeaderCell>Connection</TableHeaderCell>
+              <SortableHeader label="Latency" sortKey="latency" currentKey={sortKey} dir={sortDir} onSort={toggleSort} />
+              <TableHeaderCell>Transfer</TableHeaderCell>
+            </TableHeader>
+            <tbody>
+              {filtered.map(p => (
+                <PeerRow key={p.pubKey} peer={p} />
+              ))}
+            </tbody>
+          </table>
+          <TableFooter>
+            Showing {filtered.length} of {peers.length} peer{peers.length !== 1 ? 's' : ''}
+          </TableFooter>
+        </TableContainer>
+      )}
+    </div>
+  )
+}
+
+/* ---- Row ---- */
+
+function PeerRow({ peer }: { peer: PeerInfo }) {
+  const name = peerName(peer)
+  const connected = peer.connStatus === 'Connected'
+
+  return (
+    <TableRow>
+      <TableCell>
+        <div className="flex items-center gap-3 min-w-[160px]">
+          <PeerSquare name={name} connected={connected} />
+          <div className="flex flex-col">
+            <span className="font-medium text-[13px] truncate max-w-[200px]" style={{ color: 'var(--color-text-primary)' }} title={peer.fqdn}>{name}</span>
+            {peer.networks && peer.networks.length > 0 && (
+              <span className="text-[11px] mt-0.5" style={{ color: 'var(--color-text-tertiary)' }}>{peer.networks.length} network{peer.networks.length !== 1 ? 's' : ''}</span>
+            )}
+          </div>
+        </div>
+      </TableCell>
+
+      <TableCell>
+        <span className="font-mono text-[12px]" style={{ color: 'var(--color-text-secondary)' }}>{peer.ip || '\u2014'}</span>
+      </TableCell>
+
+      <TableCell>
+        <StatusBadge status={peer.connStatus} />
+      </TableCell>
+
+      <TableCell>
+        <div className="flex flex-col gap-0.5">
+          {connected ? (
+            <>
+              <span className="text-[12px]" style={{ color: 'var(--color-text-secondary)' }}>
+                {peer.relayed ? 'Relayed' : 'Direct'}{' '}
+                {peer.rosenpassEnabled && (
+                  <span style={{ color: 'var(--color-status-green)' }} title="Rosenpass post-quantum security enabled">PQ</span>
+                )}
+              </span>
+              {peer.relayed && peer.relayAddress && (
+                <span className="text-[11px] font-mono" style={{ color: 'var(--color-text-tertiary)' }} title={peer.relayAddress}>
+                  via {peer.relayAddress.length > 24 ? peer.relayAddress.substring(0, 24) + '...' : peer.relayAddress}
+                </span>
+              )}
+              {!peer.relayed && peer.localIceType && (
+                <span className="text-[11px]" style={{ color: 'var(--color-text-tertiary)' }}>{peer.localIceType} / {peer.remoteIceType}</span>
+              )}
+            </>
+          ) : (
+            <span style={{ color: 'var(--color-text-quaternary)' }}>{'\u2014'}</span>
+          )}
+        </div>
+      </TableCell>
+
+      <TableCell>
+        <span className="text-[13px]" style={{ color: peer.latencyMs > 0 ? 'var(--color-text-secondary)' : 'var(--color-text-quaternary)' }}>
+          {formatLatency(peer.latencyMs)}
+        </span>
+      </TableCell>
+
+      <TableCell>
+        {(peer.bytesRx > 0 || peer.bytesTx > 0) ? (
+          <div className="flex flex-col gap-0.5 text-[11px]">
+            <span style={{ color: 'var(--color-text-tertiary)' }}>
+              <span style={{ color: 'var(--color-status-green)' }} title="Received">&#8595;</span> {formatBytes(peer.bytesRx)}
+            </span>
+            <span style={{ color: 'var(--color-text-tertiary)' }}>
+              <span style={{ color: 'var(--color-accent)' }} title="Sent">&#8593;</span> {formatBytes(peer.bytesTx)}
+            </span>
+          </div>
+        ) : (
+          <span style={{ color: 'var(--color-text-quaternary)' }}>{'\u2014'}</span>
+        )}
+      </TableCell>
+    </TableRow>
+  )
+}
+
+/* ---- Peer Icon Square ---- */
+
+function PeerSquare({ name, connected }: { name: string; connected: boolean }) {
+  const initials = name.substring(0, 2).toUpperCase()
+  return (
+    <div
+      className="relative h-10 w-10 shrink-0 rounded-[var(--radius-control)] flex items-center justify-center text-[13px] font-medium uppercase"
+      style={{
+        backgroundColor: 'var(--color-bg-tertiary)',
+        color: 'var(--color-text-primary)',
+      }}
+    >
+      {initials}
+      <span
+        className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full"
+        style={{
+          backgroundColor: connected ? 'var(--color-status-green)' : 'var(--color-status-gray)',
+          border: '2px solid var(--color-bg-secondary)',
+        }}
+      />
+    </div>
+  )
+}
+
+/* ---- Sortable Header ---- */
+
+function SortableHeader({ label, sortKey, currentKey, dir, onSort }: {
+  label: string; sortKey: SortKey; currentKey: SortKey; dir: SortDir; onSort: (k: SortKey) => void
+}) {
+  const isActive = currentKey === sortKey
+  return (
+    <TableHeaderCell onClick={() => onSort(sortKey)}>
+      <span className="inline-flex items-center gap-1">
+        {label}
+        {isActive && (
+          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            {dir === 'asc' ? <path d="M5 15l7-7 7 7" /> : <path d="M19 9l-7 7-7-7" />}
+          </svg>
+        )}
+      </span>
+    </TableHeaderCell>
+  )
+}
+
+/* ---- Empty State ---- */
+
+function EmptyState() {
+  return (
+    <div
+      className="rounded-[var(--radius-card)] py-16 flex flex-col items-center gap-3"
+      style={{
+        backgroundColor: 'var(--color-bg-secondary)',
+        boxShadow: 'var(--shadow-card)',
+      }}
+    >
+      <div
+        className="h-12 w-12 rounded-[var(--radius-card)] flex items-center justify-center"
+        style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
+      >
+        <svg className="w-6 h-6" style={{ color: 'var(--color-text-tertiary)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+          <path d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+        </svg>
+      </div>
+      <p className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>No peers found. Connect to a network to see peers.</p>
+    </div>
+  )
+}
+
+/* ---- Loading Skeleton ---- */
+
+function TableSkeleton() {
+  return (
+    <div
+      className="rounded-[var(--radius-card)] overflow-hidden"
+      style={{ backgroundColor: 'var(--color-bg-secondary)', boxShadow: 'var(--shadow-card)' }}
+    >
+      <div className="h-11" style={{ backgroundColor: 'var(--color-bg-tertiary)', opacity: 0.5 }} />
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-4 px-4 py-4 animate-pulse"
+          style={{ borderBottom: '0.5px solid var(--color-separator)' }}
+        >
+          <div className="flex items-center gap-3 flex-1">
+            <div className="w-10 h-10 rounded-[var(--radius-control)]" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+            <div className="h-4 w-28 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+          </div>
+          <div className="h-4 w-24 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+          <div className="h-5 w-20 rounded-full" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+          <div className="h-4 w-16 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+          <div className="h-4 w-14 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+          <div className="h-4 w-16 rounded" style={{ backgroundColor: 'var(--color-bg-tertiary)' }} />
+        </div>
+      ))}
+    </div>
+  )
+}

client/uiwails/frontend/src/pages/Profiles.tsx

@@ -0,0 +1,170 @@
+import { useState, useEffect } from 'react'
+import { Call } from '@wailsio/runtime'
+import type { ProfileInfo } from '../bindings'
+import Card from '../components/ui/Card'
+import CardRow from '../components/ui/CardRow'
+import Button from '../components/ui/Button'
+import Input from '../components/ui/Input'
+import Modal from '../components/ui/Modal'
+
+export default function Profiles() {
+  const [profiles, setProfiles] = useState<ProfileInfo[]>([])
+  const [newName, setNewName] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [info, setInfo] = useState<string | null>(null)
+  const [confirm, setConfirm] = useState<{ action: string; profile: string } | null>(null)
+
+  async function refresh() {
+    try {
+      console.log('[Profiles] calling services.ProfileService.ListProfiles')
+      const data = await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.ProfileService.ListProfiles') as ProfileInfo[]
+      console.log('[Profiles] ListProfiles returned', data?.length ?? 0, 'profiles')
+      setProfiles(data ?? [])
+    } catch (e) {
+      console.error('[Profiles] ListProfiles error:', e)
+      setError(String(e))
+    }
+  }
+
+  useEffect(() => { refresh() }, [])
+
+  function showInfo(msg: string) {
+    setInfo(msg)
+    setTimeout(() => setInfo(null), 3000)
+  }
+
+  async function handleConfirm() {
+    if (!confirm) return
+    setLoading(true)
+    setError(null)
+    try {
+      if (confirm.action === 'switch') await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.ProfileService.SwitchProfile', confirm.profile)
+      else if (confirm.action === 'remove') await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.ProfileService.RemoveProfile', confirm.profile)
+      else if (confirm.action === 'logout') await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.ProfileService.Logout', confirm.profile)
+      showInfo(`${confirm.action === 'switch' ? 'Switched to' : confirm.action === 'remove' ? 'Removed' : 'Deregistered from'} profile '${confirm.profile}'`)
+      await refresh()
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setLoading(false)
+      setConfirm(null)
+    }
+  }
+
+  async function handleAdd() {
+    if (!newName.trim()) return
+    setLoading(true)
+    setError(null)
+    try {
+      await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.ProfileService.AddProfile', newName.trim())
+      showInfo(`Profile '${newName.trim()}' created`)
+      setNewName('')
+      await refresh()
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function confirmTitle(): string {
+    if (!confirm) return ''
+    if (confirm.action === 'switch') return 'Switch Profile'
+    if (confirm.action === 'remove') return 'Remove Profile'
+    return 'Deregister Profile'
+  }
+
+  function confirmMessage(): string {
+    if (!confirm) return ''
+    if (confirm.action === 'switch') return `Switch to profile '${confirm.profile}'?`
+    if (confirm.action === 'remove') return `Delete profile '${confirm.profile}'? This cannot be undone.`
+    return `Deregister from '${confirm.profile}'?`
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Profiles</h1>
+
+      {error && (
+        <div
+          className="mb-4 p-3 rounded-[var(--radius-control)] text-[13px]"
+          style={{ backgroundColor: 'var(--color-status-red-bg)', color: 'var(--color-status-red)' }}
+        >
+          {error}
+        </div>
+      )}
+      {info && (
+        <div
+          className="mb-4 p-3 rounded-[var(--radius-control)] text-[13px]"
+          style={{ backgroundColor: 'var(--color-status-green-bg)', color: 'var(--color-status-green)' }}
+        >
+          {info}
+        </div>
+      )}
+
+      {confirm && (
+        <Modal
+          title={confirmTitle()}
+          message={confirmMessage()}
+          destructive={confirm.action === 'remove'}
+          loading={loading}
+          onConfirm={handleConfirm}
+          onCancel={() => setConfirm(null)}
+        />
+      )}
+
+      {/* Profile list */}
+      <Card label="PROFILES" className="mb-6">
+        {profiles.length === 0 ? (
+          <div className="p-4 text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>No profiles found.</div>
+        ) : (
+          profiles.map(p => (
+            <CardRow key={p.name} label={p.name}>
+              <div className="flex items-center gap-2">
+                {p.isActive && (
+                  <span
+                    className="text-[11px] px-2 py-0.5 rounded-full font-medium"
+                    style={{
+                      backgroundColor: 'var(--color-status-green-bg)',
+                      color: 'var(--color-status-green)',
+                    }}
+                  >
+                    Active
+                  </span>
+                )}
+                {!p.isActive && (
+                  <Button variant="primary" size="sm" onClick={() => setConfirm({ action: 'switch', profile: p.name })}>
+                    Select
+                  </Button>
+                )}
+                <Button variant="secondary" size="sm" onClick={() => setConfirm({ action: 'logout', profile: p.name })}>
+                  Deregister
+                </Button>
+                <Button variant="destructive" size="sm" onClick={() => setConfirm({ action: 'remove', profile: p.name })}>
+                  Remove
+                </Button>
+              </div>
+            </CardRow>
+          ))
+        )}
+      </Card>
+
+      {/* Add new profile */}
+      <Card label="ADD PROFILE">
+        <div className="flex items-center gap-3 px-4 py-3">
+          <Input
+            className="flex-1"
+            placeholder="New profile name"
+            value={newName}
+            onChange={e => setNewName(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleAdd()}
+          />
+          <Button onClick={handleAdd} disabled={!newName.trim() || loading} size="sm">
+            Add
+          </Button>
+        </div>
+      </Card>
+    </div>
+  )
+}

client/uiwails/frontend/src/pages/Settings.tsx

@@ -0,0 +1,175 @@
+import { useState, useEffect } from 'react'
+import { Call } from '@wailsio/runtime'
+import type { ConfigInfo } from '../bindings'
+import Card from '../components/ui/Card'
+import CardRow from '../components/ui/CardRow'
+import Toggle from '../components/ui/Toggle'
+import Input from '../components/ui/Input'
+import Button from '../components/ui/Button'
+import SegmentedControl from '../components/ui/SegmentedControl'
+
+async function getConfig(): Promise<ConfigInfo | null> {
+  try {
+    console.log('[Settings] calling services.SettingsService.GetConfig')
+    const result = await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.SettingsService.GetConfig')
+    console.log('[Settings] GetConfig result:', JSON.stringify(result))
+    return result as ConfigInfo
+  } catch (e) {
+    console.error('[Settings] GetConfig error:', e)
+    return null
+  }
+}
+
+async function setConfig(cfg: ConfigInfo): Promise<void> {
+  console.log('[Settings] calling services.SettingsService.SetConfig')
+  await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.SettingsService.SetConfig', cfg)
+}
+
+type Tab = 'connection' | 'network' | 'security'
+
+const tabOptions: { value: Tab; label: string }[] = [
+  { value: 'connection', label: 'Connection' },
+  { value: 'network', label: 'Network' },
+  { value: 'security', label: 'Security' },
+]
+
+export default function Settings() {
+  const [config, setConfigState] = useState<ConfigInfo | null>(null)
+  const [tab, setTab] = useState<Tab>('connection')
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    getConfig().then(c => { if (c) setConfigState(c) })
+  }, [])
+
+  function update<K extends keyof ConfigInfo>(key: K, value: ConfigInfo[K]) {
+    setConfigState(prev => prev ? { ...prev, [key]: value } : prev)
+  }
+
+  async function handleSave() {
+    if (!config) return
+    setSaving(true)
+    setError(null)
+    setSaved(false)
+    try {
+      await setConfig(config)
+      setSaved(true)
+      setTimeout(() => setSaved(false), 2000)
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!config) {
+    return <div style={{ color: 'var(--color-text-secondary)' }}>Loading settings\u2026</div>
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Settings</h1>
+
+      <SegmentedControl options={tabOptions} value={tab} onChange={setTab} className="mb-6" />
+
+      {tab === 'connection' && (
+        <>
+          <Card label="SERVER CONFIGURATION" className="mb-5">
+            <CardRow label="Management URL">
+              <Input
+                value={config.managementUrl}
+                onChange={e => update('managementUrl', e.target.value)}
+                placeholder="https://api.netbird.io:443"
+                style={{ width: 240 }}
+              />
+            </CardRow>
+            <CardRow label="Admin URL">
+              <Input
+                value={config.adminUrl}
+                onChange={e => update('adminUrl', e.target.value)}
+                style={{ width: 240 }}
+              />
+            </CardRow>
+            <CardRow label="Pre-shared Key">
+              <Input
+                type="password"
+                value={config.preSharedKey}
+                onChange={e => update('preSharedKey', e.target.value)}
+                placeholder="Leave empty to clear"
+                style={{ width: 240 }}
+              />
+            </CardRow>
+          </Card>
+
+          <Card label="BEHAVIOR" className="mb-5">
+            <CardRow label="Connect automatically">
+              <Toggle checked={!config.disableAutoConnect} onChange={v => update('disableAutoConnect', !v)} />
+            </CardRow>
+            <CardRow label="Enable notifications">
+              <Toggle checked={!config.disableNotifications} onChange={v => update('disableNotifications', !v)} />
+            </CardRow>
+          </Card>
+        </>
+      )}
+
+      {tab === 'network' && (
+        <>
+          <Card label="INTERFACE" className="mb-5">
+            <CardRow label="Interface Name">
+              <Input
+                value={config.interfaceName}
+                onChange={e => update('interfaceName', e.target.value)}
+                placeholder="netbird0"
+                style={{ width: 180 }}
+              />
+            </CardRow>
+            <CardRow label="WireGuard Port">
+              <Input
+                type="number"
+                min={1}
+                max={65535}
+                value={config.wireguardPort}
+                onChange={e => update('wireguardPort', parseInt(e.target.value) || 0)}
+                placeholder="51820"
+                style={{ width: 100 }}
+              />
+            </CardRow>
+          </Card>
+
+          <Card label="OPTIONS" className="mb-5">
+            <CardRow label="Lazy connections" description="Experimental">
+              <Toggle checked={config.lazyConnectionEnabled} onChange={v => update('lazyConnectionEnabled', v)} />
+            </CardRow>
+            <CardRow label="Block inbound connections">
+              <Toggle checked={config.blockInbound} onChange={v => update('blockInbound', v)} />
+            </CardRow>
+          </Card>
+        </>
+      )}
+
+      {tab === 'security' && (
+        <Card label="SECURITY" className="mb-5">
+          <CardRow label="Allow SSH connections">
+            <Toggle checked={config.serverSshAllowed} onChange={v => update('serverSshAllowed', v)} />
+          </CardRow>
+          <CardRow label="Rosenpass post-quantum security">
+            <Toggle checked={config.rosenpassEnabled} onChange={v => update('rosenpassEnabled', v)} />
+          </CardRow>
+          <CardRow label="Rosenpass permissive mode">
+            <Toggle checked={config.rosenpassPermissive} onChange={v => update('rosenpassPermissive', v)} />
+          </CardRow>
+        </Card>
+      )}
+
+      <div className="flex items-center gap-3">
+        <Button onClick={handleSave} disabled={saving}>
+          {saving ? 'Saving\u2026' : 'Save'}
+        </Button>
+        {saved && <span className="text-[13px]" style={{ color: 'var(--color-status-green)' }}>Saved!</span>}
+        {error && <span className="text-[13px]" style={{ color: 'var(--color-status-red)' }}>{error}</span>}
+      </div>
+    </div>
+  )
+}

client/uiwails/frontend/src/pages/Status.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Events, Call } from '@wailsio/runtime'
+import type { StatusInfo } from '../bindings'
+import Card from '../components/ui/Card'
+import CardRow from '../components/ui/CardRow'
+import Button from '../components/ui/Button'
+
+async function getStatus(): Promise<StatusInfo | null> {
+  try {
+    console.log('[Dashboard] calling services.ConnectionService.GetStatus')
+    const result = await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.ConnectionService.GetStatus')
+    console.log('[Dashboard] GetStatus result:', JSON.stringify(result))
+    return result as StatusInfo
+  } catch (e) {
+    console.error('[Dashboard] GetStatus error:', e)
+    return null
+  }
+}
+
+async function connect(): Promise<void> {
+  console.log('[Dashboard] calling services.ConnectionService.Connect')
+  await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.ConnectionService.Connect')
+}
+
+async function disconnect(): Promise<void> {
+  console.log('[Dashboard] calling services.ConnectionService.Disconnect')
+  await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.ConnectionService.Disconnect')
+}
+
+function statusDotColor(status: string): string {
+  switch (status) {
+    case 'Connected': return 'var(--color-status-green)'
+    case 'Connecting': return 'var(--color-status-yellow)'
+    case 'Disconnected': return 'var(--color-status-gray)'
+    default: return 'var(--color-status-red)'
+  }
+}
+
+function statusTextColor(status: string): string {
+  switch (status) {
+    case 'Connected': return 'var(--color-status-green)'
+    case 'Connecting': return 'var(--color-status-yellow)'
+    case 'Disconnected': return 'var(--color-text-secondary)'
+    default: return 'var(--color-status-red)'
+  }
+}
+
+export default function Status() {
+  const [status, setStatus] = useState<StatusInfo | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const refresh = useCallback(async () => {
+    const s = await getStatus()
+    if (s) setStatus(s)
+  }, [])
+
+  useEffect(() => {
+    refresh()
+    const id = setInterval(refresh, 10000)
+    const unsub = Events.On('status-changed', (event: { data: StatusInfo[] }) => {
+      if (event.data[0]) setStatus(event.data[0])
+    })
+    return () => {
+      clearInterval(id)
+      if (typeof unsub === 'function') unsub()
+    }
+  }, [refresh])
+
+  async function handleConnect() {
+    setBusy(true)
+    setError(null)
+    try {
+      await connect()
+      await refresh()
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleDisconnect() {
+    setBusy(true)
+    setError(null)
+    try {
+      await disconnect()
+      await refresh()
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const isConnected = status?.status === 'Connected'
+  const isConnecting = status?.status === 'Connecting'
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1 className="text-xl font-semibold mb-6" style={{ color: 'var(--color-text-primary)' }}>Status</h1>
+
+      {/* Status hero */}
+      <Card className="mb-6">
+        <div className="px-4 py-5">
+          <div className="flex items-center gap-3 mb-4">
+            <span
+              className={`w-3 h-3 rounded-full ${status?.status === 'Connecting' ? 'animate-pulse' : ''}`}
+              style={{ backgroundColor: status ? statusDotColor(status.status) : 'var(--color-status-gray)' }}
+            />
+            <span
+              className="text-xl font-semibold"
+              style={{ color: status ? statusTextColor(status.status) : 'var(--color-text-secondary)' }}
+            >
+              {status?.status ?? 'Loading\u2026'}
+            </span>
+          </div>
+        </div>
+
+        {status?.ip && (
+          <CardRow label="IP Address">
+            <span className="font-mono text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>{status.ip}</span>
+          </CardRow>
+        )}
+        {status?.fqdn && (
+          <CardRow label="Hostname">
+            <span className="font-mono text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>{status.fqdn}</span>
+          </CardRow>
+        )}
+        {status && status.connectedPeers > 0 && (
+          <CardRow label="Connected Peers">
+            <span style={{ color: 'var(--color-text-secondary)' }}>{status.connectedPeers}</span>
+          </CardRow>
+        )}
+      </Card>
+
+      {/* Actions */}
+      <div className="flex gap-3">
+        {!isConnected && !isConnecting && (
+          <Button onClick={handleConnect} disabled={busy}>
+            {busy ? 'Connecting\u2026' : 'Connect'}
+          </Button>
+        )}
+        {(isConnected || isConnecting) && (
+          <Button variant="secondary" onClick={handleDisconnect} disabled={busy}>
+            {busy ? 'Disconnecting\u2026' : 'Disconnect'}
+          </Button>
+        )}
+      </div>
+
+      {error && (
+        <div
+          className="mt-4 p-3 rounded-[var(--radius-control)] text-[13px]"
+          style={{
+            backgroundColor: 'var(--color-status-red-bg)',
+            color: 'var(--color-status-red)',
+          }}
+        >
+          {error}
+        </div>
+      )}
+    </div>
+  )
+}

client/uiwails/frontend/src/pages/Update.tsx

@@ -0,0 +1,106 @@
+import { useState, useEffect, useRef } from 'react'
+import { Call } from '@wailsio/runtime'
+import type { InstallerResult } from '../bindings'
+import Card from '../components/ui/Card'
+import Button from '../components/ui/Button'
+
+type UpdateState = 'idle' | 'triggering' | 'polling' | 'success' | 'failed' | 'timeout'
+
+export default function Update() {
+  const [state, setState] = useState<UpdateState>('idle')
+  const [dots, setDots] = useState('')
+  const [errorMsg, setErrorMsg] = useState('')
+  const abortRef = useRef<AbortController | null>(null)
+
+  useEffect(() => {
+    if (state !== 'polling') return
+    let count = 0
+    const id = setInterval(() => {
+      count = (count + 1) % 4
+      setDots('.'.repeat(count))
+    }, 500)
+    return () => clearInterval(id)
+  }, [state])
+
+  async function handleTriggerUpdate() {
+    abortRef.current?.abort()
+    abortRef.current = new AbortController()
+
+    setState('triggering')
+    setErrorMsg('')
+
+    try {
+      console.log('[Update] calling services.UpdateService.TriggerUpdate')
+      await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.UpdateService.TriggerUpdate')
+    } catch (e) {
+      console.error('[Update] TriggerUpdate error:', e)
+      setErrorMsg(String(e))
+      setState('failed')
+      return
+    }
+
+    setState('polling')
+
+    try {
+      console.log('[Update] calling services.UpdateService.GetInstallerResult')
+      const result = await Call.ByName('github.com/netbirdio/netbird/client/uiwails/services.UpdateService.GetInstallerResult') as InstallerResult
+      console.log('[Update] GetInstallerResult:', JSON.stringify(result))
+      if (result?.success) {
+        setState('success')
+      } else {
+        setErrorMsg(result?.errorMsg ?? 'Update failed')
+        setState('failed')
+      }
+    } catch {
+      setState('success')
+    }
+  }
+
+  return (
+    <div className="max-w-lg mx-auto">
+      <h1 className="text-xl font-semibold mb-1" style={{ color: 'var(--color-text-primary)' }}>Update</h1>
+      <p className="text-[13px] mb-8" style={{ color: 'var(--color-text-secondary)' }}>
+        Trigger an automatic client update managed by the NetBird daemon.
+      </p>
+
+      <Card>
+        <div className="px-6 py-8 text-center">
+          {state === 'idle' && (
+            <>
+              <p className="text-[13px] mb-5" style={{ color: 'var(--color-text-secondary)' }}>Click below to trigger a daemon-managed update.</p>
+              <Button onClick={handleTriggerUpdate}>Trigger Update</Button>
+            </>
+          )}
+
+          {state === 'triggering' && (
+            <p className="animate-pulse text-[15px]" style={{ color: 'var(--color-status-yellow)' }}>Triggering update\u2026</p>
+          )}
+
+          {state === 'polling' && (
+            <div>
+              <p className="text-[17px] mb-2" style={{ color: 'var(--color-status-yellow)' }}>Updating{dots}</p>
+              <p className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>The daemon is installing the update. Please wait.</p>
+            </div>
+          )}
+
+          {state === 'success' && (
+            <div>
+              <p className="text-[17px] font-semibold mb-2" style={{ color: 'var(--color-status-green)' }}>Update Successful!</p>
+              <p className="text-[13px]" style={{ color: 'var(--color-text-secondary)' }}>The client has been updated. You may need to restart.</p>
+            </div>
+          )}
+
+          {state === 'failed' && (
+            <div>
+              <p className="text-[17px] font-semibold mb-2" style={{ color: 'var(--color-status-red)' }}>Update Failed</p>
+              {errorMsg && <p className="text-[13px] mb-4" style={{ color: 'var(--color-text-secondary)' }}>{errorMsg}</p>}
+              <Button variant="secondary" onClick={() => { setState('idle'); setErrorMsg('') }}>
+                Try Again
+              </Button>
+            </div>
+          )}
+        </div>
+      </Card>
+    </div>
+  )
+}

client/uiwails/frontend/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

client/uiwails/frontend/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+})

client/uiwails/grpc.go

@@ -0,0 +1,84 @@
+//go:build !(linux && 386)
+
+package main
+
+import (
+	"strings"
+	"sync"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+	"google.golang.org/grpc"
+	"google.golang.org/grpc/credentials/insecure"
+
+	"github.com/netbirdio/netbird/client/proto"
+	"github.com/netbirdio/netbird/version"
+)
+
+const (
+	defaultFailTimeout = 3 * time.Second
+	failFastTimeout    = time.Second
+)
+
+// GRPCClient manages a single persistent gRPC connection to the NetBird daemon.
+type GRPCClient struct {
+	addr   string
+	mu     sync.Mutex
+	conn   *grpc.ClientConn
+	client proto.DaemonServiceClient
+}
+
+// NewGRPCClient creates a new GRPCClient for the given daemon address.
+func NewGRPCClient(addr string) *GRPCClient {
+	return &GRPCClient{addr: addr}
+}
+
+// GetClient returns a cached DaemonServiceClient, creating the connection on first use.
+func (g *GRPCClient) GetClient(timeout time.Duration) (proto.DaemonServiceClient, error) {
+	g.mu.Lock()
+	defer g.mu.Unlock()
+
+	if g.client != nil {
+		return g.client, nil
+	}
+
+	target := g.addr
+	if strings.HasPrefix(target, "tcp://") {
+		target = strings.TrimPrefix(target, "tcp://")
+	} else if strings.HasPrefix(target, "unix://") {
+		target = "unix:" + strings.TrimPrefix(target, "unix://")
+	}
+
+	conn, err := grpc.NewClient(
+		target,
+		grpc.WithTransportCredentials(insecure.NewCredentials()),
+		grpc.WithUserAgent(getUIUserAgent()),
+	)
+	if err != nil {
+		return nil, err
+	}
+
+	g.conn = conn
+	g.client = proto.NewDaemonServiceClient(conn)
+	log.Debugf("gRPC connection established to %s", g.addr)
+
+	return g.client, nil
+}
+
+// Close closes the underlying gRPC connection.
+func (g *GRPCClient) Close() error {
+	g.mu.Lock()
+	defer g.mu.Unlock()
+
+	if g.conn != nil {
+		err := g.conn.Close()
+		g.conn = nil
+		g.client = nil
+		return err
+	}
+	return nil
+}
+
+func getUIUserAgent() string {
+	return "netbird-fancyui/" + version.NetbirdVersion()
+}

client/uiwails/icons.go

@@ -0,0 +1,31 @@
+//go:build !(linux && 386)
+
+package main
+
+import _ "embed"
+
+//go:embed assets/netbird-systemtray-disconnected.png
+var iconDisconnected []byte
+
+//go:embed assets/netbird-systemtray-connected.png
+var iconConnected []byte
+
+//go:embed assets/netbird-systemtray-connecting.png
+var iconConnecting []byte
+
+//go:embed assets/netbird-systemtray-error.png
+var iconError []byte
+
+// iconForStatus returns the appropriate tray icon bytes for the given status string.
+func iconForStatus(status string) []byte {
+	switch status {
+	case "Connected":
+		return iconConnected
+	case "Connecting":
+		return iconConnecting
+	case "Disconnected", "":
+		return iconDisconnected
+	default:
+		return iconError
+	}
+}

client/uiwails/main.go

@@ -0,0 +1,173 @@
+//go:build !(linux && 386)
+
+package main
+
+import (
+	"context"
+	"embed"
+	"flag"
+	"os"
+	"runtime"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+	"github.com/wailsapp/wails/v3/pkg/application"
+	"github.com/wailsapp/wails/v3/pkg/events"
+	"github.com/wailsapp/wails/v3/pkg/services/notifications"
+
+	"github.com/netbirdio/netbird/client/uiwails/event"
+	"github.com/netbirdio/netbird/client/uiwails/process"
+	"github.com/netbirdio/netbird/client/uiwails/services"
+)
+
+//go:embed frontend/dist
+var frontendFS embed.FS
+
+var (
+	daemonAddr = flag.String("daemon-addr", defaultDaemonAddr(), "NetBird daemon gRPC address")
+)
+
+func defaultDaemonAddr() string {
+	if runtime.GOOS == "windows" {
+		return "tcp://127.0.0.1:41731"
+	}
+	return "unix:///var/run/netbird.sock"
+}
+
+func main() {
+	flag.Parse()
+
+	// Single-instance guard — if another instance is running, show its window and exit.
+	if pid, running, err := process.IsAnotherProcessRunning(); err == nil && running {
+		log.Infof("another instance is running (pid %d), signalling it to show window", pid)
+		if err := sendShowWindowSignal(pid); err != nil {
+			log.Warnf("send show window signal: %v", err)
+		}
+		os.Exit(0)
+	}
+
+	grpcClient := NewGRPCClient(*daemonAddr)
+
+	connSvc := services.NewConnectionService(grpcClient)
+	settingsSvc := services.NewSettingsService(grpcClient)
+	networkSvc := services.NewNetworkService(grpcClient)
+	profileSvc := services.NewProfileService(grpcClient)
+	peersSvc := services.NewPeersService(grpcClient)
+	debugSvc := services.NewDebugService(grpcClient)
+	updateSvc := services.NewUpdateService(grpcClient)
+	notifSvc := notifications.New()
+
+	app := application.New(application.Options{
+		Name:        "NetBird",
+		Description: "NetBird VPN client",
+		Services: []application.Service{
+			application.NewService(connSvc),
+			application.NewService(settingsSvc),
+			application.NewService(networkSvc),
+			application.NewService(profileSvc),
+			application.NewService(peersSvc),
+			application.NewService(debugSvc),
+			application.NewService(updateSvc),
+			application.NewService(notifSvc),
+		},
+		Assets: application.AssetOptions{
+			Handler: application.BundledAssetFileServer(frontendFS),
+		},
+		Mac: application.MacOptions{
+			ActivationPolicy: application.ActivationPolicyAccessory,
+		},
+	})
+
+	window := app.Window.NewWithOptions(application.WebviewWindowOptions{
+		Title:         "NetBird",
+		Width:         900,
+		Height:        650,
+		Hidden:        true, // start hidden — tray is the primary interface
+		URL:           "/",
+		AlwaysOnTop:   false,
+		DisableResize: false,
+		Windows: application.WindowsWindow{
+			HiddenOnTaskbar: true,
+		},
+	})
+
+	// Hide instead of quit when user closes the window.
+	window.RegisterHook(events.Common.WindowClosing, func(e *application.WindowEvent) {
+		e.Cancel()
+		window.Hide()
+	})
+
+	// Register an in-process StatusNotifierWatcher so the tray works on
+	// minimal WMs (Fluxbox, OpenBox, i3…) that don't ship one themselves.
+	startStatusNotifierWatcher()
+
+	tray := newTrayManager(app, window, connSvc, settingsSvc, networkSvc, profileSvc)
+	tray.Setup(iconDisconnected)
+
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+
+	// Signal handler: SIGUSR1 on Unix, Windows Event on Windows.
+	setupSignalHandler(ctx, window)
+
+	// Daemon event stream → desktop notifications.
+	notify := func(title, body string) {
+		if err := notifSvc.SendNotification(notifications.NotificationOptions{
+			ID:    "netbird-event",
+			Title: title,
+			Body:  body,
+		}); err != nil {
+			log.Warnf("send notification: %v", err)
+		}
+	}
+
+	evtManager := event.NewManager(*daemonAddr, notify)
+	go evtManager.Start(ctx)
+
+	// Response handler can be wired early — it's just a callback registration.
+	const testCategoryID = "netbird-test-actions"
+	notifSvc.OnNotificationResponse(func(result notifications.NotificationResult) {
+		if result.Error != nil {
+			log.Warnf("notification response error: %v", result.Error)
+			return
+		}
+		log.Infof("notification action: id=%q category=%q", result.Response.ActionIdentifier, result.Response.CategoryID)
+		if result.Response.ActionIdentifier == "open" {
+			window.Show()
+		}
+	})
+
+	// Category registration and the test notification must happen AFTER the
+	// notifications service has run its Startup (which initializes appName,
+	// appGUID, and the COM activator on Windows). ApplicationStarted fires
+	// after all services are started.
+	app.Event.OnApplicationEvent(events.Common.ApplicationStarted, func(*application.ApplicationEvent) {
+		if err := notifSvc.RegisterNotificationCategory(notifications.NotificationCategory{
+			ID: testCategoryID,
+			Actions: []notifications.NotificationAction{
+				{ID: "open", Title: "Open NetBird"},
+				{ID: "dismiss", Title: "Dismiss"},
+			},
+		}); err != nil {
+			log.Warnf("register notification category: %v", err)
+			return
+		}
+
+		go func() {
+			time.Sleep(3 * time.Second)
+			log.Infof("--- trigger notification ---")
+			if err := notifSvc.SendNotificationWithActions(notifications.NotificationOptions{
+				ID:         "netbird-test",
+				Title:      "NetBird Test (with buttons)",
+				Body:       "ACTIONS TEST — you should see Open/Dismiss buttons below this text.",
+				CategoryID: testCategoryID,
+			}); err != nil {
+				log.Warnf("send notification with actions: %v", err)
+			}
+		}()
+	})
+
+	if err := app.Run(); err != nil {
+		log.Fatalf("app run: %v", err)
+	}
+}

client/uiwails/process/process.go

@@ -0,0 +1,39 @@
+package process
+
+import (
+	"os"
+	"path/filepath"
+	"strings"
+
+	"github.com/shirou/gopsutil/v3/process"
+)
+
+// IsAnotherProcessRunning returns the PID and true if another instance of the
+// same binary is already running for the current OS user.
+func IsAnotherProcessRunning() (int32, bool, error) {
+	processes, err := process.Processes()
+	if err != nil {
+		return 0, false, err
+	}
+
+	pid := os.Getpid()
+	processName := strings.ToLower(filepath.Base(os.Args[0]))
+
+	for _, p := range processes {
+		if int(p.Pid) == pid {
+			continue
+		}
+
+		runningProcessPath, err := p.Exe()
+		if err != nil {
+			continue
+		}
+
+		runningProcessName := strings.ToLower(filepath.Base(runningProcessPath))
+		if runningProcessName == processName && isProcessOwnedByCurrentUser(p) {
+			return p.Pid, true, nil
+		}
+	}
+
+	return 0, false, nil
+}

client/uiwails/process/process_nonwindows.go

@@ -0,0 +1,25 @@
+//go:build !windows
+
+package process
+
+import (
+	"os"
+
+	"github.com/shirou/gopsutil/v3/process"
+	log "github.com/sirupsen/logrus"
+)
+
+func isProcessOwnedByCurrentUser(p *process.Process) bool {
+	currentUserID := os.Getuid()
+	uids, err := p.Uids()
+	if err != nil {
+		log.Errorf("get process uids: %v", err)
+		return false
+	}
+	for _, id := range uids {
+		if int(id) == currentUserID {
+			return true
+		}
+	}
+	return false
+}

client/uiwails/process/process_windows.go

@@ -0,0 +1,24 @@
+package process
+
+import (
+	"os/user"
+
+	"github.com/shirou/gopsutil/v3/process"
+	log "github.com/sirupsen/logrus"
+)
+
+func isProcessOwnedByCurrentUser(p *process.Process) bool {
+	processUsername, err := p.Username()
+	if err != nil {
+		log.Errorf("get process username error: %v", err)
+		return false
+	}
+
+	currUser, err := user.Current()
+	if err != nil {
+		log.Errorf("get current user error: %v", err)
+		return false
+	}
+
+	return processUsername == currUser.Username
+}

client/uiwails/services/connection.go

@@ -0,0 +1,112 @@
+//go:build !(linux && 386)
+
+package services
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+
+	"github.com/netbirdio/netbird/client/proto"
+)
+
+// ConnectionService exposes connect/disconnect/status operations to the Wails frontend.
+type ConnectionService struct {
+	grpcClient GRPCClientIface
+}
+
+// NewConnectionService creates a new ConnectionService.
+func NewConnectionService(g GRPCClientIface) *ConnectionService {
+	return &ConnectionService{grpcClient: g}
+}
+
+// GetStatus returns the current daemon status.
+func (s *ConnectionService) GetStatus() (*StatusInfo, error) {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		log.Debugf("GetStatus: failed to get gRPC client: %v", err)
+		return nil, fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	resp, err := conn.Status(ctx, &proto.StatusRequest{GetFullPeerStatus: true})
+	if err != nil {
+		log.Warnf("GetStatus: status RPC failed: %v", err)
+		return nil, fmt.Errorf("status rpc: %w", err)
+	}
+
+	log.Debugf("GetStatus: daemon responded status=%q daemonVersion=%q fullStatus=%v",
+		resp.Status, resp.DaemonVersion, resp.FullStatus != nil)
+
+	info := &StatusInfo{
+		Status: resp.Status,
+	}
+
+	if resp.FullStatus != nil && resp.FullStatus.LocalPeerState != nil {
+		lp := resp.FullStatus.LocalPeerState
+		info.IP = lp.GetIP()
+		info.PublicKey = lp.GetPubKey()
+		info.Fqdn = lp.GetFqdn()
+		log.Debugf("GetStatus: localPeer ip=%q fqdn=%q pubKey=%q", info.IP, info.Fqdn, info.PublicKey)
+	} else if resp.FullStatus == nil {
+		log.Warnf("GetStatus: fullStatus is nil — daemon may not support full status or request flag was not set")
+	} else {
+		log.Debugf("GetStatus: fullStatus present but LocalPeerState is nil")
+	}
+
+	if resp.FullStatus != nil {
+		info.ConnectedPeers = len(resp.FullStatus.GetPeers())
+		log.Debugf("GetStatus: connectedPeers=%d", info.ConnectedPeers)
+	}
+
+	return info, nil
+}
+
+// Connect sends an Up request to the daemon.
+func (s *ConnectionService) Connect() error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 30*time.Second)
+	defer cancel()
+
+	if _, err := conn.Up(ctx, &proto.UpRequest{}); err != nil {
+		log.Errorf("Up rpc failed: %v", err)
+		return fmt.Errorf("connect: %w", err)
+	}
+
+	return nil
+}
+
+// Disconnect sends a Down request to the daemon.
+func (s *ConnectionService) Disconnect() error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	if _, err := conn.Down(ctx, &proto.DownRequest{}); err != nil {
+		log.Errorf("Down rpc failed: %v", err)
+		return fmt.Errorf("disconnect: %w", err)
+	}
+
+	return nil
+}
+
+// StatusInfo holds simplified status information for the frontend.
+type StatusInfo struct {
+	Status         string `json:"status"`
+	IP             string `json:"ip"`
+	PublicKey      string `json:"publicKey"`
+	Fqdn           string `json:"fqdn"`
+	ConnectedPeers int    `json:"connectedPeers"`
+}

client/uiwails/services/debug.go

@@ -0,0 +1,196 @@
+//go:build !(linux && 386)
+
+package services
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+
+	"github.com/netbirdio/netbird/client/proto"
+)
+
+// DebugService exposes debug bundle creation and log-level control to the Wails frontend.
+type DebugService struct {
+	grpcClient GRPCClientIface
+}
+
+// NewDebugService creates a new DebugService.
+func NewDebugService(g GRPCClientIface) *DebugService {
+	return &DebugService{grpcClient: g}
+}
+
+// DebugBundleParams holds the parameters for creating a debug bundle.
+type DebugBundleParams struct {
+	Anonymize         bool   `json:"anonymize"`
+	SystemInfo        bool   `json:"systemInfo"`
+	Upload            bool   `json:"upload"`
+	UploadURL         string `json:"uploadUrl"`
+	RunDurationMins   int    `json:"runDurationMins"`
+	EnablePersistence bool   `json:"enablePersistence"`
+}
+
+// DebugBundleResult holds the result of creating a debug bundle.
+type DebugBundleResult struct {
+	LocalPath           string `json:"localPath"`
+	UploadedKey         string `json:"uploadedKey"`
+	UploadFailureReason string `json:"uploadFailureReason"`
+}
+
+// CreateDebugBundle creates a debug bundle via the daemon.
+func (s *DebugService) CreateDebugBundle(params DebugBundleParams) (*DebugBundleResult, error) {
+	conn, err := s.grpcClient.GetClient(time.Second)
+	if err != nil {
+		return nil, fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Minute)
+	defer cancel()
+
+	if params.RunDurationMins > 0 {
+		if err := s.configureForDebug(ctx, conn, params); err != nil {
+			return nil, err
+		}
+	}
+
+	req := &proto.DebugBundleRequest{
+		Anonymize:  params.Anonymize,
+		SystemInfo: params.SystemInfo,
+	}
+	if params.Upload && params.UploadURL != "" {
+		req.UploadURL = params.UploadURL
+	}
+
+	resp, err := conn.DebugBundle(ctx, req)
+	if err != nil {
+		log.Errorf("DebugBundle rpc failed: %v", err)
+		return nil, fmt.Errorf("create debug bundle: %w", err)
+	}
+
+	return &DebugBundleResult{
+		LocalPath:           resp.GetPath(),
+		UploadedKey:         resp.GetUploadedKey(),
+		UploadFailureReason: resp.GetUploadFailureReason(),
+	}, nil
+}
+
+func (s *DebugService) configureForDebug(ctx context.Context, conn proto.DaemonServiceClient, params DebugBundleParams) error {
+	statusResp, err := conn.Status(ctx, &proto.StatusRequest{})
+	if err != nil {
+		return fmt.Errorf("get status: %w", err)
+	}
+
+	wasConnected := statusResp.Status == "Connected" || statusResp.Status == "Connecting"
+
+	logLevelResp, err := conn.GetLogLevel(ctx, &proto.GetLogLevelRequest{})
+	if err != nil {
+		return fmt.Errorf("get log level: %w", err)
+	}
+	originalLogLevel := logLevelResp.GetLevel()
+
+	// Set trace log level
+	if _, err := conn.SetLogLevel(ctx, &proto.SetLogLevelRequest{Level: proto.LogLevel_TRACE}); err != nil {
+		return fmt.Errorf("set log level: %w", err)
+	}
+
+	// Bring service down then up to capture full connection logs
+	if _, err := conn.Down(ctx, &proto.DownRequest{}); err != nil {
+		log.Warnf("bring down for debug: %v", err)
+	}
+	time.Sleep(time.Second)
+
+	if params.EnablePersistence {
+		if _, err := conn.SetSyncResponsePersistence(ctx, &proto.SetSyncResponsePersistenceRequest{Enabled: true}); err != nil {
+			log.Warnf("enable sync persistence: %v", err)
+		}
+	}
+
+	if _, err := conn.Up(ctx, &proto.UpRequest{}); err != nil {
+		return fmt.Errorf("bring service up: %w", err)
+	}
+	time.Sleep(3 * time.Second)
+
+	if _, err := conn.StartCPUProfile(ctx, &proto.StartCPUProfileRequest{}); err != nil {
+		log.Warnf("start CPU profiling: %v", err)
+	}
+
+	// Wait for the collection duration
+	collectionDur := time.Duration(params.RunDurationMins) * time.Minute
+	select {
+	case <-ctx.Done():
+		return ctx.Err()
+	case <-time.After(collectionDur):
+	}
+
+	if _, err := conn.StopCPUProfile(ctx, &proto.StopCPUProfileRequest{}); err != nil {
+		log.Warnf("stop CPU profiling: %v", err)
+	}
+
+	// Restore original state
+	if !wasConnected {
+		if _, err := conn.Down(ctx, &proto.DownRequest{}); err != nil {
+			log.Warnf("restore down state: %v", err)
+		}
+	}
+
+	if originalLogLevel < proto.LogLevel_TRACE {
+		if _, err := conn.SetLogLevel(ctx, &proto.SetLogLevelRequest{Level: originalLogLevel}); err != nil {
+			log.Warnf("restore log level: %v", err)
+		}
+	}
+
+	return nil
+}
+
+// GetLogLevel returns the current daemon log level.
+func (s *DebugService) GetLogLevel() (string, error) {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return "", fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	resp, err := conn.GetLogLevel(ctx, &proto.GetLogLevelRequest{})
+	if err != nil {
+		return "", fmt.Errorf("get log level rpc: %w", err)
+	}
+
+	return resp.GetLevel().String(), nil
+}
+
+// SetLogLevel sets the daemon log level.
+func (s *DebugService) SetLogLevel(level string) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	var protoLevel proto.LogLevel
+	switch level {
+	case "TRACE":
+		protoLevel = proto.LogLevel_TRACE
+	case "DEBUG":
+		protoLevel = proto.LogLevel_DEBUG
+	case "INFO":
+		protoLevel = proto.LogLevel_INFO
+	case "WARN", "WARNING":
+		protoLevel = proto.LogLevel_WARN
+	case "ERROR":
+		protoLevel = proto.LogLevel_ERROR
+	default:
+		protoLevel = proto.LogLevel_INFO
+	}
+
+	if _, err := conn.SetLogLevel(ctx, &proto.SetLogLevelRequest{Level: protoLevel}); err != nil {
+		return fmt.Errorf("set log level rpc: %w", err)
+	}
+
+	return nil
+}

client/uiwails/services/grpc_iface.go

@@ -0,0 +1,14 @@
+//go:build !(linux && 386)
+
+package services
+
+import (
+	"time"
+
+	"github.com/netbirdio/netbird/client/proto"
+)
+
+// GRPCClientIface is the interface services use to obtain a daemon client.
+type GRPCClientIface interface {
+	GetClient(timeout time.Duration) (proto.DaemonServiceClient, error)
+}

client/uiwails/services/network.go

@@ -0,0 +1,222 @@
+//go:build !(linux && 386)
+
+package services
+
+import (
+	"context"
+	"fmt"
+	"sort"
+	"strings"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+
+	"github.com/netbirdio/netbird/client/proto"
+)
+
+// NetworkService exposes network/route management to the Wails frontend.
+type NetworkService struct {
+	grpcClient GRPCClientIface
+}
+
+// NewNetworkService creates a new NetworkService.
+func NewNetworkService(g GRPCClientIface) *NetworkService {
+	return &NetworkService{grpcClient: g}
+}
+
+// NetworkInfo is a serializable view of a single network/route.
+type NetworkInfo struct {
+	ID          string              `json:"id"`
+	Range       string              `json:"range"`
+	Domains     []string            `json:"domains"`
+	Selected    bool                `json:"selected"`
+	ResolvedIPs map[string][]string `json:"resolvedIPs"`
+}
+
+// ListNetworks returns all networks from the daemon.
+func (s *NetworkService) ListNetworks() ([]NetworkInfo, error) {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return nil, fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	resp, err := conn.ListNetworks(ctx, &proto.ListNetworksRequest{})
+	if err != nil {
+		return nil, fmt.Errorf("list networks rpc: %w", err)
+	}
+
+	routes := make([]NetworkInfo, 0, len(resp.Routes))
+	for _, r := range resp.Routes {
+		info := NetworkInfo{
+			ID:       r.GetID(),
+			Range:    r.GetRange(),
+			Domains:  r.GetDomains(),
+			Selected: r.GetSelected(),
+		}
+		if resolvedMap := r.GetResolvedIPs(); resolvedMap != nil {
+			info.ResolvedIPs = make(map[string][]string)
+			for domain, ipList := range resolvedMap {
+				info.ResolvedIPs[domain] = ipList.GetIps()
+			}
+		}
+		routes = append(routes, info)
+	}
+
+	sort.Slice(routes, func(i, j int) bool {
+		return strings.ToLower(routes[i].ID) < strings.ToLower(routes[j].ID)
+	})
+
+	return routes, nil
+}
+
+// ListOverlappingNetworks returns only networks with overlapping ranges.
+func (s *NetworkService) ListOverlappingNetworks() ([]NetworkInfo, error) {
+	all, err := s.ListNetworks()
+	if err != nil {
+		return nil, err
+	}
+
+	existingRange := make(map[string][]NetworkInfo)
+	for _, r := range all {
+		if len(r.Domains) > 0 {
+			continue
+		}
+		existingRange[r.Range] = append(existingRange[r.Range], r)
+	}
+
+	var result []NetworkInfo
+	for _, group := range existingRange {
+		if len(group) > 1 {
+			result = append(result, group...)
+		}
+	}
+	return result, nil
+}
+
+// ListExitNodes returns networks with range 0.0.0.0/0 (exit nodes).
+func (s *NetworkService) ListExitNodes() ([]NetworkInfo, error) {
+	all, err := s.ListNetworks()
+	if err != nil {
+		return nil, err
+	}
+
+	var result []NetworkInfo
+	for _, r := range all {
+		if r.Range == "0.0.0.0/0" {
+			result = append(result, r)
+		}
+	}
+	return result, nil
+}
+
+// SelectNetwork selects a single network by ID.
+func (s *NetworkService) SelectNetwork(id string) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	req := &proto.SelectNetworksRequest{
+		NetworkIDs: []string{id},
+		Append:     true,
+	}
+	if _, err := conn.SelectNetworks(ctx, req); err != nil {
+		log.Errorf("SelectNetworks rpc failed: %v", err)
+		return fmt.Errorf("select network: %w", err)
+	}
+	return nil
+}
+
+// DeselectNetwork deselects a single network by ID.
+func (s *NetworkService) DeselectNetwork(id string) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	req := &proto.SelectNetworksRequest{
+		NetworkIDs: []string{id},
+	}
+	if _, err := conn.DeselectNetworks(ctx, req); err != nil {
+		log.Errorf("DeselectNetworks rpc failed: %v", err)
+		return fmt.Errorf("deselect network: %w", err)
+	}
+	return nil
+}
+
+// SelectAllNetworks selects all networks.
+func (s *NetworkService) SelectAllNetworks() error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	req := &proto.SelectNetworksRequest{All: true}
+	if _, err := conn.SelectNetworks(ctx, req); err != nil {
+		return fmt.Errorf("select all networks: %w", err)
+	}
+	return nil
+}
+
+// DeselectAllNetworks deselects all networks.
+func (s *NetworkService) DeselectAllNetworks() error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	req := &proto.SelectNetworksRequest{All: true}
+	if _, err := conn.DeselectNetworks(ctx, req); err != nil {
+		return fmt.Errorf("deselect all networks: %w", err)
+	}
+	return nil
+}
+
+// SelectNetworks selects a list of networks by ID.
+func (s *NetworkService) SelectNetworks(ids []string) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	req := &proto.SelectNetworksRequest{NetworkIDs: ids, Append: true}
+	if _, err := conn.SelectNetworks(ctx, req); err != nil {
+		return fmt.Errorf("select networks: %w", err)
+	}
+	return nil
+}
+
+// DeselectNetworks deselects a list of networks by ID.
+func (s *NetworkService) DeselectNetworks(ids []string) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	req := &proto.SelectNetworksRequest{NetworkIDs: ids}
+	if _, err := conn.DeselectNetworks(ctx, req); err != nil {
+		return fmt.Errorf("deselect networks: %w", err)
+	}
+	return nil
+}

client/uiwails/services/peers.go

@@ -0,0 +1,106 @@
+//go:build !(linux && 386)
+
+package services
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+
+	"github.com/netbirdio/netbird/client/proto"
+)
+
+// PeersService exposes peer listing operations to the Wails frontend.
+type PeersService struct {
+	grpcClient GRPCClientIface
+}
+
+// NewPeersService creates a new PeersService.
+func NewPeersService(g GRPCClientIface) *PeersService {
+	return &PeersService{grpcClient: g}
+}
+
+// GetPeers returns the list of all peers with their status information.
+func (s *PeersService) GetPeers() ([]PeerInfo, error) {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		log.Debugf("GetPeers: failed to get gRPC client: %v", err)
+		return nil, fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	resp, err := conn.Status(ctx, &proto.StatusRequest{GetFullPeerStatus: true})
+	if err != nil {
+		log.Warnf("GetPeers: status RPC failed: %v", err)
+		return nil, fmt.Errorf("status rpc: %w", err)
+	}
+
+	if resp.FullStatus == nil {
+		log.Debugf("GetPeers: fullStatus is nil")
+		return []PeerInfo{}, nil
+	}
+
+	peers := resp.FullStatus.GetPeers()
+	log.Debugf("GetPeers: got %d peers from daemon", len(peers))
+
+	result := make([]PeerInfo, 0, len(peers))
+	for _, p := range peers {
+		info := PeerInfo{
+			IP:               p.GetIP(),
+			PubKey:           p.GetPubKey(),
+			Fqdn:             p.GetFqdn(),
+			ConnStatus:       p.GetConnStatus(),
+			Relayed:          p.GetRelayed(),
+			RelayAddress:     p.GetRelayAddress(),
+			BytesRx:          p.GetBytesRx(),
+			BytesTx:          p.GetBytesTx(),
+			RosenpassEnabled: p.GetRosenpassEnabled(),
+			Networks:         p.GetNetworks(),
+			LocalIceType:     p.GetLocalIceCandidateType(),
+			RemoteIceType:    p.GetRemoteIceCandidateType(),
+			LocalEndpoint:    p.GetLocalIceCandidateEndpoint(),
+			RemoteEndpoint:   p.GetRemoteIceCandidateEndpoint(),
+		}
+
+		if lat := p.GetLatency(); lat != nil {
+			info.LatencyMs = float64(lat.Seconds)*1000 + float64(lat.Nanos)/1e6
+		}
+
+		if ts := p.GetLastWireguardHandshake(); ts != nil {
+			info.LastHandshake = ts.AsTime().Format(time.RFC3339)
+		}
+
+		if ts := p.GetConnStatusUpdate(); ts != nil {
+			info.ConnStatusUpdate = ts.AsTime().Format(time.RFC3339)
+		}
+
+		result = append(result, info)
+	}
+
+	return result, nil
+}
+
+// PeerInfo holds simplified peer information for the frontend.
+type PeerInfo struct {
+	IP               string   `json:"ip"`
+	PubKey           string   `json:"pubKey"`
+	Fqdn             string   `json:"fqdn"`
+	ConnStatus       string   `json:"connStatus"`
+	ConnStatusUpdate string   `json:"connStatusUpdate"`
+	Relayed          bool     `json:"relayed"`
+	RelayAddress     string   `json:"relayAddress"`
+	LatencyMs        float64  `json:"latencyMs"`
+	BytesRx          int64    `json:"bytesRx"`
+	BytesTx          int64    `json:"bytesTx"`
+	RosenpassEnabled bool     `json:"rosenpassEnabled"`
+	Networks         []string `json:"networks"`
+	LastHandshake    string   `json:"lastHandshake"`
+	LocalIceType     string   `json:"localIceType"`
+	RemoteIceType    string   `json:"remoteIceType"`
+	LocalEndpoint    string   `json:"localEndpoint"`
+	RemoteEndpoint   string   `json:"remoteEndpoint"`
+}

client/uiwails/services/profile.go

@@ -0,0 +1,195 @@
+//go:build !(linux && 386)
+
+package services
+
+import (
+	"context"
+	"fmt"
+	"os/user"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+
+	"github.com/netbirdio/netbird/client/proto"
+)
+
+// ProfileService exposes profile management to the Wails frontend.
+type ProfileService struct {
+	grpcClient GRPCClientIface
+}
+
+// NewProfileService creates a new ProfileService.
+func NewProfileService(g GRPCClientIface) *ProfileService {
+	return &ProfileService{grpcClient: g}
+}
+
+// ProfileInfo is a serializable view of a profile.
+type ProfileInfo struct {
+	Name     string `json:"name"`
+	IsActive bool   `json:"isActive"`
+}
+
+// ActiveProfileInfo holds information about the currently active profile.
+type ActiveProfileInfo struct {
+	ProfileName string `json:"profileName"`
+	Username    string `json:"username"`
+	Email       string `json:"email"`
+}
+
+// ListProfiles returns all profiles for the current OS user.
+func (s *ProfileService) ListProfiles() ([]ProfileInfo, error) {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return nil, fmt.Errorf("get client: %w", err)
+	}
+
+	currUser, err := user.Current()
+	if err != nil {
+		return nil, fmt.Errorf("get current user: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	resp, err := conn.ListProfiles(ctx, &proto.ListProfilesRequest{
+		Username: currUser.Username,
+	})
+	if err != nil {
+		return nil, fmt.Errorf("list profiles rpc: %w", err)
+	}
+
+	profiles := make([]ProfileInfo, 0, len(resp.Profiles))
+	for _, p := range resp.Profiles {
+		profiles = append(profiles, ProfileInfo{
+			Name:     p.Name,
+			IsActive: p.IsActive,
+		})
+	}
+	return profiles, nil
+}
+
+// GetActiveProfile returns the currently active profile.
+func (s *ProfileService) GetActiveProfile() (*ActiveProfileInfo, error) {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return nil, fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	resp, err := conn.GetActiveProfile(ctx, &proto.GetActiveProfileRequest{})
+	if err != nil {
+		return nil, fmt.Errorf("get active profile rpc: %w", err)
+	}
+
+	return &ActiveProfileInfo{
+		ProfileName: resp.ProfileName,
+		Username:    resp.Username,
+	}, nil
+}
+
+// SwitchProfile switches to the named profile.
+func (s *ProfileService) SwitchProfile(profileName string) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	currUser, err := user.Current()
+	if err != nil {
+		return fmt.Errorf("get current user: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	if _, err := conn.SwitchProfile(ctx, &proto.SwitchProfileRequest{
+		ProfileName: &profileName,
+		Username:    &currUser.Username,
+	}); err != nil {
+		log.Errorf("SwitchProfile rpc failed: %v", err)
+		return fmt.Errorf("switch profile: %w", err)
+	}
+
+	return nil
+}
+
+// AddProfile creates a new profile with the given name.
+func (s *ProfileService) AddProfile(profileName string) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	currUser, err := user.Current()
+	if err != nil {
+		return fmt.Errorf("get current user: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	if _, err := conn.AddProfile(ctx, &proto.AddProfileRequest{
+		ProfileName: profileName,
+		Username:    currUser.Username,
+	}); err != nil {
+		log.Errorf("AddProfile rpc failed: %v", err)
+		return fmt.Errorf("add profile: %w", err)
+	}
+
+	return nil
+}
+
+// RemoveProfile removes the named profile.
+func (s *ProfileService) RemoveProfile(profileName string) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	currUser, err := user.Current()
+	if err != nil {
+		return fmt.Errorf("get current user: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	if _, err := conn.RemoveProfile(ctx, &proto.RemoveProfileRequest{
+		ProfileName: profileName,
+		Username:    currUser.Username,
+	}); err != nil {
+		log.Errorf("RemoveProfile rpc failed: %v", err)
+		return fmt.Errorf("remove profile: %w", err)
+	}
+
+	return nil
+}
+
+// Logout deregisters the named profile.
+func (s *ProfileService) Logout(profileName string) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	currUser, err := user.Current()
+	if err != nil {
+		return fmt.Errorf("get current user: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	username := currUser.Username
+	if _, err := conn.Logout(ctx, &proto.LogoutRequest{
+		ProfileName: &profileName,
+		Username:    &username,
+	}); err != nil {
+		log.Errorf("Logout rpc failed: %v", err)
+		return fmt.Errorf("logout: %w", err)
+	}
+
+	return nil
+}

client/uiwails/services/settings.go

@@ -0,0 +1,165 @@
+//go:build !(linux && 386)
+
+package services
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+
+	"github.com/netbirdio/netbird/client/proto"
+)
+
+// SettingsService exposes config get/set operations to the Wails frontend.
+type SettingsService struct {
+	grpcClient GRPCClientIface
+}
+
+// NewSettingsService creates a new SettingsService.
+func NewSettingsService(g GRPCClientIface) *SettingsService {
+	return &SettingsService{grpcClient: g}
+}
+
+// ConfigInfo is a serializable view of the daemon configuration.
+type ConfigInfo struct {
+	ManagementURL         string `json:"managementUrl"`
+	AdminURL              string `json:"adminUrl"`
+	PreSharedKey          string `json:"preSharedKey"`
+	InterfaceName         string `json:"interfaceName"`
+	WireguardPort         int64  `json:"wireguardPort"`
+	DisableAutoConnect    bool   `json:"disableAutoConnect"`
+	ServerSSHAllowed      bool   `json:"serverSshAllowed"`
+	RosenpassEnabled      bool   `json:"rosenpassEnabled"`
+	RosenpassPermissive   bool   `json:"rosenpassPermissive"`
+	LazyConnectionEnabled bool   `json:"lazyConnectionEnabled"`
+	BlockInbound          bool   `json:"blockInbound"`
+	DisableNotifications  bool   `json:"disableNotifications"`
+}
+
+// GetConfig retrieves the daemon configuration.
+func (s *SettingsService) GetConfig() (*ConfigInfo, error) {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return nil, fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+
+	resp, err := conn.GetConfig(ctx, &proto.GetConfigRequest{})
+	if err != nil {
+		return nil, fmt.Errorf("get config rpc: %w", err)
+	}
+
+	cfg := &ConfigInfo{
+		ManagementURL:         resp.ManagementUrl,
+		AdminURL:              resp.AdminURL,
+		PreSharedKey:          resp.PreSharedKey,
+		InterfaceName:         resp.InterfaceName,
+		WireguardPort:         resp.WireguardPort,
+		DisableAutoConnect:    resp.DisableAutoConnect,
+		ServerSSHAllowed:      resp.ServerSSHAllowed,
+		RosenpassEnabled:      resp.RosenpassEnabled,
+		LazyConnectionEnabled: resp.LazyConnectionEnabled,
+		BlockInbound:          resp.BlockInbound,
+		DisableNotifications:  resp.DisableNotifications,
+	}
+
+	return cfg, nil
+}
+
+// SetConfig pushes configuration changes to the daemon.
+func (s *SettingsService) SetConfig(cfg ConfigInfo) error {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	// The SetConfigRequest uses optional pointer fields for most settings.
+	req := &proto.SetConfigRequest{
+		ManagementUrl:         cfg.ManagementURL,
+		AdminURL:              cfg.AdminURL,
+		RosenpassEnabled:      &cfg.RosenpassEnabled,
+		InterfaceName:         &cfg.InterfaceName,
+		WireguardPort:         &cfg.WireguardPort,
+		OptionalPreSharedKey:  &cfg.PreSharedKey,
+		DisableAutoConnect:    &cfg.DisableAutoConnect,
+		ServerSSHAllowed:      &cfg.ServerSSHAllowed,
+		RosenpassPermissive:   &cfg.RosenpassPermissive,
+		DisableNotifications:  &cfg.DisableNotifications,
+		LazyConnectionEnabled: &cfg.LazyConnectionEnabled,
+		BlockInbound:          &cfg.BlockInbound,
+	}
+
+	if _, err := conn.SetConfig(ctx, req); err != nil {
+		log.Errorf("SetConfig rpc failed: %v", err)
+		return fmt.Errorf("set config: %w", err)
+	}
+
+	return nil
+}
+
+// ToggleSSH toggles the SSH server allowed setting.
+func (s *SettingsService) ToggleSSH(enabled bool) error {
+	cfg, err := s.GetConfig()
+	if err != nil {
+		return err
+	}
+	cfg.ServerSSHAllowed = enabled
+	return s.SetConfig(*cfg)
+}
+
+// ToggleAutoConnect toggles the auto-connect setting.
+func (s *SettingsService) ToggleAutoConnect(enabled bool) error {
+	cfg, err := s.GetConfig()
+	if err != nil {
+		return err
+	}
+	cfg.DisableAutoConnect = !enabled
+	return s.SetConfig(*cfg)
+}
+
+// ToggleRosenpass toggles the Rosenpass quantum resistance setting.
+func (s *SettingsService) ToggleRosenpass(enabled bool) error {
+	cfg, err := s.GetConfig()
+	if err != nil {
+		return err
+	}
+	cfg.RosenpassEnabled = enabled
+	return s.SetConfig(*cfg)
+}
+
+// ToggleLazyConn toggles the lazy connections setting.
+func (s *SettingsService) ToggleLazyConn(enabled bool) error {
+	cfg, err := s.GetConfig()
+	if err != nil {
+		return err
+	}
+	cfg.LazyConnectionEnabled = enabled
+	return s.SetConfig(*cfg)
+}
+
+// ToggleBlockInbound toggles the block inbound setting.
+func (s *SettingsService) ToggleBlockInbound(enabled bool) error {
+	cfg, err := s.GetConfig()
+	if err != nil {
+		return err
+	}
+	cfg.BlockInbound = enabled
+	return s.SetConfig(*cfg)
+}
+
+// ToggleNotifications toggles the notifications setting.
+func (s *SettingsService) ToggleNotifications(enabled bool) error {
+	cfg, err := s.GetConfig()
+	if err != nil {
+		return err
+	}
+	cfg.DisableNotifications = !enabled
+	return s.SetConfig(*cfg)
+}

client/uiwails/services/update.go

@@ -0,0 +1,56 @@
+//go:build !(linux && 386)
+
+package services
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+
+	"github.com/netbirdio/netbird/client/proto"
+)
+
+// UpdateService exposes update triggering and result polling to the Wails frontend.
+type UpdateService struct {
+	grpcClient GRPCClientIface
+}
+
+// NewUpdateService creates a new UpdateService.
+func NewUpdateService(g GRPCClientIface) *UpdateService {
+	return &UpdateService{grpcClient: g}
+}
+
+// InstallerResult holds the result of an installer run.
+type InstallerResult struct {
+	Success  bool   `json:"success"`
+	ErrorMsg string `json:"errorMsg"`
+}
+
+// TriggerUpdate requests the daemon to perform an auto-update.
+func (s *UpdateService) TriggerUpdate() error {
+	return nil
+}
+
+// GetInstallerResult polls for the installer result (blocking until complete or timeout).
+func (s *UpdateService) GetInstallerResult() (*InstallerResult, error) {
+	conn, err := s.grpcClient.GetClient(3 * time.Second)
+	if err != nil {
+		return nil, fmt.Errorf("get client: %w", err)
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 15*time.Minute)
+	defer cancel()
+
+	resp, err := conn.GetInstallerResult(ctx, &proto.InstallerResultRequest{})
+	if err != nil {
+		log.Infof("GetInstallerResult ended (daemon may have restarted): %v", err)
+		return &InstallerResult{Success: true}, nil
+	}
+
+	return &InstallerResult{
+		Success:  resp.Success,
+		ErrorMsg: resp.ErrorMsg,
+	}, nil
+}

client/uiwails/signal_unix.go

@@ -0,0 +1,40 @@
+//go:build !windows && !(linux && 386)
+
+package main
+
+import (
+	"context"
+	"os"
+	"os/signal"
+	"syscall"
+
+	log "github.com/sirupsen/logrus"
+	"github.com/wailsapp/wails/v3/pkg/application"
+)
+
+// setupSignalHandler listens for SIGUSR1 and shows the main window when received.
+func setupSignalHandler(ctx context.Context, window *application.WebviewWindow) {
+	sigChan := make(chan os.Signal, 1)
+	signal.Notify(sigChan, syscall.SIGUSR1)
+
+	go func() {
+		for {
+			select {
+			case <-ctx.Done():
+				return
+			case <-sigChan:
+				log.Info("received SIGUSR1 signal, showing window")
+				window.Show()
+			}
+		}
+	}()
+}
+
+// sendShowWindowSignal sends SIGUSR1 to an already-running instance to trigger window show.
+func sendShowWindowSignal(pid int32) error {
+	proc, err := os.FindProcess(int(pid))
+	if err != nil {
+		return err
+	}
+	return proc.Signal(syscall.SIGUSR1)
+}

client/uiwails/signal_windows.go

@@ -0,0 +1,101 @@
+//go:build windows
+
+package main
+
+import (
+	"context"
+	"errors"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+	"github.com/wailsapp/wails/v3/pkg/application"
+	"golang.org/x/sys/windows"
+)
+
+const (
+	fancyUITriggerEventName = `Global\NetBirdFancyUITriggerEvent`
+	waitTimeout             = 5 * time.Second
+	desiredAccesses         = windows.SYNCHRONIZE | windows.EVENT_MODIFY_STATE
+)
+
+// setupSignalHandler sets up a Windows Event-based signal handler.
+// When triggered, it shows the main window.
+func setupSignalHandler(ctx context.Context, window *application.WebviewWindow) {
+	eventNamePtr, err := windows.UTF16PtrFromString(fancyUITriggerEventName)
+	if err != nil {
+		log.Errorf("convert event name to UTF16: %v", err)
+		return
+	}
+
+	eventHandle, err := windows.CreateEvent(nil, 1, 0, eventNamePtr)
+	if err != nil {
+		if errors.Is(err, windows.ERROR_ALREADY_EXISTS) {
+			eventHandle, err = windows.OpenEvent(desiredAccesses, false, eventNamePtr)
+			if err != nil {
+				log.Errorf("open existing trigger event: %v", err)
+				return
+			}
+		} else {
+			log.Errorf("create trigger event: %v", err)
+			return
+		}
+	}
+
+	if eventHandle == windows.InvalidHandle {
+		log.Errorf("invalid handle for trigger event")
+		return
+	}
+
+	go waitForWindowsEvent(ctx, eventHandle, window)
+}
+
+// sendShowWindowSignal signals the already-running instance (identified by pid,
+// unused on Windows since the event is named globally) to show its window.
+func sendShowWindowSignal(_ int32) error {
+	eventNamePtr, err := windows.UTF16PtrFromString(fancyUITriggerEventName)
+	if err != nil {
+		return err
+	}
+
+	handle, err := windows.OpenEvent(desiredAccesses, false, eventNamePtr)
+	if err != nil {
+		return err
+	}
+	defer windows.CloseHandle(handle)
+
+	return windows.SetEvent(handle)
+}
+
+func waitForWindowsEvent(ctx context.Context, eventHandle windows.Handle, window *application.WebviewWindow) {
+	defer func() {
+		if err := windows.CloseHandle(eventHandle); err != nil {
+			log.Errorf("close event handle: %v", err)
+		}
+	}()
+
+	for {
+		if ctx.Err() != nil {
+			return
+		}
+
+		status, err := windows.WaitForSingleObject(eventHandle, uint32(waitTimeout.Milliseconds()))
+
+		switch status {
+		case windows.WAIT_OBJECT_0:
+			log.Info("received trigger event signal, showing window")
+			if err := windows.ResetEvent(eventHandle); err != nil {
+				log.Errorf("reset event: %v", err)
+			}
+			window.Show()
+		case uint32(windows.WAIT_TIMEOUT):
+			// Timeout is expected — loop and poll again.
+		default:
+			log.Errorf("unexpected WaitForSingleObject status %d: %v", status, err)
+			select {
+			case <-time.After(5 * time.Second):
+			case <-ctx.Done():
+				return
+			}
+		}
+	}
+}

client/uiwails/tray.go

@@ -0,0 +1,429 @@
+//go:build !(linux && 386)
+
+package main
+
+import (
+	"context"
+	"fmt"
+	"sort"
+	"sync"
+	"time"
+
+	log "github.com/sirupsen/logrus"
+	"github.com/wailsapp/wails/v3/pkg/application"
+
+	"github.com/netbirdio/netbird/client/uiwails/services"
+)
+
+const statusPollInterval = 5 * time.Second
+
+// trayManager manages the system tray state and menu.
+type trayManager struct {
+	app    *application.App
+	window *application.WebviewWindow
+	tray   *application.SystemTray
+	menu   *application.Menu
+
+	connSvc     *services.ConnectionService
+	settingsSvc *services.SettingsService
+	networkSvc  *services.NetworkService
+	profileSvc  *services.ProfileService
+
+	mu           sync.Mutex
+	statusItem   *application.MenuItem
+	exitNodeMenu *application.Menu
+
+	// toggle items tracked for updating checked state
+	sshItem           *application.MenuItem
+	autoConnectItem   *application.MenuItem
+	rosenpassItem     *application.MenuItem
+	lazyConnItem      *application.MenuItem
+	blockInboundItem  *application.MenuItem
+	notificationsItem *application.MenuItem
+
+	exitNodeItems  []*application.MenuItem
+	exitNodeStates []exitNodeState
+}
+
+type exitNodeState struct {
+	id       string
+	selected bool
+}
+
+func newTrayManager(
+	app *application.App,
+	window *application.WebviewWindow,
+	connSvc *services.ConnectionService,
+	settingsSvc *services.SettingsService,
+	networkSvc *services.NetworkService,
+	profileSvc *services.ProfileService,
+) *trayManager {
+	return &trayManager{
+		app:         app,
+		window:      window,
+		connSvc:     connSvc,
+		settingsSvc: settingsSvc,
+		networkSvc:  networkSvc,
+		profileSvc:  profileSvc,
+	}
+}
+
+// Setup creates and attaches the system tray.
+func (t *trayManager) Setup(icon []byte) {
+	t.tray = t.app.SystemTray.New()
+	t.tray.SetIcon(icon)
+
+	t.menu = t.buildMenu()
+	t.tray.AttachWindow(t.window).WindowOffset(5).SetMenu(t.menu)
+
+	// Load initial toggle states from config.
+	go t.refreshToggleStates()
+
+	// Start status polling goroutine.
+	go t.pollStatus(context.Background())
+}
+
+func (t *trayManager) buildMenu() *application.Menu {
+	menu := t.app.NewMenu()
+
+	// Status label (disabled, informational).
+	t.statusItem = menu.Add("Status: Disconnected")
+	t.statusItem.SetEnabled(false)
+	menu.AddSeparator()
+
+	// Connect / Disconnect.
+	menu.Add("Connect").OnClick(func(_ *application.Context) {
+		go func() {
+			if err := t.connSvc.Connect(); err != nil {
+				log.Errorf("connect: %v", err)
+			}
+		}()
+	})
+	menu.Add("Disconnect").OnClick(func(_ *application.Context) {
+		go func() {
+			if err := t.connSvc.Disconnect(); err != nil {
+				log.Errorf("disconnect: %v", err)
+			}
+		}()
+	})
+	menu.AddSeparator()
+
+	// Toggle checkboxes.
+	t.sshItem = menu.AddCheckbox("Allow SSH connections", false)
+	t.sshItem.OnClick(func(ctx *application.Context) {
+		enabled := ctx.ClickedMenuItem().Checked()
+		go func() {
+			if err := t.settingsSvc.ToggleSSH(enabled); err != nil {
+				log.Errorf("toggle SSH: %v", err)
+				t.sshItem.SetChecked(!enabled)
+			}
+		}()
+	})
+
+	t.autoConnectItem = menu.AddCheckbox("Connect automatically when service starts", false)
+	t.autoConnectItem.OnClick(func(ctx *application.Context) {
+		enabled := ctx.ClickedMenuItem().Checked()
+		go func() {
+			if err := t.settingsSvc.ToggleAutoConnect(enabled); err != nil {
+				log.Errorf("toggle auto-connect: %v", err)
+				t.autoConnectItem.SetChecked(!enabled)
+			}
+		}()
+	})
+
+	t.rosenpassItem = menu.AddCheckbox("Enable post-quantum security via Rosenpass", false)
+	t.rosenpassItem.OnClick(func(ctx *application.Context) {
+		enabled := ctx.ClickedMenuItem().Checked()
+		go func() {
+			if err := t.settingsSvc.ToggleRosenpass(enabled); err != nil {
+				log.Errorf("toggle Rosenpass: %v", err)
+				t.rosenpassItem.SetChecked(!enabled)
+			}
+		}()
+	})
+
+	t.lazyConnItem = menu.AddCheckbox("[Experimental] Enable lazy connections", false)
+	t.lazyConnItem.OnClick(func(ctx *application.Context) {
+		enabled := ctx.ClickedMenuItem().Checked()
+		go func() {
+			if err := t.settingsSvc.ToggleLazyConn(enabled); err != nil {
+				log.Errorf("toggle lazy connections: %v", err)
+				t.lazyConnItem.SetChecked(!enabled)
+			}
+		}()
+	})
+
+	t.blockInboundItem = menu.AddCheckbox("Block inbound connections", false)
+	t.blockInboundItem.OnClick(func(ctx *application.Context) {
+		enabled := ctx.ClickedMenuItem().Checked()
+		go func() {
+			if err := t.settingsSvc.ToggleBlockInbound(enabled); err != nil {
+				log.Errorf("toggle block inbound: %v", err)
+				t.blockInboundItem.SetChecked(!enabled)
+			}
+		}()
+	})
+
+	t.notificationsItem = menu.AddCheckbox("Enable notifications", true)
+	t.notificationsItem.OnClick(func(ctx *application.Context) {
+		enabled := ctx.ClickedMenuItem().Checked()
+		go func() {
+			if err := t.settingsSvc.ToggleNotifications(enabled); err != nil {
+				log.Errorf("toggle notifications: %v", err)
+				t.notificationsItem.SetChecked(!enabled)
+			}
+		}()
+	})
+
+	menu.AddSeparator()
+
+	// Exit Node submenu.
+	t.exitNodeMenu = menu.AddSubmenu("Exit Node")
+	t.exitNodeMenu.Add("No exit nodes").SetEnabled(false)
+
+	menu.AddSeparator()
+
+	// Navigation items — navigate React SPA.
+	menu.Add("Status").OnClick(func(_ *application.Context) {
+		t.window.EmitEvent("navigate", "/")
+		t.window.Show()
+	})
+	menu.Add("Settings").OnClick(func(_ *application.Context) {
+		t.window.EmitEvent("navigate", "/settings")
+		t.window.Show()
+	})
+	menu.Add("Peers").OnClick(func(_ *application.Context) {
+		t.window.EmitEvent("navigate", "/peers")
+		t.window.Show()
+	})
+	menu.Add("Networks").OnClick(func(_ *application.Context) {
+		t.window.EmitEvent("navigate", "/networks")
+		t.window.Show()
+	})
+	menu.Add("Profiles").OnClick(func(_ *application.Context) {
+		t.window.EmitEvent("navigate", "/profiles")
+		t.window.Show()
+	})
+	menu.Add("Debug").OnClick(func(_ *application.Context) {
+		t.window.EmitEvent("navigate", "/debug")
+		t.window.Show()
+	})
+	menu.Add("Update").OnClick(func(_ *application.Context) {
+		t.window.EmitEvent("navigate", "/update")
+		t.window.Show()
+	})
+
+	menu.AddSeparator()
+
+	menu.Add("Quit").OnClick(func(_ *application.Context) {
+		t.app.Quit()
+	})
+
+	return menu
+}
+
+// pollStatus polls the daemon status every statusPollInterval and updates the tray.
+// Exit nodes are refreshed every 10 cycles (~20 seconds).
+func (t *trayManager) pollStatus(ctx context.Context) {
+	ticker := time.NewTicker(statusPollInterval)
+	defer ticker.Stop()
+
+	var cycle int
+	for {
+		select {
+		case <-ctx.Done():
+			return
+		case <-ticker.C:
+			status, err := t.connSvc.GetStatus()
+			if err != nil {
+				log.Warnf("pollStatus: failed to get status: %v", err)
+				continue
+			}
+			log.Debugf("pollStatus: status=%q ip=%q fqdn=%q peers=%d",
+				status.Status, status.IP, status.Fqdn, status.ConnectedPeers)
+			t.updateStatus(status)
+
+			cycle++
+			if cycle%10 == 0 {
+				go t.refreshExitNodes()
+			}
+		}
+	}
+}
+
+func (t *trayManager) updateStatus(status *services.StatusInfo) {
+	label := fmt.Sprintf("Status: %s", status.Status)
+	if status.IP != "" {
+		label += fmt.Sprintf(" (%s)", status.IP)
+	}
+	t.statusItem.SetLabel(label)
+	t.menu.Update()
+
+	// Update tray icon based on status.
+	icon := iconForStatus(status.Status)
+	if icon != nil {
+		t.tray.SetIcon(icon)
+	}
+
+	// Emit event so the React frontend can update live.
+	log.Debugf("updateStatus: emitting status-changed event: status=%q ip=%q", status.Status, status.IP)
+	t.window.EmitEvent("status-changed", status)
+}
+
+func (t *trayManager) refreshToggleStates() {
+	cfg, err := t.settingsSvc.GetConfig()
+	if err != nil {
+		log.Debugf("refresh toggle states: %v", err)
+		return
+	}
+
+	t.sshItem.SetChecked(cfg.ServerSSHAllowed)
+	t.autoConnectItem.SetChecked(!cfg.DisableAutoConnect)
+	t.rosenpassItem.SetChecked(cfg.RosenpassEnabled)
+	t.lazyConnItem.SetChecked(cfg.LazyConnectionEnabled)
+	t.blockInboundItem.SetChecked(cfg.BlockInbound)
+	t.notificationsItem.SetChecked(!cfg.DisableNotifications)
+	t.menu.Update()
+}
+
+func (t *trayManager) refreshExitNodes() {
+	exitNodes, err := t.networkSvc.ListExitNodes()
+	if err != nil {
+		log.Debugf("refresh exit nodes: %v", err)
+		return
+	}
+
+	t.mu.Lock()
+	defer t.mu.Unlock()
+
+	t.rebuildExitNodeMenu(exitNodes)
+}
+
+func (t *trayManager) rebuildExitNodeMenu(exitNodes []services.NetworkInfo) {
+	// Sort exit nodes by ID for stable ordering.
+	sort.Slice(exitNodes, func(i, j int) bool {
+		return exitNodes[i].ID < exitNodes[j].ID
+	})
+
+	// Check if state has changed.
+	newStates := make([]exitNodeState, 0, len(exitNodes))
+	for _, n := range exitNodes {
+		newStates = append(newStates, exitNodeState{id: n.ID, selected: n.Selected})
+	}
+
+	if statesEqual(t.exitNodeStates, newStates) {
+		return
+	}
+	t.exitNodeStates = newStates
+
+	// Rebuild the exit node submenu from scratch.
+	// Wails v3 doesn't have a RemoveAll, so we recreate the submenu reference.
+	for _, item := range t.exitNodeItems {
+		item.SetHidden(true)
+	}
+	t.exitNodeItems = nil
+
+	if len(exitNodes) == 0 {
+		t.menu.Update()
+		return
+	}
+
+	var hasSelected bool
+	for _, node := range exitNodes {
+		n := node // capture
+		item := t.exitNodeMenu.AddCheckbox(n.ID, n.Selected)
+		item.OnClick(func(_ *application.Context) {
+			go t.toggleExitNode(n.ID)
+		})
+		t.exitNodeItems = append(t.exitNodeItems, item)
+		if n.Selected {
+			hasSelected = true
+		}
+	}
+
+	if hasSelected {
+		t.exitNodeMenu.AddSeparator()
+		deselectAll := t.exitNodeMenu.Add("Deselect All")
+		deselectAll.OnClick(func(_ *application.Context) {
+			go t.deselectAllExitNodes()
+		})
+		t.exitNodeItems = append(t.exitNodeItems, deselectAll)
+	}
+
+	t.menu.Update()
+}
+
+func (t *trayManager) toggleExitNode(id string) {
+	exitNodes, err := t.networkSvc.ListExitNodes()
+	if err != nil {
+		log.Errorf("list exit nodes: %v", err)
+		return
+	}
+
+	var target *services.NetworkInfo
+	var selectedOtherIDs []string
+
+	for i, n := range exitNodes {
+		if n.ID == id {
+			cp := exitNodes[i]
+			target = &cp
+		} else if n.Selected {
+			selectedOtherIDs = append(selectedOtherIDs, n.ID)
+		}
+	}
+
+	// Deselect all other selected exit nodes.
+	if len(selectedOtherIDs) > 0 {
+		if err := t.networkSvc.DeselectNetworks(selectedOtherIDs); err != nil {
+			log.Errorf("deselect exit nodes: %v", err)
+		}
+	}
+
+	if target != nil && !target.Selected {
+		if err := t.networkSvc.SelectNetwork(id); err != nil {
+			log.Errorf("select exit node: %v", err)
+		}
+	} else if target != nil && target.Selected && len(selectedOtherIDs) == 0 {
+		// Node is the only selected one — deselect it.
+		if err := t.networkSvc.DeselectNetwork(id); err != nil {
+			log.Errorf("deselect exit node: %v", err)
+		}
+	}
+
+	t.refreshExitNodes()
+}
+
+func (t *trayManager) deselectAllExitNodes() {
+	exitNodes, err := t.networkSvc.ListExitNodes()
+	if err != nil {
+		log.Errorf("list exit nodes for deselect all: %v", err)
+		return
+	}
+
+	var ids []string
+	for _, n := range exitNodes {
+		if n.Selected {
+			ids = append(ids, n.ID)
+		}
+	}
+
+	if len(ids) > 0 {
+		if err := t.networkSvc.DeselectNetworks(ids); err != nil {
+			log.Errorf("deselect all exit nodes: %v", err)
+		}
+	}
+
+	t.refreshExitNodes()
+}
+
+func statesEqual(a, b []exitNodeState) bool {
+	if len(a) != len(b) {
+		return false
+	}
+	for i := range a {
+		if a[i] != b[i] {
+			return false
+		}
+	}
+	return true
+}

client/uiwails/tray_linux.go

@@ -0,0 +1,24 @@
+//go:build linux && !386
+
+package main
+
+import "os"
+
+// init runs before Wails' own init(), so the env var is set in time.
+func init() {
+	if os.Getenv("WEBKIT_DISABLE_DMABUF_RENDERER") != "" {
+		return
+	}
+
+	// WebKitGTK's DMA-BUF renderer fails on many setups (VMs, containers,
+	// minimal WMs without proper GPU access) and leaves the window blank
+	// white. Wails only disables it for NVIDIA+Wayland, but the issue is
+	// broader. Always disable it — software rendering works fine for a
+	// small UI like this.
+	_ = os.Setenv("WEBKIT_DISABLE_DMABUF_RENDERER", "1")
+}
+
+// On Linux, the system tray provider may require the menu to be recreated
+// rather than updated in place. The rebuildExitNodeMenu method in tray.go
+// already handles this by removing and re-adding items; no additional
+// Linux-specific workaround is needed for Wails v3.

client/uiwails/tray_watcher_linux.go

@@ -0,0 +1,148 @@
+//go:build linux && !(linux && 386)
+
+package main
+
+// startStatusNotifierWatcher registers org.kde.StatusNotifierWatcher on the
+// session D-Bus if no other process has already claimed it.
+//
+// Minimal window managers (Fluxbox, OpenBox, i3, etc.) do not ship a
+// StatusNotifier watcher, so tray icons using libayatana-appindicator or
+// the KDE/freedesktop StatusNotifier protocol silently fail.
+//
+// By owning the watcher name in-process we allow the Wails v3 built-in tray
+// to register itself — no external daemon or package needed.
+//
+// When an XEmbed system tray is available (_NET_SYSTEM_TRAY_S0), we also
+// start an in-process XEmbed host that bridges the SNI icon into the
+// XEmbed tray (Fluxbox, IceWM, etc.).
+
+import (
+	"sync"
+
+	"github.com/godbus/dbus/v5"
+	log "github.com/sirupsen/logrus"
+)
+
+const (
+	watcherName  = "org.kde.StatusNotifierWatcher"
+	watcherPath  = "/StatusNotifierWatcher"
+	watcherIface = "org.kde.StatusNotifierWatcher"
+)
+
+type statusNotifierWatcher struct {
+	conn    *dbus.Conn
+	items   []string
+	hosts   map[string]*xembedHost
+	hostsMu sync.Mutex
+}
+
+// RegisterStatusNotifierItem is the D-Bus method called by tray clients.
+// The sender parameter is automatically injected by godbus with the caller's
+// unique bus name (e.g. ":1.42"). It does not appear in the D-Bus signature.
+func (w *statusNotifierWatcher) RegisterStatusNotifierItem(sender dbus.Sender, service string) *dbus.Error {
+	for _, s := range w.items {
+		if s == service {
+			return nil
+		}
+	}
+	w.items = append(w.items, service)
+	log.Debugf("StatusNotifierWatcher: registered item %q from %s", service, sender)
+
+	go w.tryStartXembedHost(string(sender), dbus.ObjectPath(service))
+	return nil
+}
+
+// RegisterStatusNotifierHost is required by the protocol but unused here.
+func (w *statusNotifierWatcher) RegisterStatusNotifierHost(service string) *dbus.Error {
+	log.Debugf("StatusNotifierWatcher: host registered %q", service)
+	return nil
+}
+
+// tryStartXembedHost attempts to create an XEmbed tray icon for the given
+// SNI item. If no XEmbed tray manager is available, this is a no-op.
+func (w *statusNotifierWatcher) tryStartXembedHost(busName string, objPath dbus.ObjectPath) {
+	w.hostsMu.Lock()
+	defer w.hostsMu.Unlock()
+
+	if _, exists := w.hosts[busName]; exists {
+		return
+	}
+
+	// Use a private session bus so our signal subscriptions don't
+	// interfere with Wails' signal handler (which panics on unexpected signals).
+	sessionConn, err := dbus.SessionBusPrivate()
+	if err != nil {
+		log.Debugf("StatusNotifierWatcher: cannot open private session bus for XEmbed host: %v", err)
+		return
+	}
+	if err := sessionConn.Auth(nil); err != nil {
+		log.Debugf("StatusNotifierWatcher: XEmbed host auth failed: %v", err)
+		_ = sessionConn.Close()
+		return
+	}
+	if err := sessionConn.Hello(); err != nil {
+		log.Debugf("StatusNotifierWatcher: XEmbed host Hello failed: %v", err)
+		_ = sessionConn.Close()
+		return
+	}
+
+	host, err := newXembedHost(sessionConn, busName, objPath)
+	if err != nil {
+		log.Debugf("StatusNotifierWatcher: XEmbed host not started: %v", err)
+		return
+	}
+
+	w.hosts[busName] = host
+	go host.run()
+	log.Infof("StatusNotifierWatcher: XEmbed tray icon created for %s", busName)
+}
+
+// startStatusNotifierWatcher claims org.kde.StatusNotifierWatcher on the
+// session bus if it is not already provided by another process.
+// Safe to call unconditionally — it does nothing when a real watcher is present.
+func startStatusNotifierWatcher() {
+	conn, err := dbus.SessionBusPrivate()
+	if err != nil {
+		log.Debugf("StatusNotifierWatcher: cannot open private session bus: %v", err)
+		return
+	}
+	if err := conn.Auth(nil); err != nil {
+		log.Debugf("StatusNotifierWatcher: auth failed: %v", err)
+		_ = conn.Close()
+		return
+	}
+	if err := conn.Hello(); err != nil {
+		log.Debugf("StatusNotifierWatcher: Hello failed: %v", err)
+		_ = conn.Close()
+		return
+	}
+
+	// Check whether another process already owns the watcher name.
+	var owner string
+	callErr := conn.BusObject().Call("org.freedesktop.DBus.GetNameOwner", 0, watcherName).Store(&owner)
+	if callErr == nil && owner != "" {
+		log.Debugf("StatusNotifierWatcher: already owned by %s, skipping", owner)
+		_ = conn.Close()
+		return
+	}
+
+	reply, err := conn.RequestName(watcherName, dbus.NameFlagDoNotQueue)
+	if err != nil || reply != dbus.RequestNameReplyPrimaryOwner {
+		log.Debugf("StatusNotifierWatcher: could not claim name (reply=%v err=%v)", reply, err)
+		_ = conn.Close()
+		return
+	}
+
+	w := &statusNotifierWatcher{
+		conn:  conn,
+		hosts: make(map[string]*xembedHost),
+	}
+	if err := conn.ExportAll(w, dbus.ObjectPath(watcherPath), watcherIface); err != nil {
+		log.Errorf("StatusNotifierWatcher: export failed: %v", err)
+		_ = conn.Close()
+		return
+	}
+
+	log.Infof("StatusNotifierWatcher: active on session bus (enables tray on minimal WMs)")
+	// Connection intentionally kept open for the lifetime of the process.
+}

client/uiwails/tray_watcher_other.go

@@ -0,0 +1,6 @@
+//go:build !linux || (linux && 386)
+
+package main
+
+// startStatusNotifierWatcher is a no-op on non-Linux platforms.
+func startStatusNotifierWatcher() {}

client/uiwails/util.go

@@ -0,0 +1,13 @@
+//go:build !(linux && 386)
+
+package main
+
+import (
+	"context"
+	"time"
+)
+
+// defaultContext returns a context with the given timeout.
+func defaultContext(timeout time.Duration) (context.Context, context.CancelFunc) {
+	return context.WithTimeout(context.Background(), timeout)
+}

client/uiwails/wails.json

@@ -0,0 +1,8 @@
+{
+  "name": "netbird-ui",
+  "outputfilename": "netbird-ui",
+  "frontend:install": "npm install",
+  "frontend:build": "npm run build",
+  "frontend:dev:watcher": "npm run dev",
+  "frontend:dev:serverurl": "auto"
+}

client/uiwails/xembed_host_linux.go

@@ -0,0 +1,393 @@
+//go:build linux && !(linux && 386)
+
+package main
+
+/*
+#cgo pkg-config: x11 gtk+-3.0
+#cgo LDFLAGS: -lX11
+#include "xembed_tray_linux.h"
+#include <X11/Xlib.h>
+#include <stdlib.h>
+*/
+import "C"
+
+import (
+	"errors"
+	"sync"
+	"time"
+	"unsafe"
+
+	"github.com/godbus/dbus/v5"
+	log "github.com/sirupsen/logrus"
+)
+
+// activeMenuHost is the xembedHost that currently owns the popup menu.
+// This is needed because C callbacks cannot carry Go pointers.
+var (
+	activeMenuHost   *xembedHost
+	activeMenuHostMu sync.Mutex
+)
+
+//export goMenuItemClicked
+func goMenuItemClicked(id C.int) {
+	activeMenuHostMu.Lock()
+	h := activeMenuHost
+	activeMenuHostMu.Unlock()
+
+	if h != nil {
+		go h.sendMenuEvent(int32(id))
+	}
+}
+
+// xembedHost manages one XEmbed tray icon for an SNI item.
+type xembedHost struct {
+	conn    *dbus.Conn
+	busName string
+	objPath dbus.ObjectPath
+
+	dpy      *C.Display
+	trayMgr  C.Window
+	iconWin  C.Window
+	iconSize int
+
+	mu       sync.Mutex
+	iconData []byte
+	iconW    int
+	iconH    int
+
+	stopCh chan struct{}
+}
+
+// newXembedHost creates an XEmbed tray icon for the given SNI item.
+// Returns an error if no XEmbed tray manager is available (graceful fallback).
+func newXembedHost(conn *dbus.Conn, busName string, objPath dbus.ObjectPath) (*xembedHost, error) {
+	dpy := C.XOpenDisplay(nil)
+	if dpy == nil {
+		return nil, errors.New("cannot open X display")
+	}
+
+	screen := C.xembed_default_screen(dpy)
+	trayMgr := C.xembed_find_tray(dpy, screen)
+	if trayMgr == 0 {
+		C.XCloseDisplay(dpy)
+		return nil, errors.New("no XEmbed system tray found")
+	}
+
+	// Query the tray manager's preferred icon size.
+	iconSize := int(C.xembed_get_icon_size(dpy, trayMgr))
+	if iconSize <= 0 {
+		iconSize = 24 // fallback
+	}
+
+	iconWin := C.xembed_create_icon(dpy, screen, C.int(iconSize), trayMgr)
+	if iconWin == 0 {
+		C.XCloseDisplay(dpy)
+		return nil, errors.New("failed to create icon window")
+	}
+
+	if C.xembed_dock(dpy, trayMgr, iconWin) != 0 {
+		C.xembed_destroy_icon(dpy, iconWin)
+		C.XCloseDisplay(dpy)
+		return nil, errors.New("failed to dock icon")
+	}
+
+	h := &xembedHost{
+		conn:     conn,
+		busName:  busName,
+		objPath:  objPath,
+		dpy:      dpy,
+		trayMgr:  trayMgr,
+		iconWin:  iconWin,
+		iconSize: iconSize,
+		stopCh:   make(chan struct{}),
+	}
+
+	h.fetchAndDrawIcon()
+	return h, nil
+}
+
+// fetchAndDrawIcon reads IconPixmap from the SNI item via D-Bus and draws it.
+func (h *xembedHost) fetchAndDrawIcon() {
+	obj := h.conn.Object(h.busName, h.objPath)
+	variant, err := obj.GetProperty("org.kde.StatusNotifierItem.IconPixmap")
+	if err != nil {
+		log.Debugf("xembed: failed to get IconPixmap: %v", err)
+		return
+	}
+
+	// IconPixmap is []struct{W, H int32; Pix []byte} on D-Bus,
+	// represented as a(iiay) signature.
+	type px struct {
+		W   int32
+		H   int32
+		Pix []byte
+	}
+
+	var icons []px
+	if err := variant.Store(&icons); err != nil {
+		log.Debugf("xembed: failed to decode IconPixmap: %v", err)
+		return
+	}
+
+	if len(icons) == 0 {
+		log.Debug("xembed: IconPixmap is empty")
+		return
+	}
+
+	icon := icons[0]
+	if icon.W <= 0 || icon.H <= 0 || len(icon.Pix) < int(icon.W*icon.H*4) {
+		log.Debug("xembed: invalid IconPixmap data")
+		return
+	}
+
+	h.mu.Lock()
+	h.iconData = icon.Pix
+	h.iconW = int(icon.W)
+	h.iconH = int(icon.H)
+	h.mu.Unlock()
+
+	h.drawIcon()
+}
+
+// drawIcon draws the cached icon data onto the X11 window.
+func (h *xembedHost) drawIcon() {
+	h.mu.Lock()
+	data := h.iconData
+	w := h.iconW
+	ht := h.iconH
+	h.mu.Unlock()
+
+	if data == nil || w <= 0 || ht <= 0 {
+		return
+	}
+
+	cData := C.CBytes(data)
+	defer C.free(cData)
+
+	C.xembed_draw_icon(h.dpy, h.iconWin, C.int(h.iconSize),
+		(*C.uchar)(cData), C.int(w), C.int(ht))
+}
+
+// run is the main event loop. It polls X11 events and listens for D-Bus
+// NewIcon signals to keep the tray icon updated.
+func (h *xembedHost) run() {
+	// Subscribe to NewIcon signals from the SNI item.
+	matchRule := "type='signal',interface='org.kde.StatusNotifierItem',member='NewIcon',sender='" + h.busName + "'"
+	if err := h.conn.BusObject().Call("org.freedesktop.DBus.AddMatch", 0, matchRule).Err; err != nil {
+		log.Debugf("xembed: failed to add signal match: %v", err)
+	}
+
+	sigCh := make(chan *dbus.Signal, 16)
+	h.conn.Signal(sigCh)
+	defer h.conn.RemoveSignal(sigCh)
+
+	ticker := time.NewTicker(50 * time.Millisecond)
+	defer ticker.Stop()
+
+	for {
+		select {
+		case <-h.stopCh:
+			return
+
+		case sig := <-sigCh:
+			if sig == nil {
+				continue
+			}
+			if sig.Name == "org.kde.StatusNotifierItem.NewIcon" {
+				h.fetchAndDrawIcon()
+			}
+
+		case <-ticker.C:
+			var outX, outY C.int
+			result := C.xembed_poll_event(h.dpy, h.iconWin, &outX, &outY)
+
+			switch result {
+			case 1: // left click
+				go h.activate(int32(outX), int32(outY))
+			case 2: // right click
+				log.Infof("xembed: right-click at (%d, %d)", int(outX), int(outY))
+				go h.contextMenu(int32(outX), int32(outY))
+			case 3: // expose
+				h.drawIcon()
+			case 4: // configure (resize)
+				newSize := int(outX)
+				if newSize > 0 && newSize != h.iconSize {
+					h.iconSize = newSize
+					h.drawIcon()
+				}
+			case -1: // tray died
+				log.Info("xembed: tray manager destroyed, cleaning up")
+				return
+			}
+		}
+	}
+}
+
+func (h *xembedHost) activate(x, y int32) {
+	obj := h.conn.Object(h.busName, h.objPath)
+	if err := obj.Call("org.kde.StatusNotifierItem.Activate", 0, x, y).Err; err != nil {
+		log.Debugf("xembed: Activate call failed: %v", err)
+	}
+}
+
+func (h *xembedHost) contextMenu(x, y int32) {
+	// Read the menu path from the SNI item's Menu property.
+	menuPath := dbus.ObjectPath("/StatusNotifierMenu")
+
+	// Fetch menu layout from com.canonical.dbusmenu.
+	menuObj := h.conn.Object(h.busName, menuPath)
+	var revision uint32
+	var layout dbusMenuLayout
+	err := menuObj.Call("com.canonical.dbusmenu.GetLayout", 0,
+		int32(0),   // parentId (root)
+		int32(-1),  // recursionDepth (all)
+		[]string{}, // propertyNames (all)
+	).Store(&revision, &layout)
+	if err != nil {
+		log.Debugf("xembed: GetLayout failed: %v", err)
+		return
+	}
+
+	items := h.flattenMenu(layout)
+	log.Infof("xembed: menu has %d items (revision %d)", len(items), revision)
+	for i, mi := range items {
+		log.Infof("xembed: menu[%d] id=%d label=%q sep=%v check=%v", i, mi.id, mi.label, mi.isSeparator, mi.isCheck)
+	}
+	if len(items) == 0 {
+		return
+	}
+
+	// Build C menu item array.
+	cItems := make([]C.xembed_menu_item, len(items))
+	cLabels := make([]*C.char, len(items)) // track for freeing
+	for i, mi := range items {
+		cItems[i].id = C.int(mi.id)
+		cItems[i].enabled = boolToInt(mi.enabled)
+		cItems[i].is_check = boolToInt(mi.isCheck)
+		cItems[i].checked = boolToInt(mi.checked)
+		cItems[i].is_separator = boolToInt(mi.isSeparator)
+		if mi.label != "" {
+			cLabels[i] = C.CString(mi.label)
+			cItems[i].label = cLabels[i]
+		}
+	}
+	defer func() {
+		for _, p := range cLabels {
+			if p != nil {
+				C.free(unsafe.Pointer(p))
+			}
+		}
+	}()
+
+	// Set the active menu host so the C callback can reach us.
+	activeMenuHostMu.Lock()
+	activeMenuHost = h
+	activeMenuHostMu.Unlock()
+
+	C.xembed_show_popup_menu(&cItems[0], C.int(len(cItems)),
+		nil, C.int(x), C.int(y))
+}
+
+// dbusMenuLayout represents a com.canonical.dbusmenu layout item.
+type dbusMenuLayout struct {
+	ID         int32
+	Properties map[string]dbus.Variant
+	Children   []dbus.Variant
+}
+
+type menuItemInfo struct {
+	id          int32
+	label       string
+	enabled     bool
+	isCheck     bool
+	checked     bool
+	isSeparator bool
+}
+
+func (h *xembedHost) flattenMenu(layout dbusMenuLayout) []menuItemInfo {
+	var items []menuItemInfo
+
+	for _, childVar := range layout.Children {
+		var child dbusMenuLayout
+		if err := dbus.Store([]interface{}{childVar.Value()}, &child); err != nil {
+			continue
+		}
+
+		mi := menuItemInfo{
+			id:      child.ID,
+			enabled: true,
+		}
+
+		if v, ok := child.Properties["type"]; ok {
+			if s, ok := v.Value().(string); ok && s == "separator" {
+				mi.isSeparator = true
+				items = append(items, mi)
+				continue
+			}
+		}
+
+		if v, ok := child.Properties["label"]; ok {
+			if s, ok := v.Value().(string); ok {
+				mi.label = s
+			}
+		}
+
+		if v, ok := child.Properties["enabled"]; ok {
+			if b, ok := v.Value().(bool); ok {
+				mi.enabled = b
+			}
+		}
+
+		if v, ok := child.Properties["visible"]; ok {
+			if b, ok := v.Value().(bool); ok && !b {
+				continue // skip hidden items
+			}
+		}
+
+		if v, ok := child.Properties["toggle-type"]; ok {
+			if s, ok := v.Value().(string); ok && s == "checkmark" {
+				mi.isCheck = true
+			}
+		}
+
+		if v, ok := child.Properties["toggle-state"]; ok {
+			if n, ok := v.Value().(int32); ok && n == 1 {
+				mi.checked = true
+			}
+		}
+
+		items = append(items, mi)
+	}
+
+	return items
+}
+
+func (h *xembedHost) sendMenuEvent(id int32) {
+	menuPath := dbus.ObjectPath("/StatusNotifierMenu")
+	menuObj := h.conn.Object(h.busName, menuPath)
+	data := dbus.MakeVariant("")
+	err := menuObj.Call("com.canonical.dbusmenu.Event", 0,
+		id, "clicked", data, uint32(0)).Err
+	if err != nil {
+		log.Debugf("xembed: menu Event call failed: %v", err)
+	}
+}
+
+func boolToInt(b bool) C.int {
+	if b {
+		return 1
+	}
+	return 0
+}
+
+func (h *xembedHost) stop() {
+	select {
+	case <-h.stopCh:
+		return // already stopped
+	default:
+		close(h.stopCh)
+	}
+
+	C.xembed_destroy_icon(h.dpy, h.iconWin)
+	C.XCloseDisplay(h.dpy)
+}