diff --git a/desktop/public/pow/LICENSE.txt b/desktop/public/pow/LICENSE.txt
new file mode 100644
index 000000000..b0d56df20
--- /dev/null
+++ b/desktop/public/pow/LICENSE.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Emerge Tools, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/desktop/public/pow/plop.m4a b/desktop/public/pow/plop.m4a
new file mode 100644
index 000000000..593f4e8b7
Binary files /dev/null and b/desktop/public/pow/plop.m4a differ
diff --git a/desktop/public/pow/poof1@3x.png b/desktop/public/pow/poof1@3x.png
new file mode 100644
index 000000000..48b5166c1
Binary files /dev/null and b/desktop/public/pow/poof1@3x.png differ
diff --git a/desktop/public/pow/poof2@3x.png b/desktop/public/pow/poof2@3x.png
new file mode 100644
index 000000000..2e1d6f269
Binary files /dev/null and b/desktop/public/pow/poof2@3x.png differ
diff --git a/desktop/public/pow/poof3@3x.png b/desktop/public/pow/poof3@3x.png
new file mode 100644
index 000000000..a8d303e15
Binary files /dev/null and b/desktop/public/pow/poof3@3x.png differ
diff --git a/desktop/public/pow/poof4@3x.png b/desktop/public/pow/poof4@3x.png
new file mode 100644
index 000000000..5ab8dc528
Binary files /dev/null and b/desktop/public/pow/poof4@3x.png differ
diff --git a/desktop/public/pow/poof5@3x.png b/desktop/public/pow/poof5@3x.png
new file mode 100644
index 000000000..b4d05aff9
Binary files /dev/null and b/desktop/public/pow/poof5@3x.png differ
diff --git a/desktop/src-tauri/src/commands/mod.rs b/desktop/src-tauri/src/commands/mod.rs
index 2f7c343dc..9f61a4063 100644
--- a/desktop/src-tauri/src/commands/mod.rs
+++ b/desktop/src-tauri/src/commands/mod.rs
@@ -23,6 +23,7 @@ mod profile;
 mod relay_members;
 mod social;
 mod teams;
+mod warp;
 mod workflows;
 mod workspace;
 
@@ -49,5 +50,6 @@ pub use profile::*;
 pub use relay_members::*;
 pub use social::*;
 pub use teams::*;
+pub use warp::*;
 pub use workflows::*;
 pub use workspace::*;
diff --git a/desktop/src-tauri/src/commands/warp.rs b/desktop/src-tauri/src/commands/warp.rs
new file mode 100644
index 000000000..13cac3ef6
--- /dev/null
+++ b/desktop/src-tauri/src/commands/warp.rs
@@ -0,0 +1,58 @@
+use std::io;
+use std::process::{Command, Output};
+
+type CmdResult<T> = Result<T, String>;
+
+const WARP_CLI_CANDIDATES: &[&str] = &[
+    "warp-cli",
+    "/Applications/Cloudflare WARP.app/Contents/Resources/warp-cli",
+];
+
+fn handle_warp_cli_output(command: &str, args: &[&str], output: Output) -> CmdResult<()> {
+    if output.status.success() {
+        return Ok(());
+    }
+
+    let stderr = String::from_utf8_lossy(&output.stderr);
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    let details = stderr.trim();
+    let details = if details.is_empty() {
+        stdout.trim()
+    } else {
+        details
+    };
+
+    if details.is_empty() {
+        Err(format!("{command} {} failed.", args.join(" ")))
+    } else {
+        Err(format!("{command} {} failed: {details}", args.join(" ")))
+    }
+}
+
+fn run_warp_cli(args: &[&str]) -> CmdResult<()> {
+    for command in WARP_CLI_CANDIDATES {
+        let output = match Command::new(command).args(args).output() {
+            Ok(output) => output,
+            Err(error) if error.kind() == io::ErrorKind::NotFound => continue,
+            Err(error) => return Err(format!("Failed to run {command}: {error}")),
+        };
+
+        return handle_warp_cli_output(command, args, output);
+    }
+
+    Err("Cloudflare WARP CLI is not installed or is not on PATH.".to_string())
+}
+
+#[tauri::command]
+pub async fn connect_warp_vpn() -> CmdResult<()> {
+    tokio::task::spawn_blocking(|| run_warp_cli(&["connect"]))
+        .await
+        .map_err(|error| format!("Failed to run WARP command: {error}"))?
+}
+
+#[tauri::command]
+pub async fn refresh_warp_access() -> CmdResult<()> {
+    tokio::task::spawn_blocking(|| run_warp_cli(&["debug", "access-reauth"]))
+        .await
+        .map_err(|error| format!("Failed to run WARP command: {error}"))?
+}
diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index 47b0e3e6b..648ae610c 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -835,6 +835,8 @@ pub fn run() {
             cancel_pairing,
             apply_workspace,
             get_active_workspace,
+            connect_warp_vpn,
+            refresh_warp_access,
             set_prevent_sleep_active,
             get_agent_memory,
         ])
diff --git a/desktop/src/app/AppShell.tsx b/desktop/src/app/AppShell.tsx
index 81cd477f5..5a15143cf 100644
--- a/desktop/src/app/AppShell.tsx
+++ b/desktop/src/app/AppShell.tsx
@@ -75,7 +75,6 @@ import { MainInsetProvider } from "@/shared/layout/MainInsetContext";
 import { chromeCssVarDefaults } from "@/shared/layout/chromeLayout";
 import { hasPrimaryShortcutModifier } from "@/shared/lib/platform";
 import { useMessageDeepLinks } from "@/shared/useMessageDeepLinks";
-import { ConnectionBanner } from "@/shared/ui/ConnectionBanner";
 import { SidebarInset, SidebarProvider } from "@/shared/ui/sidebar";
 
 type AppView =
@@ -941,7 +940,6 @@ export function AppShell() {
                         className="min-h-0 min-w-0 overflow-hidden"
                         style={chromeCssVarDefaults}
                       >
-                        <ConnectionBanner />
                         <Outlet />
                       </SidebarInset>
                     </MainInsetProvider>
diff --git a/desktop/src/features/onboarding/ui/ProfileStep.tsx b/desktop/src/features/onboarding/ui/ProfileStep.tsx
index 9236f9e8b..29392897e 100644
--- a/desktop/src/features/onboarding/ui/ProfileStep.tsx
+++ b/desktop/src/features/onboarding/ui/ProfileStep.tsx
@@ -1,6 +1,17 @@
 import * as React from "react";
+import { toast } from "sonner";
 
+import {
+  SidebarBlockAccessRefreshCompactCard,
+  SidebarBlockVpnOffCompactCard,
+} from "@/features/sidebar/ui/SidebarRelayConnectionCard";
+import { connectWarpVpn, refreshWarpAccess } from "@/shared/api/warp";
+import { useReconnectRelay } from "@/shared/api/useReconnectRelay";
 import { cn } from "@/shared/lib/cn";
+import {
+  isRelayUnreachableError,
+  relayErrorDetail,
+} from "@/shared/lib/relayError";
 import { Button } from "@/shared/ui/button";
 import { Spinner } from "@/shared/ui/spinner";
 import {
@@ -17,11 +28,152 @@ type ProfileStepProps = {
   state: ProfileStepState;
 };
 
+type OnboardingConnectivityAction = "connect-vpn" | "refresh-access";
+
+const ONBOARDING_CONNECTIVITY_SUCCESS_AUTO_DISMISS_MS = 2_500;
+
+function shouldRefreshVpnAccess(errorMessage: string) {
+  const detail = relayErrorDetail(errorMessage).toLowerCase();
+  return (
+    detail.includes("cloudflare") ||
+    detail.includes("access") ||
+    detail.includes("sign-in") ||
+    detail.includes("re-authenticate") ||
+    detail.includes("reauth") ||
+    detail.includes("proxy")
+  );
+}
+
+function OnboardingRelayConnectionErrorCard({ message }: { message: string }) {
+  const { isPending: isReconnectPending, reconnect } = useReconnectRelay();
+  const [dismissedErrorMessage, setDismissedErrorMessage] = React.useState<
+    string | null
+  >(null);
+  const [connectivityAction, setConnectivityAction] =
+    React.useState<OnboardingConnectivityAction | null>(null);
+  const [successAction, setSuccessAction] =
+    React.useState<OnboardingConnectivityAction | null>(null);
+  const connectivityActionRef =
+    React.useRef<OnboardingConnectivityAction | null>(null);
+  const successTimeoutRef = React.useRef<number | null>(null);
+  const isRefreshAccessCard = shouldRefreshVpnAccess(message);
+  const isActionPending = connectivityAction !== null || isReconnectPending;
+
+  React.useEffect(() => {
+    return () => {
+      if (successTimeoutRef.current !== null) {
+        window.clearTimeout(successTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const markSuccess = React.useCallback(
+    (action: OnboardingConnectivityAction) => {
+      setSuccessAction(action);
+      if (successTimeoutRef.current !== null) {
+        window.clearTimeout(successTimeoutRef.current);
+      }
+      successTimeoutRef.current = window.setTimeout(() => {
+        successTimeoutRef.current = null;
+        setDismissedErrorMessage(message);
+      }, ONBOARDING_CONNECTIVITY_SUCCESS_AUTO_DISMISS_MS);
+    },
+    [message],
+  );
+
+  const runConnectivityAction = React.useCallback(
+    (
+      action: OnboardingConnectivityAction,
+      runAction: () => Promise<boolean | undefined>,
+    ) => {
+      if (connectivityActionRef.current !== null) {
+        return;
+      }
+
+      connectivityActionRef.current = action;
+      setConnectivityAction(action);
+      setSuccessAction(null);
+      void Promise.resolve()
+        .then(runAction)
+        .then((didReconnect) => {
+          if (didReconnect !== false) {
+            markSuccess(action);
+          }
+        })
+        .catch((error) => {
+          const detail = error instanceof Error ? error.message : String(error);
+          const label =
+            action === "refresh-access"
+              ? "Could not refresh VPN access."
+              : "Could not turn on VPN.";
+          toast.error(`${label} ${detail}`);
+        })
+        .finally(() => {
+          connectivityActionRef.current = null;
+          setConnectivityAction(null);
+        });
+    },
+    [markSuccess],
+  );
+
+  const handleConnectWarpVpn = React.useCallback(() => {
+    runConnectivityAction("connect-vpn", async () => {
+      await connectWarpVpn();
+      return reconnect();
+    });
+  }, [reconnect, runConnectivityAction]);
+
+  const handleRefreshWarpAccess = React.useCallback(() => {
+    runConnectivityAction("refresh-access", async () => {
+      await refreshWarpAccess();
+      return reconnect();
+    });
+  }, [reconnect, runConnectivityAction]);
+
+  if (dismissedErrorMessage === message) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-4 left-4 z-50 w-[calc(100vw-2rem)] text-left sm:bottom-6 sm:left-6 sm:w-[22rem]">
+      {isRefreshAccessCard ? (
+        <SidebarBlockAccessRefreshCompactCard
+          actionTestId="onboarding-refresh-vpn-access"
+          isActionDisabled={isActionPending}
+          isActionPending={connectivityAction === "refresh-access"}
+          isActionSuccess={successAction === "refresh-access"}
+          onAction={handleRefreshWarpAccess}
+          onDismiss={() => setDismissedErrorMessage(message)}
+          surface="secondary"
+          testId="onboarding-vpn-access-refresh-card"
+        />
+      ) : (
+        <SidebarBlockVpnOffCompactCard
+          actionTestId="onboarding-connect-vpn"
+          isActionDisabled={isActionPending}
+          isActionPending={connectivityAction === "connect-vpn"}
+          isActionSuccess={successAction === "connect-vpn"}
+          onAction={handleConnectWarpVpn}
+          onDismiss={() => setDismissedErrorMessage(message)}
+          surface="secondary"
+          testId="onboarding-vpn-off-card"
+        />
+      )}
+    </div>
+  );
+}
+
 function ErrorBanner({ message }: { message: string | null }) {
   if (!message) {
     return null;
   }
 
+  if (isRelayUnreachableError(message)) {
+    return (
+      <OnboardingRelayConnectionErrorCard key={message} message={message} />
+    );
+  }
+
   return (
     <p className="mt-4 rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
       {message}
diff --git a/desktop/src/features/settings/SidebarUpdateCard.tsx b/desktop/src/features/settings/SidebarUpdateCard.tsx
new file mode 100644
index 000000000..71ed7aa2f
--- /dev/null
+++ b/desktop/src/features/settings/SidebarUpdateCard.tsx
@@ -0,0 +1,100 @@
+import * as React from "react";
+import { CircleArrowUp, Loader2 } from "lucide-react";
+
+import { useUpdaterContext } from "./hooks/UpdaterProvider";
+import { shouldShowSidebarUpdateCard } from "./sidebarUpdateCardVisibility";
+import { SidebarCompactActionCard } from "@/shared/ui/sidebar-action-card";
+
+type SidebarUpdateCardProps = {
+  onDismiss: () => void;
+};
+
+type SidebarUpdateCompactCardProps = SidebarUpdateCardProps & {
+  actionTestId?: string;
+  testId?: string;
+};
+
+export function SidebarUpdateCompactCard({
+  actionTestId,
+  onDismiss,
+  testId = "sidebar-update-card-compact",
+}: SidebarUpdateCompactCardProps) {
+  const { relaunch } = useUpdaterContext();
+  const [isRestartPending, setIsRestartPending] = React.useState(false);
+  const restartPendingRef = React.useRef(false);
+  const restartFrameRef = React.useRef<number | null>(null);
+  const restartTimeoutRef = React.useRef<number | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (restartFrameRef.current !== null) {
+        window.cancelAnimationFrame(restartFrameRef.current);
+      }
+      if (restartTimeoutRef.current !== null) {
+        window.clearTimeout(restartTimeoutRef.current);
+      }
+      restartPendingRef.current = false;
+    };
+  }, []);
+
+  const handleRestart = React.useCallback(() => {
+    if (restartPendingRef.current) {
+      return;
+    }
+
+    restartPendingRef.current = true;
+    setIsRestartPending(true);
+    restartFrameRef.current = window.requestAnimationFrame(() => {
+      restartFrameRef.current = null;
+      restartTimeoutRef.current = window.setTimeout(() => {
+        restartTimeoutRef.current = null;
+        void relaunch()
+          .catch((error) => {
+            console.error("[SidebarUpdateCard] relaunch failed:", error);
+          })
+          .finally(() => {
+            restartPendingRef.current = false;
+            setIsRestartPending(false);
+          });
+      }, 0);
+    });
+  }, [relaunch]);
+
+  return (
+    <SidebarCompactActionCard
+      actionAriaLabel="Restart now to apply update"
+      actionDisabled={isRestartPending}
+      actionTestId={actionTestId}
+      description={isRestartPending ? "Restarting" : "Click to restart"}
+      dismissLabel="Dismiss update notification"
+      icon={
+        isRestartPending ? (
+          <Loader2 aria-hidden="true" className="h-5 w-5 animate-spin" />
+        ) : (
+          <CircleArrowUp aria-hidden="true" className="h-5 w-5" />
+        )
+      }
+      iconKey={isRestartPending ? "pending" : "idle"}
+      onAction={handleRestart}
+      onDismiss={onDismiss}
+      testId={testId}
+      title="Ready to update!"
+    />
+  );
+}
+
+export function SidebarUpdateCard({ onDismiss }: SidebarUpdateCardProps) {
+  const { status } = useUpdaterContext();
+
+  if (!shouldShowSidebarUpdateCard(status)) {
+    return null;
+  }
+
+  return (
+    <SidebarUpdateCompactCard
+      actionTestId="sidebar-update-restart"
+      onDismiss={onDismiss}
+      testId="sidebar-update-card"
+    />
+  );
+}
diff --git a/desktop/src/features/settings/hooks/use-updater.ts b/desktop/src/features/settings/hooks/use-updater.ts
index 21c7bd46f..3b9c5e632 100644
--- a/desktop/src/features/settings/hooks/use-updater.ts
+++ b/desktop/src/features/settings/hooks/use-updater.ts
@@ -1,7 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from "react";
 import { check, type Update } from "@tauri-apps/plugin-updater";
 import { relaunch } from "@tauri-apps/plugin-process";
-import { toast } from "sonner";
 
 export type UpdateStatus =
   | { state: "idle" }
@@ -87,10 +86,6 @@ export function useUpdater() {
 
       updateRef.current = null;
       setStatus({ state: "ready" });
-      toast("Update ready", {
-        description: "Restart when you're ready to apply the update.",
-        duration: 8000,
-      });
     } catch (err) {
       setStatus({ state: "error", message: toErrorMessage(err) });
     } finally {
diff --git a/desktop/src/features/settings/sidebarUpdateCardVisibility.ts b/desktop/src/features/settings/sidebarUpdateCardVisibility.ts
new file mode 100644
index 000000000..61159f7f3
--- /dev/null
+++ b/desktop/src/features/settings/sidebarUpdateCardVisibility.ts
@@ -0,0 +1,3 @@
+export function shouldShowSidebarUpdateCard(status: { state: string }) {
+  return status.state === "ready";
+}
diff --git a/desktop/src/features/sidebar/ui/AppSidebar.tsx b/desktop/src/features/sidebar/ui/AppSidebar.tsx
index 00e8af524..71aff208d 100644
--- a/desktop/src/features/sidebar/ui/AppSidebar.tsx
+++ b/desktop/src/features/sidebar/ui/AppSidebar.tsx
@@ -9,11 +9,6 @@ import {
   PenSquare,
   Zap,
 } from "lucide-react";
-import { useReconnectRelay } from "@/shared/api/useReconnectRelay";
-import {
-  isRelayUnreachableError,
-  RELAY_UNREACHABLE_SHORT,
-} from "@/shared/lib/relayError";
 import * as React from "react";
 import { FeatureGate } from "@/shared/features";
 import { SidebarDndContext } from "@/features/sidebar/ui/SidebarDnd";
@@ -43,7 +38,12 @@ import {
 import { CreateChannelDialog } from "@/features/sidebar/ui/CreateChannelDialog";
 import { NewDirectMessageDialog } from "@/features/sidebar/ui/NewDirectMessageDialog";
 import { SidebarProfileCard } from "@/features/sidebar/ui/SidebarProfileCard";
+import { SidebarRelayConnectionCard } from "@/features/sidebar/ui/SidebarRelayConnectionCard";
+import { useSidebarRelayConnectionCard } from "@/features/sidebar/ui/useSidebarRelayConnectionCard";
 import { SECTION_ACTION_VISIBILITY_CLASS } from "@/features/sidebar/ui/sidebarSectionStyles";
+import { SidebarUpdateCard } from "@/features/settings/SidebarUpdateCard";
+import { useUpdaterContext } from "@/features/settings/hooks/UpdaterProvider";
+import { shouldShowSidebarUpdateCard } from "@/features/settings/sidebarUpdateCardVisibility";
 import type {
   Channel,
   ChannelVisibility,
@@ -222,6 +222,29 @@ export function AppSidebar({
   onStarChannel,
   onUnstarChannel,
 }: AppSidebarProps) {
+  const { status: updateStatus } = useUpdaterContext();
+  const canShowSidebarUpdateCard = shouldShowSidebarUpdateCard(updateStatus);
+  const sidebarRelayConnectionCard =
+    useSidebarRelayConnectionCard(errorMessage);
+  const [isSidebarUpdateCardDismissed, setIsSidebarUpdateCardDismissed] =
+    React.useState(false);
+  const showSidebarUpdateCard =
+    canShowSidebarUpdateCard && !isSidebarUpdateCardDismissed;
+  const sidebarFooterCardCount =
+    (sidebarRelayConnectionCard.showSidebarRelayConnectionCard ? 1 : 0) +
+    (showSidebarUpdateCard ? 1 : 0);
+  const sidebarContentBottomPaddingClass =
+    sidebarFooterCardCount >= 2
+      ? "pb-[18rem]"
+      : sidebarFooterCardCount >= 1
+        ? "pb-52"
+        : "pb-32";
+  const unreadBelowBottomClass =
+    sidebarFooterCardCount >= 2
+      ? "bottom-56"
+      : sidebarFooterCardCount >= 1
+        ? "bottom-44"
+        : "bottom-28";
   const skeletonRows = ["first", "second", "third", "fourth", "fifth", "sixth"];
   const [isNewDmOpenInternal, setIsNewDmOpenInternal] = React.useState(false);
   const isNewDmOpen = isNewDmOpenProp ?? isNewDmOpenInternal;
@@ -231,6 +254,12 @@ export function AppSidebar({
   const [createDialogKind, setCreateDialogKind] =
     React.useState<CreateChannelKind | null>(null);
 
+  React.useEffect(() => {
+    if (!canShowSidebarUpdateCard) {
+      setIsSidebarUpdateCardDismissed(false);
+    }
+  }, [canShowSidebarUpdateCard]);
+
   // Allow the create-channel dialog to be opened from outside (e.g. the
   // ⌘⇧N global shortcut in AppShell), mirroring the controlled new-DM lift.
   // When the external flag flips on, open the "stream" create dialog; the
@@ -283,8 +312,6 @@ export function AppSidebar({
     unassignChannel,
   } = useChannelSections(currentPubkey);
 
-  const { isPending: isReconnectPending, reconnect } = useReconnectRelay();
-
   const [createSectionState, setCreateSectionState] = React.useState<{
     open: boolean;
     pendingChannelId: string | null;
@@ -526,7 +553,10 @@ export function AppSidebar({
             testId="sidebar-more-unread-above"
           />
         ) : null}
-        <SidebarContent className="pb-32" ref={scrollRef}>
+        <SidebarContent
+          className={cn(sidebarContentBottomPaddingClass)}
+          ref={scrollRef}
+        >
           {isLoading ? (
             <SidebarGroup>
               <SidebarGroupLabel>Channels</SidebarGroupLabel>
@@ -726,36 +756,17 @@ export function AppSidebar({
             </>
           ) : null}
 
-          {errorMessage ? (
-            isRelayUnreachableError(errorMessage) ? (
-              <div
-                className="px-3 py-2 text-sm"
-                data-testid="sidebar-relay-unreachable"
-              >
-                <span className="text-muted-foreground">
-                  {RELAY_UNREACHABLE_SHORT}{" "}
-                </span>
-                <button
-                  className="text-primary hover:underline disabled:opacity-50"
-                  data-testid="sidebar-reconnect"
-                  disabled={isReconnectPending}
-                  onClick={() => void reconnect()}
-                  type="button"
-                >
-                  {isReconnectPending ? "Reconnecting…" : "Reconnect"}
-                </button>
-              </div>
-            ) : (
-              <div className="px-3 py-2 text-sm text-destructive">
-                {errorMessage}
-              </div>
-            )
+          {errorMessage &&
+          !sidebarRelayConnectionCard.hasRelayUnreachableError ? (
+            <div className="px-3 py-2 text-sm text-destructive">
+              {errorMessage}
+            </div>
           ) : null}
         </SidebarContent>
 
         {unreadBelowCount > 0 ? (
           <MoreUnreadButton
-            bottomClassName="bottom-28"
+            bottomClassName={unreadBelowBottomClass}
             count={unreadBelowCount}
             icon={<ArrowDown />}
             onClick={scrollToNextBelow}
@@ -765,6 +776,29 @@ export function AppSidebar({
         ) : null}
 
         <SidebarFooter className="absolute inset-x-0 bottom-0 z-30 bg-sidebar/55 backdrop-blur-xl supports-[backdrop-filter]:bg-sidebar/45 dark:bg-sidebar/45 dark:supports-[backdrop-filter]:bg-sidebar/35">
+          {sidebarRelayConnectionCard.showSidebarRelayConnectionCard ? (
+            <div className="mb-2 group-data-[collapsible=icon]:hidden">
+              <SidebarRelayConnectionCard
+                isConnected={
+                  sidebarRelayConnectionCard.isRelayConnectionSuccess
+                }
+                isReconnectPending={
+                  sidebarRelayConnectionCard.isRelayReconnectPending
+                }
+                onDismiss={
+                  sidebarRelayConnectionCard.onDismissRelayConnectionCard
+                }
+                onReconnect={sidebarRelayConnectionCard.onReconnectRelay}
+              />
+            </div>
+          ) : null}
+          {showSidebarUpdateCard ? (
+            <div className="mb-2 group-data-[collapsible=icon]:hidden">
+              <SidebarUpdateCard
+                onDismiss={() => setIsSidebarUpdateCardDismissed(true)}
+              />
+            </div>
+          ) : null}
           <SidebarMenu>
             <SidebarMenuItem>
               <SidebarProfileCard
diff --git a/desktop/src/features/sidebar/ui/SidebarRelayConnectionCard.tsx b/desktop/src/features/sidebar/ui/SidebarRelayConnectionCard.tsx
new file mode 100644
index 000000000..39c595a26
--- /dev/null
+++ b/desktop/src/features/sidebar/ui/SidebarRelayConnectionCard.tsx
@@ -0,0 +1,187 @@
+import { Check, CloudOff, Loader2 } from "lucide-react";
+
+import {
+  SidebarCompactActionCard,
+  type SidebarActionCardSurface,
+} from "@/shared/ui/sidebar-action-card";
+
+type SidebarRelayConnectionCardProps = {
+  isActionDisabled?: boolean;
+  actionTestId?: string;
+  isConnected?: boolean;
+  isReconnectPending: boolean;
+  onDismiss?: () => void;
+  onReconnect: () => void;
+  surface?: SidebarActionCardSurface;
+  testId?: string;
+};
+
+type SidebarBlockConnectivityCardProps = {
+  actionTestId?: string;
+  isActionDisabled: boolean;
+  isActionPending: boolean;
+  isActionSuccess?: boolean;
+  onAction: () => void;
+  onDismiss?: () => void;
+  surface?: SidebarActionCardSurface;
+  testId?: string;
+};
+
+export function SidebarRelayConnectionCard({
+  actionTestId,
+  isActionDisabled = false,
+  isConnected = false,
+  isReconnectPending,
+  onDismiss,
+  onReconnect,
+  surface,
+}: SidebarRelayConnectionCardProps) {
+  return (
+    <SidebarRelayConnectionCompactCard
+      actionTestId={actionTestId ?? "sidebar-reconnect"}
+      isActionDisabled={isActionDisabled}
+      isConnected={isConnected}
+      isReconnectPending={isReconnectPending}
+      onDismiss={onDismiss}
+      onReconnect={onReconnect}
+      surface={surface}
+      testId="sidebar-relay-unreachable"
+    />
+  );
+}
+
+export function SidebarRelayConnectionCompactCard({
+  actionTestId,
+  isActionDisabled = false,
+  isConnected = false,
+  isReconnectPending,
+  onDismiss,
+  onReconnect,
+  surface,
+  testId = "sidebar-relay-unreachable-compact",
+}: SidebarRelayConnectionCardProps) {
+  return (
+    <SidebarCompactActionCard
+      actionAriaLabel={isConnected ? "Connected" : "Connect to relay"}
+      actionDisabled={isActionDisabled || isReconnectPending || isConnected}
+      actionTestId={actionTestId}
+      description={
+        isConnected
+          ? undefined
+          : isReconnectPending
+            ? "Reconnecting"
+            : "Click to connect"
+      }
+      dismissLabel="Dismiss relay notification"
+      iconKey={
+        isConnected ? "connected" : isReconnectPending ? "pending" : "idle"
+      }
+      icon={
+        isConnected ? (
+          <Check aria-hidden="true" className="h-5 w-5" />
+        ) : isReconnectPending ? (
+          <Loader2 aria-hidden="true" className="h-5 w-5 animate-spin" />
+        ) : (
+          <CloudOff aria-hidden="true" className="h-5 w-5" />
+        )
+      }
+      onAction={onReconnect}
+      onDismiss={onDismiss}
+      role={isConnected ? "status" : "alert"}
+      surface={surface}
+      testId={testId}
+      title={isConnected ? "Connected" : "Can't reach the relay"}
+      tone={isConnected ? "success" : "neutral"}
+    />
+  );
+}
+
+export function SidebarBlockVpnOffCompactCard({
+  actionTestId,
+  isActionDisabled,
+  isActionPending,
+  isActionSuccess = false,
+  onAction,
+  onDismiss,
+  surface,
+  testId = "sidebar-block-vpn-off-compact",
+}: SidebarBlockConnectivityCardProps) {
+  return (
+    <SidebarCompactActionCard
+      actionAriaLabel={isActionSuccess ? "Connected" : "Turn on VPN"}
+      actionDisabled={isActionDisabled || isActionSuccess}
+      actionTestId={actionTestId}
+      description={
+        isActionSuccess
+          ? undefined
+          : isActionPending
+            ? "Connecting"
+            : "Click to connect"
+      }
+      dismissLabel="Dismiss VPN notification"
+      iconKey={
+        isActionSuccess ? "connected" : isActionPending ? "pending" : "idle"
+      }
+      icon={
+        isActionSuccess ? (
+          <Check aria-hidden="true" className="h-5 w-5" />
+        ) : isActionPending ? (
+          <Loader2 aria-hidden="true" className="h-5 w-5 animate-spin" />
+        ) : (
+          <CloudOff aria-hidden="true" className="h-5 w-5" />
+        )
+      }
+      onAction={onAction}
+      onDismiss={onDismiss}
+      surface={surface}
+      testId={testId}
+      title={isActionSuccess ? "Connected" : "Turn on VPN"}
+      tone={isActionSuccess ? "success" : "neutral"}
+    />
+  );
+}
+
+export function SidebarBlockAccessRefreshCompactCard({
+  actionTestId,
+  isActionDisabled,
+  isActionPending,
+  isActionSuccess = false,
+  onAction,
+  onDismiss,
+  surface,
+  testId = "sidebar-block-access-refresh-compact",
+}: SidebarBlockConnectivityCardProps) {
+  return (
+    <SidebarCompactActionCard
+      actionAriaLabel={isActionSuccess ? "Connected" : "Refresh VPN access"}
+      actionDisabled={isActionDisabled || isActionSuccess}
+      actionTestId={actionTestId}
+      description={
+        isActionSuccess
+          ? undefined
+          : isActionPending
+            ? "Refreshing"
+            : "Click to refresh"
+      }
+      dismissLabel="Dismiss VPN access notification"
+      iconKey={
+        isActionSuccess ? "connected" : isActionPending ? "pending" : "idle"
+      }
+      icon={
+        isActionSuccess ? (
+          <Check aria-hidden="true" className="h-5 w-5" />
+        ) : isActionPending ? (
+          <Loader2 aria-hidden="true" className="h-5 w-5 animate-spin" />
+        ) : (
+          <CloudOff aria-hidden="true" className="h-5 w-5" />
+        )
+      }
+      onAction={onAction}
+      onDismiss={onDismiss}
+      surface={surface}
+      testId={testId}
+      title={isActionSuccess ? "Connected" : "Refresh VPN access"}
+      tone={isActionSuccess ? "success" : "neutral"}
+    />
+  );
+}
diff --git a/desktop/src/features/sidebar/ui/useSidebarRelayConnectionCard.ts b/desktop/src/features/sidebar/ui/useSidebarRelayConnectionCard.ts
new file mode 100644
index 000000000..caaedebf1
--- /dev/null
+++ b/desktop/src/features/sidebar/ui/useSidebarRelayConnectionCard.ts
@@ -0,0 +1,135 @@
+import * as React from "react";
+
+import {
+  isRelayConnectionDegraded,
+  useRelayConnection,
+} from "@/shared/api/useRelayConnection";
+import { useReconnectRelay } from "@/shared/api/useReconnectRelay";
+import { isRelayUnreachableError } from "@/shared/lib/relayError";
+
+const SIDEBAR_CONNECTIVITY_SUCCESS_AUTO_DISMISS_MS = 2_500;
+
+export function useSidebarRelayConnectionCard(errorMessage?: string) {
+  const relayConnectionState = useRelayConnection();
+  const hasRelayUnreachableError = errorMessage
+    ? isRelayUnreachableError(errorMessage)
+    : false;
+  const isRelayConnectionActuallyDegraded =
+    hasRelayUnreachableError || isRelayConnectionDegraded(relayConnectionState);
+  const isRelayConnectionConnected = relayConnectionState === "connected";
+  const [isDismissed, setIsDismissed] = React.useState(false);
+  const [hasSuccess, setHasSuccess] = React.useState(false);
+  const canShow = isRelayConnectionActuallyDegraded || hasSuccess;
+  const show = canShow && !isDismissed;
+  const wasProblemCardVisibleRef = React.useRef(false);
+  const { isPending: isReconnectPending, reconnect } = useReconnectRelay();
+  const [connectivityAction, setConnectivityAction] = React.useState<
+    "relay-connection" | null
+  >(null);
+  const connectivityActionRef = React.useRef<"relay-connection" | null>(null);
+  const connectivityFrameRef = React.useRef<number | null>(null);
+  const connectivityTimeoutRef = React.useRef<number | null>(null);
+  const isRelayReconnectPending =
+    isReconnectPending || connectivityAction === "relay-connection";
+
+  React.useEffect(() => {
+    if (!isRelayConnectionActuallyDegraded && !hasSuccess) {
+      setIsDismissed(false);
+    }
+  }, [hasSuccess, isRelayConnectionActuallyDegraded]);
+
+  React.useEffect(() => {
+    if (isRelayConnectionActuallyDegraded) {
+      setHasSuccess(false);
+      setIsDismissed(false);
+    }
+  }, [isRelayConnectionActuallyDegraded]);
+
+  React.useEffect(() => {
+    if (isRelayConnectionActuallyDegraded) {
+      wasProblemCardVisibleRef.current = show && !hasSuccess;
+      return;
+    }
+
+    if (wasProblemCardVisibleRef.current && isRelayConnectionConnected) {
+      wasProblemCardVisibleRef.current = false;
+      setHasSuccess(true);
+    }
+  }, [
+    hasSuccess,
+    show,
+    isRelayConnectionActuallyDegraded,
+    isRelayConnectionConnected,
+  ]);
+
+  React.useEffect(() => {
+    if (!hasSuccess) {
+      return;
+    }
+
+    const timeout = window.setTimeout(() => {
+      setHasSuccess(false);
+      setIsDismissed(true);
+    }, SIDEBAR_CONNECTIVITY_SUCCESS_AUTO_DISMISS_MS);
+
+    return () => window.clearTimeout(timeout);
+  }, [hasSuccess]);
+
+  React.useEffect(() => {
+    return () => {
+      if (connectivityFrameRef.current !== null) {
+        window.cancelAnimationFrame(connectivityFrameRef.current);
+      }
+      if (connectivityTimeoutRef.current !== null) {
+        window.clearTimeout(connectivityTimeoutRef.current);
+      }
+      connectivityActionRef.current = null;
+    };
+  }, []);
+
+  const startConnectivityAction = React.useCallback(
+    (runAction: () => Promise<void>) => {
+      if (connectivityActionRef.current !== null) {
+        return;
+      }
+
+      connectivityActionRef.current = "relay-connection";
+      setConnectivityAction("relay-connection");
+      connectivityFrameRef.current = window.requestAnimationFrame(() => {
+        connectivityFrameRef.current = null;
+        connectivityTimeoutRef.current = window.setTimeout(() => {
+          connectivityTimeoutRef.current = null;
+          void Promise.resolve()
+            .then(runAction)
+            .catch((error) => {
+              console.error("[AppSidebar] connectivity action failed:", error);
+            })
+            .finally(() => {
+              connectivityActionRef.current = null;
+              setConnectivityAction(null);
+            });
+        }, 0);
+      });
+    },
+    [],
+  );
+
+  const handleReconnectRelay = React.useCallback(() => {
+    startConnectivityAction(async () => {
+      setHasSuccess(false);
+      const didReconnect = await reconnect();
+      if (didReconnect) {
+        setHasSuccess(true);
+      }
+    });
+  }, [reconnect, startConnectivityAction]);
+
+  return {
+    hasRelayUnreachableError,
+    isRelayConnectionSuccess: hasSuccess,
+    isRelayReconnectPending,
+    onDismissRelayConnectionCard: () => setIsDismissed(true),
+    onReconnectRelay: handleReconnectRelay,
+    showSidebarRelayConnectionCard: show,
+  };
+}
diff --git a/desktop/src/main.tsx b/desktop/src/main.tsx
index ca89f1ed9..fa19428c4 100644
--- a/desktop/src/main.tsx
+++ b/desktop/src/main.tsx
@@ -6,6 +6,7 @@ import { UpdaterProvider } from "@/features/settings/hooks/UpdaterProvider";
 import { WorkspacesProvider } from "@/features/workspaces/useWorkspaces";
 import { ThemeProvider } from "@/shared/theme/ThemeProvider";
 import { EmojiBurstProvider } from "@/shared/ui/EmojiBurstProvider";
+import { PoofBurstProvider } from "@/shared/ui/PoofBurstProvider";
 import { Toaster } from "@/shared/ui/sonner";
 import { TooltipProvider } from "@/shared/ui/tooltip";
 
@@ -52,10 +53,12 @@ function renderApp() {
         <ThemeProvider defaultTheme="houston">
           <TooltipProvider delayDuration={300}>
             <EmojiBurstProvider>
-              <UpdaterProvider>
-                <App />
-              </UpdaterProvider>
-              <Toaster />
+              <PoofBurstProvider>
+                <UpdaterProvider>
+                  <App />
+                </UpdaterProvider>
+                <Toaster />
+              </PoofBurstProvider>
             </EmojiBurstProvider>
           </TooltipProvider>
         </ThemeProvider>
diff --git a/desktop/src/shared/api/useReconnectRelay.ts b/desktop/src/shared/api/useReconnectRelay.ts
index d231bb30d..ebbc36a31 100644
--- a/desktop/src/shared/api/useReconnectRelay.ts
+++ b/desktop/src/shared/api/useReconnectRelay.ts
@@ -16,7 +16,7 @@ import { toast } from "sonner";
 import { relayClient } from "@/shared/api/relayClient";
 
 export function useReconnectRelay(): {
-  reconnect: () => Promise<void>;
+  reconnect: () => Promise<boolean>;
   isPending: boolean;
 } {
   const queryClient = useQueryClient();
@@ -27,7 +27,7 @@ export function useReconnectRelay(): {
   const inFlightRef = React.useRef(false);
 
   const reconnect = React.useCallback(async () => {
-    if (inFlightRef.current) return;
+    if (inFlightRef.current) return false;
     inFlightRef.current = true;
     setIsPending(true);
     try {
@@ -35,9 +35,11 @@ export function useReconnectRelay(): {
       await queryClient.invalidateQueries();
       // No success toast — the banner auto-hides once the connection state
       // transitions back to "connected", which is the user-visible confirmation.
+      return true;
     } catch (err) {
       toast.error("Reconnect failed — check your VPN or network.");
       console.error("[useReconnectRelay] reconnect failed:", err);
+      return false;
     } finally {
       inFlightRef.current = false;
       setIsPending(false);
diff --git a/desktop/src/shared/api/warp.ts b/desktop/src/shared/api/warp.ts
new file mode 100644
index 000000000..14cbbdafa
--- /dev/null
+++ b/desktop/src/shared/api/warp.ts
@@ -0,0 +1,9 @@
+import { invokeTauri } from "@/shared/api/tauri";
+
+export async function connectWarpVpn(): Promise<void> {
+  await invokeTauri("connect_warp_vpn");
+}
+
+export async function refreshWarpAccess(): Promise<void> {
+  await invokeTauri("refresh_warp_access");
+}
diff --git a/desktop/src/shared/styles/globals.css b/desktop/src/shared/styles/globals.css
index bb3fdb249..ab7443c8e 100644
--- a/desktop/src/shared/styles/globals.css
+++ b/desktop/src/shared/styles/globals.css
@@ -132,6 +132,169 @@
   }
 }
 
+.buzz-poof-layer {
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: fixed;
+  z-index: 2147483647;
+}
+
+.buzz-poof-burst {
+  contain: layout paint style;
+  height: var(--buzz-poof-size);
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: translate3d(
+    calc(var(--buzz-poof-x) - 50%),
+    calc(var(--buzz-poof-y) - 50%),
+    0
+  );
+  width: var(--buzz-poof-size);
+}
+
+.buzz-poof-frame {
+  animation: buzz-poof-frame 400ms linear both;
+  height: 100%;
+  inset: 0;
+  object-fit: contain;
+  opacity: 0;
+  position: absolute;
+  transform: translate3d(0, 0, 0) scale(0.92);
+  transform-origin: center;
+  width: 100%;
+}
+
+.buzz-poof-frame-1 {
+  animation-name: buzz-poof-frame-1;
+}
+
+.buzz-poof-frame-2 {
+  animation-name: buzz-poof-frame-2;
+}
+
+.buzz-poof-frame-3 {
+  animation-name: buzz-poof-frame-3;
+}
+
+.buzz-poof-frame-4 {
+  animation-name: buzz-poof-frame-4;
+}
+
+.buzz-poof-frame-5 {
+  animation-name: buzz-poof-frame-5;
+}
+
+@keyframes buzz-poof-frame-1 {
+  0%,
+  19.99% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(0.94);
+  }
+
+  20%,
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes buzz-poof-frame-2 {
+  0%,
+  19.99% {
+    opacity: 0;
+  }
+
+  20%,
+  39.99% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  40%,
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(1.01);
+  }
+}
+
+@keyframes buzz-poof-frame-3 {
+  0%,
+  39.99% {
+    opacity: 0;
+  }
+
+  40%,
+  59.99% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1.01);
+  }
+
+  60%,
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(1.02);
+  }
+}
+
+@keyframes buzz-poof-frame-4 {
+  0%,
+  59.99% {
+    opacity: 0;
+  }
+
+  60%,
+  79.99% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1.02);
+  }
+
+  80%,
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(1.03);
+  }
+}
+
+@keyframes buzz-poof-frame-5 {
+  0%,
+  79.99% {
+    opacity: 0;
+  }
+
+  80%,
+  99.99% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1.03);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(1.04);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .buzz-poof-frame {
+    animation: buzz-poof-frame-reduced 180ms ease-out both;
+  }
+
+  .buzz-poof-frame:not(.buzz-poof-frame-3) {
+    display: none;
+  }
+}
+
+@keyframes buzz-poof-frame-reduced {
+  0% {
+    opacity: 0.9;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 @property --buzz-grainient-x-0 {
   syntax: "<percentage>";
   inherits: false;
@@ -394,6 +557,95 @@
   display: none;
 }
 
+.buzz-sidebar-action-card--success {
+  background-color: color-mix(
+    in srgb,
+    var(--status-added) 12%,
+    hsl(var(--background)) 88%
+  );
+  border-color: color-mix(
+    in srgb,
+    var(--status-added) 34%,
+    hsl(var(--border)) 66%
+  );
+  color: hsl(var(--foreground));
+}
+
+.buzz-sidebar-action-card--success:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--status-added) 16%,
+    hsl(var(--background)) 84%
+  );
+}
+
+.dark .buzz-sidebar-action-card--success {
+  background-color: color-mix(
+    in srgb,
+    var(--status-added) 15%,
+    hsl(var(--background)) 85%
+  );
+  border-color: color-mix(
+    in srgb,
+    var(--status-added) 42%,
+    hsl(var(--border)) 58%
+  );
+}
+
+.dark .buzz-sidebar-action-card--success:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--status-added) 19%,
+    hsl(var(--background)) 81%
+  );
+}
+
+.buzz-sidebar-action-card__success-icon {
+  color: var(--status-added);
+}
+
+.buzz-sidebar-action-description {
+  --buzz-sidebar-action-description-line-height: 1.375em;
+  display: inline-block;
+  line-height: var(--buzz-sidebar-action-description-line-height);
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.buzz-sidebar-action-description__motion {
+  display: block;
+  height: var(--buzz-sidebar-action-description-line-height);
+  overflow: hidden;
+}
+
+.buzz-sidebar-action-description__reel {
+  animation: buzz-sidebar-action-description-roll-up 260ms
+    cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  display: flex;
+  flex-direction: column;
+  line-height: var(--buzz-sidebar-action-description-line-height);
+  will-change: transform;
+}
+
+.buzz-sidebar-action-description__reel > span {
+  display: block;
+  height: var(--buzz-sidebar-action-description-line-height);
+  line-height: var(--buzz-sidebar-action-description-line-height);
+}
+
+@keyframes buzz-sidebar-action-description-roll-up {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(
+      calc(-1 * var(--buzz-sidebar-action-description-line-height))
+    );
+  }
+}
+
 .buzz-animated-count__slot {
   display: inline-block;
   height: 1em;
diff --git a/desktop/src/shared/ui/ConnectionBanner.tsx b/desktop/src/shared/ui/ConnectionBanner.tsx
deleted file mode 100644
index abfe35a64..000000000
--- a/desktop/src/shared/ui/ConnectionBanner.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { WifiOff } from "lucide-react";
-
-import {
-  isRelayConnectionDegraded,
-  useRelayConnection,
-} from "@/shared/api/useRelayConnection";
-import { useReconnectRelay } from "@/shared/api/useReconnectRelay";
-import type { ConnectionState } from "@/shared/api/relayClientShared";
-
-const COPY: Partial<Record<ConnectionState, string>> = {
-  reconnecting: "Reconnecting to relay…",
-  stalled: "Connection lost — relay is not responding.",
-  disconnected: "Disconnected from relay.",
-};
-
-/**
- * Thin warning strip surfaced when the relay connection is degraded.
- *
- * Renders null while the connection is healthy so it takes up no layout space.
- * The strip auto-disappears once the state transitions back to "connected" —
- * no success toast needed.
- */
-export function ConnectionBanner() {
-  const state = useRelayConnection();
-  const { isPending, reconnect } = useReconnectRelay();
-
-  if (!isRelayConnectionDegraded(state)) return null;
-
-  const message = COPY[state] ?? "Connection issue detected.";
-
-  return (
-    <div
-      className="flex shrink-0 items-center gap-2 border-b border-warning/30 bg-warning/5 px-3 py-2 text-xs"
-      data-testid="connection-banner"
-      role="alert"
-    >
-      <WifiOff className="h-3 w-3 shrink-0 text-warning" />
-      <span className="flex-1 text-muted-foreground">{message}</span>
-      <button
-        className="font-medium text-warning hover:underline disabled:opacity-50"
-        data-testid="connection-banner-reconnect"
-        disabled={isPending}
-        onClick={reconnect}
-        type="button"
-      >
-        {isPending ? "Reconnecting…" : "Reconnect"}
-      </button>
-    </div>
-  );
-}
diff --git a/desktop/src/shared/ui/PoofBurstProvider.tsx b/desktop/src/shared/ui/PoofBurstProvider.tsx
new file mode 100644
index 000000000..339f80c80
--- /dev/null
+++ b/desktop/src/shared/ui/PoofBurstProvider.tsx
@@ -0,0 +1,194 @@
+import React, { type CSSProperties, useEffect, useRef, useState } from "react";
+
+export const POOF_TRIGGER_CLASS = "buzz-poof-trigger";
+export const POOF_ORIGIN_CLASS = "buzz-poof-origin";
+
+export const POOF_DURATION_MS = 430;
+
+const POOF_SOUND_URL = "/pow/plop.m4a";
+const POOF_SIZE_SCALE = 0.6375;
+const POOF_FRAMES = [
+  { id: "poof-1", src: "/pow/poof1@3x.png" },
+  { id: "poof-2", src: "/pow/poof2@3x.png" },
+  { id: "poof-3", src: "/pow/poof3@3x.png" },
+  { id: "poof-4", src: "/pow/poof4@3x.png" },
+  { id: "poof-5", src: "/pow/poof5@3x.png" },
+] as const;
+
+let poofAudio: HTMLAudioElement | null = null;
+let lastPointerDownTrigger: Element | null = null;
+
+type PoofBurst = {
+  id: number;
+  size: number;
+  x: number;
+  y: number;
+};
+
+type PoofStyle = CSSProperties & {
+  "--buzz-poof-size": string;
+  "--buzz-poof-x": string;
+  "--buzz-poof-y": string;
+};
+
+function getPoofOrigin(target: Element) {
+  const origin = target.closest(`.${POOF_ORIGIN_CLASS}`) ?? target;
+  const rect = origin.getBoundingClientRect();
+  const baseSize = Math.min(Math.max(rect.width * 0.54, 104), 190);
+
+  return {
+    size: baseSize * POOF_SIZE_SCALE,
+    x: rect.left + rect.width / 2,
+    y: rect.top + rect.height / 2,
+  };
+}
+
+function playPoofSound() {
+  try {
+    poofAudio ??= new Audio(POOF_SOUND_URL);
+    poofAudio.volume = 0.34;
+    poofAudio.currentTime = 0;
+    poofAudio.play().catch(() => {
+      // Best-effort — browsers can still block audio playback.
+    });
+  } catch {
+    // Best-effort only: audio may be unavailable or blocked.
+  }
+}
+
+function triggerPoof(target: Element) {
+  return getPoofOrigin(target);
+}
+
+export function PoofBurstProvider({ children }: { children: React.ReactNode }) {
+  const [bursts, setBursts] = useState<PoofBurst[]>([]);
+  const idRef = useRef(0);
+  const timeoutIdsRef = useRef<number[]>([]);
+
+  useEffect(() => {
+    for (const frame of POOF_FRAMES) {
+      const image = new Image();
+      image.src = frame.src;
+    }
+
+    try {
+      poofAudio ??= new Audio(POOF_SOUND_URL);
+      poofAudio.preload = "auto";
+      poofAudio.load();
+    } catch {
+      // Best-effort only.
+    }
+  }, []);
+
+  useEffect(() => {
+    function emitPoof(target: Element) {
+      const id = idRef.current;
+      idRef.current += 1;
+
+      setBursts((current) => [
+        ...current.slice(-5),
+        { ...triggerPoof(target), id },
+      ]);
+      playPoofSound();
+
+      const timeoutId = window.setTimeout(() => {
+        setBursts((current) => current.filter((burst) => burst.id !== id));
+      }, POOF_DURATION_MS);
+      timeoutIdsRef.current.push(timeoutId);
+    }
+
+    function findTriggerTarget(event: Event) {
+      return event.target instanceof Element
+        ? event.target.closest(`.${POOF_TRIGGER_CLASS}`)
+        : null;
+    }
+
+    function handleDocumentPointerDown(event: PointerEvent) {
+      if (event.button !== 0) {
+        return;
+      }
+
+      const target = findTriggerTarget(event);
+
+      if (!target) {
+        return;
+      }
+
+      lastPointerDownTrigger = target;
+      window.setTimeout(() => {
+        if (lastPointerDownTrigger === target) {
+          lastPointerDownTrigger = null;
+        }
+      }, POOF_DURATION_MS);
+      emitPoof(target);
+    }
+
+    function handleDocumentClick(event: MouseEvent) {
+      const target =
+        event.target instanceof Element
+          ? event.target.closest(`.${POOF_TRIGGER_CLASS}`)
+          : null;
+
+      if (!target) {
+        return;
+      }
+
+      if (lastPointerDownTrigger === target) {
+        lastPointerDownTrigger = null;
+        return;
+      }
+
+      emitPoof(target);
+    }
+
+    document.addEventListener("pointerdown", handleDocumentPointerDown, {
+      capture: true,
+    });
+    document.addEventListener("click", handleDocumentClick, { capture: true });
+
+    return () => {
+      document.removeEventListener("pointerdown", handleDocumentPointerDown, {
+        capture: true,
+      });
+      document.removeEventListener("click", handleDocumentClick, {
+        capture: true,
+      });
+      for (const timeoutId of timeoutIdsRef.current) {
+        window.clearTimeout(timeoutId);
+      }
+      timeoutIdsRef.current = [];
+    };
+  }, []);
+
+  return (
+    <>
+      {children}
+      <div aria-hidden="true" className="buzz-poof-layer">
+        {bursts.map((burst) => (
+          <div
+            className="buzz-poof-burst"
+            key={burst.id}
+            style={
+              {
+                "--buzz-poof-size": `${burst.size}px`,
+                "--buzz-poof-x": `${burst.x}px`,
+                "--buzz-poof-y": `${burst.y}px`,
+              } as PoofStyle
+            }
+          >
+            {POOF_FRAMES.map((frame, index) => (
+              <img
+                alt=""
+                className={`buzz-poof-frame buzz-poof-frame-${index + 1}`}
+                decoding="async"
+                draggable={false}
+                key={`${burst.id}-${frame.id}`}
+                src={frame.src}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/desktop/src/shared/ui/sidebar-action-card.tsx b/desktop/src/shared/ui/sidebar-action-card.tsx
new file mode 100644
index 000000000..6d342f601
--- /dev/null
+++ b/desktop/src/shared/ui/sidebar-action-card.tsx
@@ -0,0 +1,336 @@
+import * as React from "react";
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  type Transition,
+  useReducedMotion,
+} from "motion/react";
+
+import { cn } from "@/shared/lib/cn";
+import {
+  POOF_DURATION_MS,
+  POOF_ORIGIN_CLASS,
+  POOF_TRIGGER_CLASS,
+} from "@/shared/ui/PoofBurstProvider";
+
+type SidebarActionCardTone = "neutral" | "success";
+export type SidebarActionCardSurface = "background" | "secondary";
+
+type SidebarCompactActionCardProps = {
+  actionAriaLabel: string;
+  actionDisabled?: boolean;
+  actionTestId?: string;
+  className?: string;
+  description?: string;
+  dismissClassName?: string;
+  dismissLabel?: string;
+  iconKey?: string;
+  icon: ReactNode;
+  onAction: () => void;
+  onDismiss?: () => void;
+  role?: "alert" | "status";
+  surface?: SidebarActionCardSurface;
+  testId: string;
+  title: string;
+  tone?: SidebarActionCardTone;
+};
+
+type SidebarActionDismissButtonProps = {
+  className?: string;
+  isDismissing: boolean;
+  label: string;
+  onDismiss: () => void;
+  onDismissStart: () => void;
+  testId: string;
+};
+
+type SidebarActionDescriptionTransition = {
+  current: string;
+  isAnimating: boolean;
+  previous: string;
+  version: number;
+};
+
+const SIDEBAR_ACTION_DESCRIPTION_SETTLE_DELAY_MS = 260;
+
+function SidebarActionDescriptionText({
+  shouldReduceMotion,
+  value,
+}: {
+  shouldReduceMotion: boolean;
+  value: string;
+}) {
+  const [transition, setTransition] =
+    React.useState<SidebarActionDescriptionTransition>(() => ({
+      current: value,
+      isAnimating: false,
+      previous: value,
+      version: 0,
+    }));
+
+  React.useLayoutEffect(() => {
+    setTransition((currentTransition) => {
+      if (currentTransition.current === value) {
+        return currentTransition;
+      }
+
+      return {
+        current: value,
+        isAnimating: !shouldReduceMotion,
+        previous: currentTransition.current,
+        version: currentTransition.version + 1,
+      };
+    });
+  }, [shouldReduceMotion, value]);
+
+  React.useEffect(() => {
+    if (!transition.isAnimating) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setTransition((currentTransition) => {
+        if (currentTransition.version !== transition.version) {
+          return currentTransition;
+        }
+
+        return {
+          ...currentTransition,
+          isAnimating: false,
+          previous: currentTransition.current,
+        };
+      });
+    }, SIDEBAR_ACTION_DESCRIPTION_SETTLE_DELAY_MS);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [transition.isAnimating, transition.version]);
+
+  if (shouldReduceMotion || !transition.isAnimating) {
+    return (
+      <span className="buzz-sidebar-action-description">
+        {transition.current}
+      </span>
+    );
+  }
+
+  return (
+    <span className="buzz-sidebar-action-description">
+      <span className="sr-only">{transition.current}</span>
+      <span aria-hidden className="buzz-sidebar-action-description__motion">
+        <span
+          className="buzz-sidebar-action-description__reel"
+          key={`${transition.version}-${transition.previous}-${transition.current}`}
+        >
+          <span>{transition.previous}</span>
+          <span>{transition.current}</span>
+        </span>
+      </span>
+    </span>
+  );
+}
+
+function SidebarActionDismissButton({
+  className,
+  isDismissing,
+  label,
+  onDismiss,
+  onDismissStart,
+  testId,
+}: SidebarActionDismissButtonProps) {
+  const dismissTimeoutRef = React.useRef<number | null>(null);
+
+  React.useEffect(() => {
+    return () => {
+      if (dismissTimeoutRef.current !== null) {
+        window.clearTimeout(dismissTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <button
+      aria-label={label}
+      className={cn(
+        "group/dismiss pointer-events-none absolute -right-1 -top-2 z-10 h-6 w-6 rounded-full text-muted-foreground/45 transition-colors duration-150 ease-out hover:text-foreground/80 focus-visible:pointer-events-auto focus-visible:text-foreground/80 focus-visible:outline-hidden group-hover/sidebar-action-card:pointer-events-auto group-hover/sidebar-compact-action-card:pointer-events-auto",
+        POOF_TRIGGER_CLASS,
+        className,
+      )}
+      data-testid={testId}
+      disabled={isDismissing}
+      onClick={(event) => {
+        event.stopPropagation();
+        if (dismissTimeoutRef.current !== null) {
+          return;
+        }
+        onDismissStart();
+        dismissTimeoutRef.current = window.setTimeout(() => {
+          dismissTimeoutRef.current = null;
+          onDismiss();
+        }, POOF_DURATION_MS);
+      }}
+      type="button"
+    >
+      <span className="flex h-full w-full scale-95 items-center justify-center rounded-full bg-background opacity-0 shadow-sm ring-1 ring-border/70 transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:scale-100 group-focus-visible/dismiss:scale-100 group-focus-visible/dismiss:opacity-100 group-focus-visible/dismiss:ring-2 group-focus-visible/dismiss:ring-muted-foreground/40 group-hover/sidebar-action-card:scale-100 group-hover/sidebar-action-card:opacity-100 group-hover/sidebar-compact-action-card:scale-100 group-hover/sidebar-compact-action-card:opacity-100">
+        <X aria-hidden="true" className="h-4 w-4" />
+      </span>
+    </button>
+  );
+}
+
+function dismissTestId(testId: string) {
+  return testId === "sidebar-update-card"
+    ? "sidebar-update-dismiss"
+    : `${testId}-dismiss`;
+}
+
+export function SidebarCompactActionCard({
+  actionAriaLabel,
+  actionDisabled = false,
+  actionTestId,
+  className,
+  description,
+  dismissClassName,
+  dismissLabel = "Dismiss notification",
+  icon,
+  iconKey,
+  onAction,
+  onDismiss,
+  role,
+  surface = "background",
+  testId,
+  title,
+  tone = "neutral",
+}: SidebarCompactActionCardProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const isSuccess = tone === "success";
+  const [isDismissing, setIsDismissing] = React.useState(false);
+  const resolvedIconKey = iconKey ?? title;
+  const cardTransition: Transition = shouldReduceMotion
+    ? { duration: 0.08 }
+    : {
+        duration: 0.16,
+        ease: [0.22, 1, 0.36, 1] as const,
+      };
+  const cardHiddenState = shouldReduceMotion
+    ? { opacity: 0 }
+    : { opacity: 0, scale: 0.96 };
+  const cardVisibleState = shouldReduceMotion
+    ? { opacity: 1 }
+    : { opacity: 1, scale: 1 };
+  const contentTransition: Transition = shouldReduceMotion
+    ? { duration: 0 }
+    : {
+        duration: 0.16,
+        ease: [0.22, 1, 0.36, 1] as const,
+      };
+  const contentInitial = shouldReduceMotion
+    ? { opacity: 0 }
+    : { opacity: 0, y: 3 };
+  const contentExit = shouldReduceMotion
+    ? { opacity: 0 }
+    : { opacity: 0, y: -3 };
+
+  return (
+    <motion.div
+      animate={isDismissing ? cardHiddenState : cardVisibleState}
+      className={cn(
+        "group/sidebar-compact-action-card relative w-full origin-center",
+        POOF_ORIGIN_CLASS,
+        isDismissing && "pointer-events-none",
+        className,
+      )}
+      data-dismissing={isDismissing ? "true" : undefined}
+      data-testid={testId}
+      initial={cardHiddenState}
+      role={role}
+      transition={cardTransition}
+    >
+      <button
+        aria-label={actionAriaLabel}
+        className={cn(
+          "flex w-full items-center gap-3 rounded-xl border px-3 py-3 text-left shadow-xs transition-[background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-muted-foreground/40 disabled:cursor-default disabled:opacity-100",
+          isSuccess
+            ? "buzz-sidebar-action-card--success disabled:cursor-default disabled:opacity-100"
+            : surface === "secondary"
+              ? "border-border/70 bg-secondary/80 text-secondary-foreground hover:border-border hover:bg-secondary dark:bg-secondary/60 dark:hover:bg-secondary/70"
+              : "border-border/70 bg-background/70 text-foreground hover:border-border hover:bg-muted/40 dark:bg-background/50 dark:hover:bg-muted/30",
+        )}
+        data-testid={actionTestId}
+        disabled={actionDisabled}
+        onClick={onAction}
+        type="button"
+      >
+        <motion.span
+          className="relative top-[0.1875rem] flex min-h-10 min-w-0 flex-1 flex-col justify-center"
+          layout="position"
+          transition={contentTransition}
+        >
+          <AnimatePresence initial={false} mode="wait">
+            <motion.span
+              animate={{ opacity: 1, y: 0 }}
+              className="block text-sm font-semibold leading-tight"
+              exit={contentExit}
+              initial={contentInitial}
+              key={title}
+              transition={contentTransition}
+            >
+              {title}
+            </motion.span>
+          </AnimatePresence>
+          <AnimatePresence initial={false}>
+            {description ? (
+              <motion.span
+                animate={{ opacity: 1, y: 0 }}
+                className="mt-1 block text-xs leading-snug text-muted-foreground"
+                exit={contentExit}
+                initial={contentInitial}
+                key="description"
+                transition={contentTransition}
+              >
+                <SidebarActionDescriptionText
+                  shouldReduceMotion={Boolean(shouldReduceMotion)}
+                  value={description}
+                />
+              </motion.span>
+            ) : null}
+          </AnimatePresence>
+        </motion.span>
+        <motion.span
+          className={cn(
+            "ml-auto flex h-10 w-10 shrink-0 items-center justify-center transition-colors duration-150 ease-out",
+            isSuccess
+              ? "buzz-sidebar-action-card__success-icon"
+              : "text-muted-foreground group-hover/sidebar-compact-action-card:text-foreground",
+          )}
+          layout="position"
+          transition={contentTransition}
+        >
+          <AnimatePresence initial={false} mode="wait">
+            <motion.span
+              animate={{ opacity: 1, scale: 1 }}
+              className="flex h-5 w-5 items-center justify-center"
+              exit={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.95 }}
+              initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.95 }}
+              key={resolvedIconKey}
+              transition={contentTransition}
+            >
+              {icon}
+            </motion.span>
+          </AnimatePresence>
+        </motion.span>
+      </button>
+      {onDismiss ? (
+        <SidebarActionDismissButton
+          className={dismissClassName}
+          isDismissing={isDismissing}
+          label={dismissLabel}
+          onDismiss={onDismiss}
+          onDismissStart={() => setIsDismissing(true)}
+          testId={dismissTestId(testId)}
+        />
+      ) : null}
+    </motion.div>
+  );
+}
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index b98dc9e80..fc488fd1b 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -74,7 +74,11 @@ type E2eConfig = {
     profileReadError?: string;
     profileUpdateError?: string;
     searchProfiles?: MockSearchProfileSeed[];
+    updateAvailable?: boolean;
     updateChannelDelayMs?: number;
+    updateDownloadDelayMs?: number;
+    restartDelayMs?: number;
+    updateVersion?: string;
     stallWebsocketSends?: boolean;
     userSearchDelayMs?: number;
     // NIP-IA gate inputs — see tests/helpers/bridge.ts:MockBridgeOptions for
@@ -3610,6 +3614,56 @@ async function handleSetChannelPurpose(
   });
 }
 
+type MockUpdaterChannel = {
+  onmessage?: (event: { event: "Finished" }) => void;
+};
+
+function notifyUpdaterFinished(payload: unknown) {
+  const channel = (payload as { onEvent?: MockUpdaterChannel } | null)?.onEvent;
+  channel?.onmessage?.({ event: "Finished" });
+}
+
+function handleUpdaterCheck(config: E2eConfig | undefined) {
+  if (!config?.mock?.updateAvailable) {
+    return null;
+  }
+
+  const version = config.mock.updateVersion ?? "0.3.18";
+
+  return {
+    rid: 42,
+    currentVersion: "0.3.17",
+    version,
+    date: "2026-06-12T00:00:00Z",
+    body: `Mock update ${version}`,
+    rawJson: null,
+  };
+}
+
+async function handleUpdaterDownloadAndInstall(
+  payload: unknown,
+  config: E2eConfig | undefined,
+) {
+  const delayMs = config?.mock?.updateDownloadDelayMs ?? 0;
+
+  if (delayMs > 0) {
+    await new Promise((resolve) => window.setTimeout(resolve, delayMs));
+  }
+
+  notifyUpdaterFinished(payload);
+  return null;
+}
+
+async function handleRestart(config: E2eConfig | undefined) {
+  const delayMs = config?.mock?.restartDelayMs ?? 0;
+
+  if (delayMs > 0) {
+    await new Promise((resolve) => window.setTimeout(resolve, delayMs));
+  }
+
+  return null;
+}
+
 async function handleArchiveChannel(
   args: { channelId: string },
   config: E2eConfig | undefined,
@@ -5877,7 +5931,7 @@ export function maybeInstallE2eTauriMocks() {
   };
   window.__BUZZ_E2E_SET_RELAY_CONNECTION_STATE__ = (state) => {
     // Directly emit a connection state change on the relay client singleton,
-    // for tests that need to drive ConnectionBanner without waiting for the
+    // for tests that need to drive degraded relay UI without waiting for the
     // real auth-timeout + reconnect-debounce cycle (~10 s). Reaches the
     // TS-private emitter via a cast so the production class carries no
     // test-only seam.
@@ -6490,6 +6544,17 @@ export function maybeInstallE2eTauriMocks() {
       case "plugin:window|set_badge_count":
       case "plugin:window|set_badge_label":
         return null;
+      case "plugin:updater|check":
+        return handleUpdaterCheck(activeConfig);
+      case "plugin:updater|download_and_install":
+        return handleUpdaterDownloadAndInstall(payload, activeConfig);
+      case "connect_warp_vpn":
+      case "refresh_warp_access":
+        return null;
+      case "plugin:resources|close":
+        return null;
+      case "plugin:process|restart":
+        return handleRestart(activeConfig);
       case "get_channel_workflows":
         return handleGetChannelWorkflows(
           payload as Parameters<typeof handleGetChannelWorkflows>[0],
diff --git a/desktop/tests/e2e/relay-connectivity-screenshots.spec.ts b/desktop/tests/e2e/relay-connectivity-screenshots.spec.ts
index 1525f92b7..00c621ea6 100644
--- a/desktop/tests/e2e/relay-connectivity-screenshots.spec.ts
+++ b/desktop/tests/e2e/relay-connectivity-screenshots.spec.ts
@@ -45,22 +45,26 @@ async function driveConnectionDegraded(
 }
 
 test.describe("relay connectivity screenshots", () => {
-  test("01 — sidebar unreachable banner", async ({ page }) => {
+  test("01 — sidebar unreachable card", async ({ page }) => {
     await installMockBridge(page, { channelsReadError: RELAY_UNREACHABLE });
     await page.goto("/");
 
-    await expect(page.getByTestId("sidebar-relay-unreachable")).toBeVisible();
+    const relayCard = page.getByTestId("sidebar-relay-unreachable");
+    await expect(relayCard).toBeVisible();
+    await expect(relayCard).toContainText("Can't reach the relay");
+    await expect(relayCard).toContainText("Click to connect");
     await expect(page.getByTestId("sidebar-reconnect")).toBeVisible();
+    await expect(page.getByTestId("connection-banner")).toHaveCount(0);
     await settle(page);
 
-    // Clip to sidebar width (256px) so the banner and channel list are both visible.
+    // Clip to sidebar width (256px) so the card and channel list are both visible.
     await page.screenshot({
       path: `${SHOTS}/01-sidebar-unreachable.png`,
       clip: { x: 0, y: 0, width: 256, height: 720 },
     });
   });
 
-  test("02 — connection banner while reconnecting", async ({ page }) => {
+  test("02 — sidebar reconnect card while reconnecting", async ({ page }) => {
     await installMockBridge(page);
     await page.goto("/");
 
@@ -68,18 +72,20 @@ test.describe("relay connectivity screenshots", () => {
     await expect(page.getByTestId("channel-general")).toBeVisible();
     await driveConnectionDegraded(page);
 
-    // ConnectionBanner debounces non-healthy states by 2 s before rendering.
-    await expect(page.getByTestId("connection-banner")).toBeVisible({
+    // useRelayConnection debounces non-healthy states by 2 s before surfacing.
+    const relayCard = page.getByTestId("sidebar-relay-unreachable");
+    await expect(relayCard).toBeVisible({
       timeout: 5_000,
     });
-    await expect(page.getByTestId("connection-banner-reconnect")).toBeVisible();
+    await expect(relayCard).toContainText("Can't reach the relay");
+    await expect(relayCard).toContainText("Click to connect");
+    await expect(page.getByTestId("sidebar-reconnect")).toBeVisible();
     await settle(page);
 
-    // Capture a horizontal strip spanning the full width that shows the banner
-    // above the content pane.
+    // Clip to the sidebar, where degraded relay state is now surfaced.
     await page.screenshot({
-      path: `${SHOTS}/02-connection-banner.png`,
-      clip: { x: 0, y: 0, width: 1280, height: 180 },
+      path: `${SHOTS}/02-sidebar-reconnecting.png`,
+      clip: { x: 0, y: 0, width: 256, height: 720 },
     });
   });
 
@@ -192,8 +198,8 @@ test.describe("relay connectivity screenshots", () => {
     await expect(page.getByTestId("channel-general")).toBeVisible();
     await driveConnectionDegraded(page);
 
-    // 2 s debounce on the "reconnecting" state before ConnectionBanner shows.
-    await expect(page.getByTestId("connection-banner")).toBeVisible({
+    // 2 s debounce on the "reconnecting" state before the sidebar card shows.
+    await expect(page.getByTestId("sidebar-relay-unreachable")).toBeVisible({
       timeout: 5_000,
     });
 
@@ -219,4 +225,29 @@ test.describe("relay connectivity screenshots", () => {
       clip: { x: 0, y: 300, width: 480, height: 420 },
     });
   });
+
+  test("08 — sidebar card shows connected after external relay recovery", async ({
+    page,
+  }) => {
+    await installMockBridge(page);
+    await page.goto("/");
+
+    await expect(page.getByTestId("channel-general")).toBeVisible();
+    await driveConnectionDegraded(page);
+
+    const relayCard = page.getByTestId("sidebar-relay-unreachable");
+    await expect(relayCard).toBeVisible({
+      timeout: 5_000,
+    });
+    await expect(relayCard).toContainText("Can't reach the relay");
+    await expect(relayCard).toContainText("Click to connect");
+
+    await driveConnectionDegraded(page, "connected");
+
+    await expect(relayCard).toContainText("Connected");
+    await expect(relayCard).not.toContainText("Click to connect");
+    await expect(relayCard).toBeHidden({
+      timeout: 5_000,
+    });
+  });
 });
diff --git a/desktop/tests/e2e/sidebar.spec.ts b/desktop/tests/e2e/sidebar.spec.ts
index 18c2b1882..c791359e0 100644
--- a/desktop/tests/e2e/sidebar.spec.ts
+++ b/desktop/tests/e2e/sidebar.spec.ts
@@ -66,3 +66,90 @@ test("resizes, persists, and snaps to the default sidebar width", async ({
     .poll(() => storedSidebarWidth(page))
     .toBe(String(DEFAULT_SIDEBAR_WIDTH));
 });
+
+test("shows a sidebar update card when an update is ready", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await expect(page.getByTestId("app-sidebar")).toBeVisible();
+
+  await page.evaluate(() => {
+    const testWindow = window as Window & {
+      __BUZZ_E2E__?: { mock?: { updateAvailable?: boolean } };
+    };
+
+    testWindow.__BUZZ_E2E__ = {
+      ...(testWindow.__BUZZ_E2E__ ?? {}),
+      mock: {
+        ...(testWindow.__BUZZ_E2E__?.mock ?? {}),
+        restartDelayMs: 500,
+        updateAvailable: true,
+      },
+    };
+  });
+
+  await page.getByTestId("sidebar-profile-card").click();
+  await page.getByTestId("profile-popover-settings").click();
+  await page.getByTestId("settings-nav-updates").click();
+  await page.getByRole("button", { name: "Check for Updates" }).click();
+  await expect(page.getByTestId("settings-panel-updates")).toContainText(
+    "Update installed. Restart to apply.",
+  );
+
+  await page.getByTestId("settings-back-to-app").click();
+
+  const updateCard = page.getByTestId("sidebar-update-card");
+  await expect(updateCard).toBeVisible();
+  await expect(updateCard).toContainText("Ready to update!");
+  await expect(updateCard).toContainText("Click to restart");
+  await expect(page.getByTestId("sidebar-update-restart")).toBeVisible();
+  const reservedCardHeight = await updateCard.evaluate(
+    (element) => (element as HTMLElement).offsetHeight,
+  );
+
+  await page.getByTestId("sidebar-update-restart").click();
+  await expect(updateCard).toContainText("Restarting");
+  await expect(page.getByTestId("sidebar-update-restart")).toBeDisabled();
+
+  await expect
+    .poll(() =>
+      page.evaluate(
+        () =>
+          (
+            window as Window & {
+              __BUZZ_E2E_COMMANDS__?: string[];
+            }
+          ).__BUZZ_E2E_COMMANDS__ ?? [],
+      ),
+    )
+    .toContain("plugin:process|restart");
+
+  const dismissButton = page.getByTestId("sidebar-update-dismiss");
+  await updateCard.hover();
+  const dismissButtonBox = await dismissButton.boundingBox();
+  expect(dismissButtonBox).not.toBeNull();
+  if (!dismissButtonBox) return;
+
+  await page.mouse.move(
+    dismissButtonBox.x + dismissButtonBox.width / 2,
+    dismissButtonBox.y + dismissButtonBox.height / 2,
+  );
+  await page.mouse.down();
+  await expect(page.locator(".buzz-poof-burst")).toHaveCount(1);
+  await expect(updateCard).toBeVisible();
+  await page.mouse.up();
+  await expect(updateCard).toHaveAttribute("data-dismissing", "true");
+  await expect
+    .poll(() =>
+      updateCard.evaluate((element) => (element as HTMLElement).offsetHeight),
+    )
+    .toBe(reservedCardHeight);
+  await expect
+    .poll(() =>
+      updateCard.evaluate((element) =>
+        Number.parseFloat(getComputedStyle(element).opacity),
+      ),
+    )
+    .toBeLessThan(0.05);
+  await expect(updateCard).toBeHidden();
+});
diff --git a/desktop/tests/helpers/bridge.ts b/desktop/tests/helpers/bridge.ts
index 3ef71af37..99ac95aa0 100644
--- a/desktop/tests/helpers/bridge.ts
+++ b/desktop/tests/helpers/bridge.ts
@@ -99,7 +99,10 @@ type MockBridgeOptions = {
   profileReadError?: string;
   profileUpdateError?: string;
   searchProfiles?: MockSearchProfileSeed[];
+  updateAvailable?: boolean;
   updateChannelDelayMs?: number;
+  updateDownloadDelayMs?: number;
+  updateVersion?: string;
   stallWebsocketSends?: boolean;
   userSearchDelayMs?: number;
   // NIP-IA gate inputs — drive the archive-button gate matrix in
diff --git a/desktop/tests/helpers/screenshot.mjs b/desktop/tests/helpers/screenshot.mjs
index 096a6d182..552247d81 100644
--- a/desktop/tests/helpers/screenshot.mjs
+++ b/desktop/tests/helpers/screenshot.mjs
@@ -21,6 +21,7 @@
 //   --viewport <WxH>           Viewport dimensions (default: 1280x720)
 //   --outdir <path>            Output directory (default: test-results/screenshots)
 //   --messages <path>          JSON file with messages to inject before capture
+//   --update-ready             Mock an available update so the sidebar update card renders
 
 import { parseArgs } from "node:util";
 import { existsSync, mkdirSync, readFileSync } from "node:fs";
@@ -40,6 +41,7 @@ const { values: args } = parseArgs({
     viewport: { type: "string", default: "1280x720" },
     outdir: { type: "string", default: "test-results/screenshots" },
     messages: { type: "string" },
+    "update-ready": { type: "boolean", default: false },
   },
   strict: true,
 });
@@ -107,31 +109,37 @@ await page.addInitScript(
 );
 
 // Install E2E mock bridge config + MockNotification (mirrors installBridge in bridge.ts)
-await page.addInitScript(() => {
-  class MockNotification extends EventTarget {
-    static permission = "granted";
-    static async requestPermission() {
-      return "granted";
-    }
-    body;
-    onclick = null;
-    title;
-    constructor(title, options) {
-      super();
-      this.title = title;
-      this.body = options?.body ?? null;
+await page.addInitScript(
+  ({ updateReady }) => {
+    class MockNotification extends EventTarget {
+      static permission = "granted";
+      static async requestPermission() {
+        return "granted";
+      }
+      body;
+      onclick = null;
+      title;
+      constructor(title, options) {
+        super();
+        this.title = title;
+        this.body = options?.body ?? null;
+      }
+      close() {}
     }
-    close() {}
-  }
-  Object.defineProperty(window, "Notification", {
-    configurable: true,
-    value: MockNotification,
-    writable: true,
-  });
-
-  window.__BUZZ_E2E__ = { mode: "mock" };
-  window.__BUZZ_E2E_APP_BADGE_COUNT__ = 0;
-});
+    Object.defineProperty(window, "Notification", {
+      configurable: true,
+      value: MockNotification,
+      writable: true,
+    });
+
+    window.__BUZZ_E2E__ = {
+      mode: "mock",
+      ...(updateReady ? { mock: { updateAvailable: true } } : {}),
+    };
+    window.__BUZZ_E2E_APP_BADGE_COUNT__ = 0;
+  },
+  { updateReady: args["update-ready"] },
+);
 
 try {
   if (args.messages) {