Merge main into embedded-vnc

client/ui/frontend/src/modules/auto-update/UpdateVersionCard.tsx

@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Browser } from "@wailsio/runtime";
 import { DownloadIcon, NotepadText } from "lucide-react";
+import { Update as UpdateSvc } from "@bindings/services";
 import { Button } from "@/components/buttons/Button";
 import { useClientVersion } from "@/contexts/ClientVersionContext";
 import { cn } from "@/lib/cn";
@@ -14,6 +15,12 @@ function openUrl(url: string) {
     });
 }
 
+function openInstallerDownload() {
+    UpdateSvc.DownloadURL()
+        .then(openUrl)
+        .catch(() => openUrl(GITHUB_RELEASES));
+}
+
 export function UpdateVersionCard() {
     const { t } = useTranslation();
     const { updateVersion, enforced, triggerUpdate } = useClientVersion();
@@ -37,11 +44,7 @@ export function UpdateVersionCard() {
                         {t("update.card.installNow")}
                     </Button>
                 ) : (
-                    <Button
-                        variant={"primary"}
-                        size={"xs"}
-                        onClick={() => openUrl(GITHUB_RELEASES)}
-                    >
+                    <Button variant={"primary"} size={"xs"} onClick={openInstallerDownload}>
                         <DownloadIcon size={14} />
                         {t("update.card.getInstaller")}
                     </Button>

client/ui/frontend/src/modules/error/ErrorDialog.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
 import { AlertCircleIcon } from "lucide-react";
 import { Button } from "@/components/buttons/Button";
+import { CopyToClipboard } from "@/components/CopyToClipboard";
 import { ConfirmDialog } from "@/components/dialog/ConfirmDialog";
 import { DialogActions } from "@/components/dialog/DialogActions";
 import { DialogDescription } from "@/components/dialog/DialogDescription";
@@ -12,14 +13,22 @@ import { WindowManager } from "@bindings/services";
 import { useAutoSizeWindow } from "@/hooks/useAutoSizeWindow";
 
 const WINDOW_WIDTH = 380;
+// A command needs the room to wrap at a sensible number of characters instead of
+// breaking every few words.
+const WINDOW_WIDTH_WITH_COMMAND = 460;
 
 export default function ErrorDialog() {
     const { t } = useTranslation();
-    const contentRef = useAutoSizeWindow<HTMLDivElement>(WINDOW_WIDTH);
     const [params] = useSearchParams();
 
     const title = params.get("title") || t("window.title.error");
     const message = params.get("message") || "";
+    // Set when the daemon refused an operation that needs elevated privileges:
+    // the command that performs it, offered for copying.
+    const command = params.get("command") || "";
+    const contentRef = useAutoSizeWindow<HTMLDivElement>(
+        command ? WINDOW_WIDTH_WITH_COMMAND : WINDOW_WIDTH,
+    );
 
     const close = useCallback(() => {
         WindowManager.CloseError().catch(console.error);
@@ -37,15 +46,37 @@ export default function ErrorDialog() {
         <ConfirmDialog ref={contentRef} aria-labelledby={"nb-error-dialog-title"}>
             <SquareIcon icon={AlertCircleIcon} variant={"danger"} />
 
-            <div className={"flex flex-col items-center gap-1"}>
+            <div className={"flex w-full flex-col items-center gap-1"}>
                 <DialogHeading id={"nb-error-dialog-title"} className={"text-balance"}>
                     {title}
                 </DialogHeading>
                 {message && (
                     <DialogDescription className={"text-balance"}>
-                        <span className={"whitespace-pre-wrap break-words"}>{message}</span>
+                        {/* select-text: the message often names a path, a flag or an
+                            address the user needs to act on. */}
+                        <span className={"select-text whitespace-pre-wrap break-words"}>
+                            {message}
+                        </span>
                     </DialogDescription>
                 )}
+                {command && (
+                    <CopyToClipboard
+                        message={command}
+                        alwaysShowIcon
+                        wrap
+                        variant={"bright"}
+                        className={
+                            "mt-2 w-full items-start gap-2 rounded-md bg-nb-gray-930 px-3 py-2 text-left"
+                        }
+                        aria-label={t("common.copy")}
+                    >
+                        <code
+                            className={"select-text break-all font-mono text-xs text-nb-gray-200"}
+                        >
+                            {command}
+                        </code>
+                    </CopyToClipboard>
+                )}
             </div>
 
             <DialogActions>

client/ui/frontend/src/modules/profiles/ProfilesTab.tsx

@@ -45,7 +45,7 @@ export function ProfilesTab() {
         activeProfileId,
         loaded,
         username,
-        switchProfile,
+        switchProfileNoConnect,
         addProfile,
         removeProfile,
         renameProfile,
@@ -100,7 +100,7 @@ export function ProfilesTab() {
             confirmLabel: t("profile.switch.confirm"),
         });
         if (!ok) return;
-        await guarded(i18next.t("profile.error.switchTitle"), () => switchProfile(id));
+        await guarded(i18next.t("profile.error.switchTitle"), () => switchProfileNoConnect(id));
     };
 
     const handleDeregister = async (id: string, name: string) => {
@@ -129,14 +129,13 @@ export function ProfilesTab() {
         await guarded(i18next.t("profile.error.createTitle"), async () => {
             const id = await addProfile(name);
             // SetConfig is keyed by the new profile's ID, so it writes the
-            // not-yet-active profile. Write before switching so any reconnect
-            // targets the right deployment.
+            // not-yet-active profile before the switch makes it current.
             if (!isNetbirdCloud(managementUrl)) {
                 await SettingsSvc.SetConfig(
                     new SetConfigParams({ profileName: id, username, managementUrl }),
                 );
             }
-            await switchProfile(id);
+            await switchProfileNoConnect(id);
         });
     };
 

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

@@ -73,6 +73,13 @@ export default function SessionExpirationDialog() {
 
         let offCancel: (() => void) | undefined;
 
+        // Return the dialog to its interactive state and dismiss the browser popup
+        const resetDialog = () => {
+            offCancel?.();
+            WindowManager.CloseBrowserLogin().catch(console.error);
+            setBusy(false);
+        };
+
         try {
             const start = await Session.RequestExtend({ hint: "" });
             const uri = start.verificationUriComplete || start.verificationUri;
@@ -105,25 +112,22 @@ export default function SessionExpirationDialog() {
             if (outcome.kind === "cancel") {
                 waitPromise.cancel?.();
                 waitPromise.catch(() => {});
+                resetDialog();
                 return;
             }
 
             // Another surface owns this flow; keep the dialog open to retry.
             if (outcome.result.preempted) {
+                resetDialog();
                 return;
             }
-
-            // Close before the popup so the restore can't flash this window back.
-            WindowManager.CloseSessionExpiration().catch(console.error);
+            WindowManager.CloseRenewFlow().catch(console.error);
         } catch (e) {
+            resetDialog();
             await errorDialog({
                 Title: t("sessionExpiration.extendFailedTitle"),
                 Message: formatErrorMessage(e),
             });
-        } finally {
-            offCancel?.();
-            WindowManager.CloseBrowserLogin().catch(console.error);
-            setBusy(false);
         }
     }, [busy, t]);
 
@@ -139,12 +143,11 @@ export default function SessionExpirationDialog() {
             });
             WindowManager.CloseSessionExpiration().catch(console.error);
         } catch (e) {
+            setBusy(false);
             await errorDialog({
                 Title: t("sessionExpiration.logoutFailedTitle"),
                 Message: formatErrorMessage(e),
             });
-        } finally {
-            setBusy(false);
         }
     }, [busy, t]);
 

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

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import { CopyToClipboard } from "@/components/CopyToClipboard";
 import FancyToggleSwitch from "@/components/switches/FancyToggleSwitch";
 import { HelpText } from "@/components/typography/HelpText";
 import { Input } from "@/components/inputs/Input";
@@ -6,12 +7,50 @@ import { Label } from "@/components/typography/Label";
 import { cn } from "@/lib/cn";
 import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
 import { useSettings } from "@/contexts/SettingsContext.tsx";
-import { type ChangeEvent, useEffect, useId, useState } from "react";
+import { usePrivilege } from "@/hooks/usePrivilege.ts";
+import { Privilege } from "@bindings/services/models.js";
+import { type ChangeEvent, type ReactNode, useEffect, useId, useState } from "react";
 
 export function SettingsSSH() {
     const { t } = useTranslation();
     const { config, setField } = useSettings();
+    const privilege = usePrivilege();
     const isSSHServerEnabled = config.serverSshAllowed;
+
+    // The daemon restricts only the direction that hands out shells from a process
+    // running as root. So for an unprivileged user a guarded control is either
+    // unavailable (it is off and only they could turn it on) or a one-way switch
+    // (it is on, they may turn it off, but not back on) — say which, either way.
+    //
+    // A null privilege means we could not determine it: leave the control alone
+    // rather than greying it out with nothing to explain why. The daemon enforces
+    // this regardless, and a rejected save reports its own guidance.
+    const guarded = (
+        guardedDirectionActive: boolean,
+        command: (p: Privilege) => string,
+        // inverted marks a control whose guarded direction is switching it off, so
+        // the one-way warning has to read the other way round.
+        inverted = false,
+    ) => {
+        if (!privilege || privilege.privileged) {
+            return { disabled: false, hint: undefined };
+        }
+        const hint = (
+            <PrivilegeHint
+                actor={privilege.actor}
+                command={command(privilege)}
+                oneWay={guardedDirectionActive}
+                inverted={inverted}
+            />
+        );
+        return { disabled: !guardedDirectionActive, hint };
+    };
+
+    const sshServer = guarded(config.serverSshAllowed, (p) => p.allowSshServer);
+    const sshRoot = guarded(config.enableSshRoot, (p) => p.enableSshRoot);
+    // Inverted control: the guarded direction is switching authentication off, so
+    // it is the already-disabled state that is the one-way one.
+    const sshAuth = guarded(config.disableSshAuth, (p) => p.disableSshAuth, true);
     const jwtTtlId = useId();
     const [jwtTtlInput, setJwtTtlInput] = useState(String(config.sshJwtCacheTtl));
 
@@ -46,9 +85,11 @@ export function SettingsSSH() {
                 <FancyToggleSwitch
                     value={config.serverSshAllowed}
                     onChange={(v) => setField("serverSshAllowed", v)}
+                    disabled={sshServer.disabled}
                     label={t("settings.ssh.server.label")}
                     helpText={t("settings.ssh.server.help")}
                 />
+                {sshServer.hint}
             </SectionGroup>
 
             <SectionGroup
@@ -58,9 +99,11 @@ export function SettingsSSH() {
                 <FancyToggleSwitch
                     value={config.enableSshRoot}
                     onChange={(v) => setField("enableSshRoot", v)}
+                    disabled={sshRoot.disabled}
                     label={t("settings.ssh.root.label")}
                     helpText={t("settings.ssh.root.help")}
                 />
+                {sshRoot.hint}
                 <FancyToggleSwitch
                     value={config.enableSshSftp}
                     onChange={(v) => setField("enableSshSftp", v)}
@@ -88,9 +131,11 @@ export function SettingsSSH() {
                 <FancyToggleSwitch
                     value={!config.disableSshAuth}
                     onChange={(v) => setField("disableSshAuth", !v)}
+                    disabled={sshAuth.disabled}
                     label={t("settings.ssh.jwt.label")}
                     helpText={t("settings.ssh.jwt.help")}
                 />
+                {sshAuth.hint}
                 <div
                     className={cn(
                         "flex items-center justify-between gap-6",
@@ -117,3 +162,42 @@ export function SettingsSSH() {
         </>
     );
 }
+
+// PrivilegeHint explains what an unprivileged user can and cannot do with a
+// guarded control, and offers the command that does it with the privileges the
+// daemon requires. oneWay covers the control being in the guarded state already:
+// switching it back is the part that needs privileges.
+function PrivilegeHint({
+    actor,
+    command,
+    oneWay,
+    inverted,
+}: {
+    actor: string;
+    command: string;
+    oneWay: boolean;
+    inverted: boolean;
+}): ReactNode {
+    const { t } = useTranslation();
+    if (!command) return null;
+    return (
+        <div
+            className={
+                "-mt-2 flex flex-col gap-1 rounded-md bg-nb-gray-930 px-3 py-2 text-xs text-nb-gray-300"
+            }
+        >
+            <span>
+                {!oneWay
+                    ? t("settings.ssh.privilege.hint", { actor })
+                    : inverted
+                      ? t("settings.ssh.privilege.oneWayInverted", { actor })
+                      : t("settings.ssh.privilege.oneWay", { actor })}
+            </span>
+            <CopyToClipboard message={command} alwaysShowIcon wrap variant={"bright"}>
+                <code className={"select-text break-all font-mono text-xs text-nb-gray-200"}>
+                    {command}
+                </code>
+            </CopyToClipboard>
+        </div>
+    );
+}

client/ui/frontend/src/modules/welcome/WelcomeStepTray.tsx

@@ -22,6 +22,9 @@ type WelcomeStepTrayProps = {
 export function WelcomeStepTray({ onContinue }: Readonly<WelcomeStepTrayProps>) {
     const { t } = useTranslation();
     const trayScreenshot = trayScreenshotForOS();
+    // macOS has no tray — the icon sits in the menu bar, so the copy says so.
+    const titleKey = isMacOS() ? "welcome.titleMac" : "welcome.title";
+    const descriptionKey = isMacOS() ? "welcome.descriptionMac" : "welcome.description";
 
     return (
         <>
@@ -36,9 +39,9 @@ export function WelcomeStepTray({ onContinue }: Readonly<WelcomeStepTrayProps>)
 
             <div className={"flex w-full flex-col gap-1"}>
                 <DialogHeading id={"nb-welcome-title"} align={"left"}>
-                    {t("welcome.title")}
+                    {t(titleKey)}
                 </DialogHeading>
-                <DialogDescription align={"left"}>{t("welcome.description")}</DialogDescription>
+                <DialogDescription align={"left"}>{t(descriptionKey)}</DialogDescription>
             </div>
 
             <DialogActions>