feat: Revamped update banner (#1659)

## Problem

Update notifications were easy to miss as ephemeral toasts and the "ready to install" state had no persistent UI.

_The little gift icon animates / shakes periodically so they know something good is inside._ _This_ _is_ _the_ _most_ _important_ _part._

<!-- Who is this for and what problem does it solve? -->

Closes #1640

![CleanShot 2026-04-15 at 15.56.07@2x.png](https://app.graphite.com/user-attachments/assets/f3c4cb1a-5f5f-4615-8b77-1d9a63b40fba.png)

## Changes

1. Replace toast-based UpdatePrompt with persistent UpdateBanner in sidebar
2. Add updateStore (Zustand) to manage update lifecycle state via tRPC subscriptions
3. Animate banner transitions between downloading, ready and installing states
4. Add border separator above ProjectSwitcher for visual consistency

<!-- What did you change and why? -->

<!-- If there are frontend changes, include screenshots. -->

## How did you test this?

Manually

<!-- Describe what you tested -- manual steps, automated tests, or both. -->

<!-- If you're an agent, only list tests you actually ran. -->

Author: charlesvien

apps/code/src/renderer/App.tsx

@@ -2,7 +2,6 @@ import { ErrorBoundary } from "@components/ErrorBoundary";
 import { LoginTransition } from "@components/LoginTransition";
 import { MainLayout } from "@components/MainLayout";
 import { ScopeReauthPrompt } from "@components/ScopeReauthPrompt";
-import { UpdatePrompt } from "@components/UpdatePrompt";
 import { AuthScreen } from "@features/auth/components/AuthScreen";
 import { InviteCodeScreen } from "@features/auth/components/InviteCodeScreen";
 import { useAuthStateValue } from "@features/auth/hooks/authQueries";
@@ -13,6 +12,7 @@ import { Flex, Spinner, Text } from "@radix-ui/themes";
 import { initializeConnectivityStore } from "@renderer/stores/connectivityStore";
 import { useFocusStore } from "@renderer/stores/focusStore";
 import { useThemeStore } from "@renderer/stores/themeStore";
+import { initializeUpdateStore } from "@renderer/stores/updateStore";
 import { trpcClient, useTRPC } from "@renderer/trpc/client";
 import { ANALYTICS_EVENTS } from "@shared/types/analytics";
 import { useQueryClient } from "@tanstack/react-query";
@@ -49,6 +49,11 @@ function App() {
     return initializeConnectivityStore();
   }, []);
 
+  // Initialize update store
+  useEffect(() => {
+    return initializeUpdateStore();
+  }, []);
+
   // Dev-only inbox demo command for local QA from the renderer console.
   useEffect(() => {
     if (import.meta.env.PROD) {
@@ -218,7 +223,6 @@ function App() {
         onComplete={handleTransitionComplete}
       />
       <ScopeReauthPrompt />
-      <UpdatePrompt />
       <Toaster position="bottom-right" />
     </ErrorBoundary>
   );

apps/code/src/renderer/components/UpdatePrompt.tsx

@@ -5,6 +5,7 @@ import { useNavigationStore } from "@stores/navigationStore";
 import type React from "react";
 import { ProjectSwitcher } from "./ProjectSwitcher";
 import { SidebarMenu } from "./SidebarMenu";
+import { UpdateBanner } from "./UpdateBanner";
 
 export const SidebarContent: React.FC = () => {
   const archivedTaskIds = useArchivedTaskIds();
@@ -17,6 +18,7 @@ export const SidebarContent: React.FC = () => {
       <Box flexGrow="1" overflow="hidden">
         <SidebarMenu />
       </Box>
+      <UpdateBanner />
       {archivedTaskIds.size > 0 && (
         <Box className="shrink-0 border-gray-6 border-t">
           <button
@@ -31,7 +33,7 @@ export const SidebarContent: React.FC = () => {
           </button>
         </Box>
       )}
-      <Box p="2" className="shrink-0">
+      <Box p="2" className="shrink-0 border-gray-6 border-t">
         <ProjectSwitcher />
       </Box>
     </Flex>