diff --git a/bun.lock b/bun.lock
index 0ec6689ea..61d9b8d4a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -64,7 +64,7 @@
     },
     "apps/opencode-plugin": {
       "name": "@plannotator/opencode",
-      "version": "0.19.21",
+      "version": "0.19.22",
       "dependencies": {
         "@opencode-ai/plugin": "^1.1.10",
       },
@@ -86,7 +86,7 @@
     },
     "apps/pi-extension": {
       "name": "@plannotator/pi-extension",
-      "version": "0.19.21",
+      "version": "0.19.22",
       "dependencies": {
         "@joplin/turndown-plugin-gfm": "^1.0.64",
         "@pierre/diffs": "^1.1.12",
@@ -201,7 +201,7 @@
     },
     "packages/server": {
       "name": "@plannotator/server",
-      "version": "0.19.21",
+      "version": "0.19.22",
       "dependencies": {
         "@pierre/diffs": "^1.1.12",
         "@plannotator/ai": "workspace:*",
@@ -237,6 +237,7 @@
         "lucide-react": "^1.14.0",
         "marked": "^17.0.6",
         "mermaid": "^11.12.2",
+        "motion": "^12.38.0",
         "overlayscrollbars": "^2.11.0",
         "overlayscrollbars-react": "^0.5.6",
         "perfect-freehand": "^1.2.2",
diff --git a/packages/editor/App.tsx b/packages/editor/App.tsx
index a1ce4137e..8aefd8374 100644
--- a/packages/editor/App.tsx
+++ b/packages/editor/App.tsx
@@ -24,7 +24,7 @@ import { useActiveSection } from '@plannotator/ui/hooks/useActiveSection';
 import { storage } from '@plannotator/ui/utils/storage';
 import { configStore } from '@plannotator/ui/config';
 import { CompletionOverlay } from '@plannotator/ui/components/CompletionOverlay';
-import { UpdateBanner } from '@plannotator/ui/components/UpdateBanner';
+import { useUpdateCheck } from '@plannotator/ui/hooks/useUpdateCheck';
 import { PlanAIAnnouncementDialog } from '@plannotator/ui/components/PlanAIAnnouncementDialog';
 import { getObsidianSettings, getEffectiveVaultPath, isObsidianConfigured, CUSTOM_PATH_SENTINEL } from '@plannotator/ui/utils/obsidian';
 import { getBearSettings } from '@plannotator/ui/utils/bear';
@@ -153,6 +153,7 @@ const App: React.FC = () => {
   const [origin, setOrigin] = useState<Origin | null>(null);
   const [gitUser, setGitUser] = useState<string | undefined>();
   const [isWSL, setIsWSL] = useState(false);
+  const updateInfo = useUpdateCheck();
   const [globalAttachments, setGlobalAttachments] = useState<ImageAttachment[]>([]);
   const [annotateMode, setAnnotateMode] = useState(false);
   const [gate, setGate] = useState(false);
@@ -1993,6 +1994,8 @@ const App: React.FC = () => {
           onSaveToBear={handleSaveToBear}
           onSaveToOctarine={handleSaveToOctarine}
           appVersion={typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0'}
+          updateInfo={updateInfo}
+          isWSL={isWSL}
           agentInstructionsEnabled={isApiMode && !archive.archiveMode && !annotateMode && !goalSetupMode}
           obsidianConfigured={isObsidianConfigured()}
           bearConfigured={getBearSettings().enabled}
@@ -2519,9 +2522,6 @@ const App: React.FC = () => {
           agentLabel={agentName}
         />
 
-        {/* Update notification */}
-        <UpdateBanner origin={origin} isWSL={isWSL} />
-
         <PlanAIAnnouncementDialog
           isOpen={shouldShowPlanAIAnnouncement}
           origin={origin}
diff --git a/packages/editor/components/AppHeader.tsx b/packages/editor/components/AppHeader.tsx
index a515c6df3..0e791d2fb 100644
--- a/packages/editor/components/AppHeader.tsx
+++ b/packages/editor/components/AppHeader.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Origin } from '@plannotator/shared/agents';
 import type { Agent } from '@plannotator/ui/hooks/useAgents';
+import type { UpdateInfo } from '@plannotator/ui/hooks/useUpdateCheck';
 import { FeedbackButton, ApproveButton, ExitButton } from '@plannotator/ui/components/ToolbarButtons';
 import { ApproveDropdown } from '@plannotator/ui/components/ApproveDropdown';
 import { Settings } from '@plannotator/ui/components/Settings';
@@ -76,6 +77,8 @@ interface AppHeaderProps {
 
   // PlanHeaderMenu config
   appVersion: string;
+  updateInfo?: UpdateInfo | null;
+  isWSL?: boolean;
   agentInstructionsEnabled: boolean;
   obsidianConfigured: boolean;
   bearConfigured: boolean;
@@ -138,6 +141,8 @@ export const AppHeader = React.memo<AppHeaderProps>(({
   onSaveToBear,
   onSaveToOctarine,
   appVersion,
+  updateInfo,
+  isWSL,
   agentInstructionsEnabled,
   obsidianConfigured,
   bearConfigured,
@@ -321,6 +326,9 @@ export const AppHeader = React.memo<AppHeaderProps>(({
 
         <PlanHeaderMenu
           appVersion={appVersion}
+          updateInfo={updateInfo}
+          origin={origin}
+          isWSL={isWSL}
           onOpenSettings={onOpenSettings}
           onOpenExport={onOpenExport}
           onCopyAgentInstructions={onCopyAgentInstructions}
diff --git a/packages/review-editor/App.tsx b/packages/review-editor/App.tsx
index dde907718..03df66ee1 100644
--- a/packages/review-editor/App.tsx
+++ b/packages/review-editor/App.tsx
@@ -6,7 +6,7 @@ import { ConfirmDialog } from '@plannotator/ui/components/ConfirmDialog';
 import { Settings } from '@plannotator/ui/components/Settings';
 import { FeedbackButton, ApproveButton, ExitButton } from '@plannotator/ui/components/ToolbarButtons';
 import { AgentReviewActions } from './components/AgentReviewActions';
-import { UpdateBanner } from '@plannotator/ui/components/UpdateBanner';
+import { useUpdateCheck } from '@plannotator/ui/hooks/useUpdateCheck';
 import { storage } from '@plannotator/ui/utils/storage';
 import { CompletionOverlay } from '@plannotator/ui/components/CompletionOverlay';
 import { GitHubIcon } from '@plannotator/ui/components/GitHubIcon';
@@ -256,6 +256,7 @@ const ReviewApp: React.FC = () => {
   const mrNumberLabel = prMetadata ? getMRNumberLabel(prMetadata) : '';
   const displayRepo = prMetadata ? getDisplayRepo(prMetadata) : '';
   const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0';
+  const updateInfo = useUpdateCheck();
 
   const identity = useConfigValue('displayName');
 
@@ -2079,6 +2080,9 @@ const ReviewApp: React.FC = () => {
               isFileTreeOpen={isFileTreeOpen}
               isSidebarOpen={reviewSidebar.isOpen}
               appVersion={appVersion}
+              updateInfo={updateInfo}
+              origin={origin}
+              isWSL={isWSL}
             />
 
             <div className="w-px h-5 bg-border/50 mx-1 hidden md:block" />
@@ -2467,9 +2471,6 @@ const ReviewApp: React.FC = () => {
           agentLabel={getAgentName(origin)}
         />
 
-        {/* Update notification */}
-        <UpdateBanner origin={origin} isWSL={isWSL} />
-
         {/* GitHub general comment dialog */}
         <ReviewSubmissionDialog
           isOpen={!!platformCommentDialog}
diff --git a/packages/review-editor/components/ReviewHeaderMenu.tsx b/packages/review-editor/components/ReviewHeaderMenu.tsx
index f1f0c204e..9149c7349 100644
--- a/packages/review-editor/components/ReviewHeaderMenu.tsx
+++ b/packages/review-editor/components/ReviewHeaderMenu.tsx
@@ -6,7 +6,10 @@ import {
   ActionMenuSectionLabel,
 } from '@plannotator/ui/components/ActionMenu';
 import { useTheme } from '@plannotator/ui/components/ThemeProvider';
+import { MenuVersionSection } from '@plannotator/ui/components/MenuVersionSection';
 import { modKey } from '@plannotator/ui/utils/platform';
+import type { UpdateInfo } from '@plannotator/ui/hooks/useUpdateCheck';
+import type { Origin } from '@plannotator/shared/agents';
 
 interface ReviewHeaderMenuProps {
   onOpenSettings: () => void;
@@ -16,6 +19,9 @@ interface ReviewHeaderMenuProps {
   isFileTreeOpen: boolean;
   isSidebarOpen: boolean;
   appVersion: string;
+  updateInfo?: UpdateInfo | null;
+  origin?: Origin | null;
+  isWSL?: boolean;
 }
 
 export const ReviewHeaderMenu: React.FC<ReviewHeaderMenuProps> = ({
@@ -26,18 +32,26 @@ export const ReviewHeaderMenu: React.FC<ReviewHeaderMenuProps> = ({
   isFileTreeOpen,
   isSidebarOpen,
   appVersion,
+  updateInfo,
+  origin,
+  isWSL = false,
 }) => {
   const { theme, resolvedMode, setTheme } = useTheme();
   const activeTheme = useMemo<'light' | 'dark'>(() => {
     return theme === 'system' ? resolvedMode : theme;
   }, [resolvedMode, theme]);
 
+  const showUpdateDot = !!updateInfo?.updateAvailable && !updateInfo.dismissed;
+
   return (
     <ActionMenu
       renderTrigger={({ isOpen, toggleMenu }) => (
         <button
-          onClick={toggleMenu}
-          className={`flex items-center gap-1.5 p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium transition-colors ${
+          onClick={() => {
+            if (!isOpen && showUpdateDot) updateInfo?.dismiss();
+            toggleMenu();
+          }}
+          className={`relative flex items-center gap-1.5 p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium transition-colors ${
             isOpen
               ? 'bg-muted text-foreground'
               : 'text-muted-foreground hover:text-foreground hover:bg-muted'
@@ -48,6 +62,9 @@ export const ReviewHeaderMenu: React.FC<ReviewHeaderMenuProps> = ({
         >
           {isOpen ? <CloseIcon /> : <MenuIcon />}
           <span className="hidden md:inline">Options</span>
+          {showUpdateDot && (
+            <span className="absolute top-0.5 right-0.5 md:-top-0.5 md:-right-0.5 w-2 h-2 rounded-full bg-primary ring-2 ring-background" />
+          )}
         </button>
       )}
     >
@@ -118,34 +135,13 @@ export const ReviewHeaderMenu: React.FC<ReviewHeaderMenuProps> = ({
 
           <ActionMenuDivider />
 
-          <div className="px-3 py-2 space-y-2">
-            <div className="flex items-center justify-between gap-3">
-              <ActionMenuSectionLabel>Plannotator</ActionMenuSectionLabel>
-              <span className="text-[10px] font-mono text-muted-foreground/70">
-                v{appVersion}
-              </span>
-            </div>
-            <div className="flex flex-col items-start gap-1 text-[11px]">
-              <a
-                href="https://github.com/backnotprop/plannotator/releases"
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={closeMenu}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Release notes
-              </a>
-              <a
-                href="https://github.com/backnotprop/plannotator"
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={closeMenu}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Project repo
-              </a>
-            </div>
-          </div>
+          <MenuVersionSection
+            appVersion={appVersion}
+            updateInfo={updateInfo}
+            origin={origin}
+            isWSL={isWSL}
+            closeMenu={closeMenu}
+          />
         </>
       )}
     </ActionMenu>
diff --git a/packages/ui/components/BorderTrail.tsx b/packages/ui/components/BorderTrail.tsx
new file mode 100644
index 000000000..7292a5bb7
--- /dev/null
+++ b/packages/ui/components/BorderTrail.tsx
@@ -0,0 +1,38 @@
+import { motion, type Transition } from 'motion/react';
+
+export interface BorderTrailProps {
+  className?: string;
+  size?: number;
+  transition?: Transition;
+  style?: React.CSSProperties;
+}
+
+export function BorderTrail({
+  className,
+  size = 60,
+  transition,
+  style,
+}: BorderTrailProps) {
+  const defaultTransition: Transition = {
+    repeat: Infinity,
+    duration: 5,
+    ease: 'linear',
+  };
+
+  return (
+    <div className="pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)]">
+      <motion.div
+        className={['absolute aspect-square bg-zinc-500', className].filter(Boolean).join(' ')}
+        style={{
+          width: size,
+          offsetPath: `rect(0 auto auto 0 round ${size}px)`,
+          ...style,
+        }}
+        animate={{
+          offsetDistance: ['0%', '100%'],
+        }}
+        transition={transition ?? defaultTransition}
+      />
+    </div>
+  );
+}
diff --git a/packages/ui/components/MenuVersionSection.tsx b/packages/ui/components/MenuVersionSection.tsx
new file mode 100644
index 000000000..35e7c6cf7
--- /dev/null
+++ b/packages/ui/components/MenuVersionSection.tsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { TextShimmer } from './TextShimmer';
+import type { UpdateInfo } from '../hooks/useUpdateCheck';
+import type { Origin } from '@plannotator/shared/agents';
+import { isWindows } from '../utils/platform';
+
+const PI_INSTALL_COMMAND = 'pi install npm:@plannotator/pi-extension';
+
+function getInstallCommand(origin?: Origin | null, isWSL = false): string {
+  if (origin === 'pi') return PI_INSTALL_COMMAND;
+  return isWindows && !isWSL
+    ? 'powershell -c "irm https://plannotator.ai/install.ps1 | iex"'
+    : 'curl -fsSL https://plannotator.ai/install.sh | bash';
+}
+
+interface MenuVersionSectionProps {
+  appVersion: string;
+  updateInfo?: UpdateInfo | null;
+  origin?: Origin | null;
+  isWSL: boolean;
+  closeMenu: () => void;
+}
+
+export const MenuVersionSection: React.FC<MenuVersionSectionProps> = ({
+  appVersion,
+  updateInfo,
+  origin,
+  isWSL,
+  closeMenu,
+}) => {
+  const [copied, setCopied] = useState(false);
+  const hasUpdate = !!updateInfo?.updateAvailable;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(getInstallCommand(origin, isWSL));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (e) {
+      console.error('Failed to copy:', e);
+    }
+  };
+
+  return (
+    <div className="px-3 py-2 space-y-2">
+      <div className="flex items-center justify-between gap-3">
+        <a
+          href="https://github.com/backnotprop/plannotator"
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={closeMenu}
+          className="text-[10px] font-semibold tracking-wide text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Plannotator
+        </a>
+        <span className="text-[10px] font-mono text-muted-foreground/70">
+          v{appVersion}
+        </span>
+      </div>
+      <div className="flex flex-col items-start gap-1 text-[11px]">
+        <span className="flex items-center gap-1.5">
+          <a
+            href={hasUpdate ? updateInfo!.releaseUrl : 'https://github.com/backnotprop/plannotator/releases'}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={closeMenu}
+            className="text-muted-foreground hover:text-foreground transition-colors"
+          >
+            Release notes
+          </a>
+          {hasUpdate && (
+            <>
+              <span className="text-muted-foreground/40">·</span>
+              <TextShimmer className="text-[10px] font-medium" duration={2.5} spread={1.5}>
+                New update available!
+              </TextShimmer>
+            </>
+          )}
+        </span>
+        {hasUpdate && (
+          <button
+            onClick={handleCopy}
+            className="text-emerald-500 hover:text-emerald-400 transition-colors"
+          >
+            {copied ? 'Copied!' : 'Copy update command'}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/components/PlanHeaderMenu.tsx b/packages/ui/components/PlanHeaderMenu.tsx
index 85baf34b9..82d2d786d 100644
--- a/packages/ui/components/PlanHeaderMenu.tsx
+++ b/packages/ui/components/PlanHeaderMenu.tsx
@@ -8,9 +8,15 @@ import {
 import { useTheme } from './ThemeProvider';
 import { SunIcon, MoonIcon, SystemIcon } from './icons/themeIcons';
 import { ReviewAgentsIcon } from './ReviewAgentsIcon';
+import { MenuVersionSection } from './MenuVersionSection';
+import type { UpdateInfo } from '../hooks/useUpdateCheck';
+import type { Origin } from '@plannotator/shared/agents';
 
 interface PlanHeaderMenuProps {
   appVersion: string;
+  updateInfo?: UpdateInfo | null;
+  origin?: Origin | null;
+  isWSL?: boolean;
   onOpenSettings: () => void;
   onOpenExport: () => void;
   onCopyAgentInstructions: () => void;
@@ -31,6 +37,9 @@ interface PlanHeaderMenuProps {
 
 export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
   appVersion,
+  updateInfo,
+  origin,
+  isWSL = false,
   onOpenSettings,
   onOpenExport,
   onCopyAgentInstructions,
@@ -50,6 +59,8 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
 }) => {
   const { theme, setTheme } = useTheme();
 
+  const showUpdateDot = !!updateInfo?.updateAvailable && !updateInfo.dismissed;
+
   const anyNotesAppConfigured =
     isApiMode && (obsidianConfigured || bearConfigured || octarineConfigured);
 
@@ -57,7 +68,10 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
     <ActionMenu
       renderTrigger={({ isOpen, toggleMenu }) => (
         <button
-          onClick={toggleMenu}
+          onClick={() => {
+            if (!isOpen && showUpdateDot) updateInfo?.dismiss();
+            toggleMenu();
+          }}
           className={`relative flex items-center gap-1.5 p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium transition-colors ${
             isOpen
               ? 'bg-muted text-foreground'
@@ -69,6 +83,9 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
         >
           {isOpen ? <CloseIcon /> : <MenuIcon />}
           <span className="hidden md:inline">Options</span>
+          {showUpdateDot && (
+            <span className="absolute top-0.5 right-0.5 md:-top-0.5 md:-right-0.5 w-2 h-2 rounded-full bg-primary ring-2 ring-background" />
+          )}
         </button>
       )}
     >
@@ -205,34 +222,13 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
 
           <ActionMenuDivider />
 
-          <div className="px-3 py-2 space-y-2">
-            <div className="flex items-center justify-between gap-3">
-              <ActionMenuSectionLabel>Plannotator</ActionMenuSectionLabel>
-              <span className="text-[10px] font-mono text-muted-foreground/70">
-                v{appVersion}
-              </span>
-            </div>
-            <div className="flex flex-col items-start gap-1 text-[11px]">
-              <a
-                href="https://github.com/backnotprop/plannotator/releases"
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={closeMenu}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Release notes
-              </a>
-              <a
-                href="https://github.com/backnotprop/plannotator"
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={closeMenu}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-              >
-                Project repo
-              </a>
-            </div>
-          </div>
+          <MenuVersionSection
+            appVersion={appVersion}
+            updateInfo={updateInfo}
+            origin={origin}
+            isWSL={isWSL}
+            closeMenu={closeMenu}
+          />
         </>
       )}
     </ActionMenu>
diff --git a/packages/ui/components/TextShimmer.tsx b/packages/ui/components/TextShimmer.tsx
new file mode 100644
index 000000000..9589039c8
--- /dev/null
+++ b/packages/ui/components/TextShimmer.tsx
@@ -0,0 +1,57 @@
+import React, { useMemo, type JSX } from 'react';
+import { motion } from 'motion/react';
+
+export interface TextShimmerProps {
+  children: string;
+  as?: React.ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+}
+
+function TextShimmerComponent({
+  children,
+  as: Component = 'span',
+  className,
+  duration = 2,
+  spread = 2,
+}: TextShimmerProps) {
+  const MotionComponent = motion.create(
+    Component as keyof JSX.IntrinsicElements
+  );
+
+  const dynamicSpread = useMemo(() => {
+    return children.length * spread;
+  }, [children, spread]);
+
+  return (
+    <MotionComponent
+      className={[
+        'relative inline-block bg-[length:250%_100%,auto] bg-clip-text',
+        'text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]',
+        '[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]',
+        'dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      initial={{ backgroundPosition: '100% center' }}
+      animate={{ backgroundPosition: '0% center' }}
+      transition={{
+        repeat: Infinity,
+        duration,
+        ease: 'linear',
+      }}
+      style={
+        {
+          '--spread': `${dynamicSpread}px`,
+          backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </MotionComponent>
+  );
+}
+
+export const TextShimmer = React.memo(TextShimmerComponent);
diff --git a/packages/ui/components/UpdateBanner.tsx b/packages/ui/components/UpdateBanner.tsx
deleted file mode 100644
index 2cf6fab56..000000000
--- a/packages/ui/components/UpdateBanner.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { useState } from 'react';
-import type { Origin } from '@plannotator/shared/agents';
-import { useUpdateCheck } from '../hooks/useUpdateCheck';
-import { isWindows } from '../utils/platform';
-
-const PI_INSTALL_COMMAND = 'pi install npm:@plannotator/pi-extension';
-
-function getInstallCommand(isWSL: boolean): string {
-  return isWindows && !isWSL
-    ? 'powershell -c "irm https://plannotator.ai/install.ps1 | iex"'
-    : 'curl -fsSL https://plannotator.ai/install.sh | bash';
-}
-
-interface UpdateBannerProps {
-  origin?: Origin | null;
-  isWSL?: boolean;
-}
-
-export const UpdateBanner: React.FC<UpdateBannerProps> = ({ origin, isWSL = false }) => {
-  const updateInfo = useUpdateCheck();
-  const [copied, setCopied] = useState(false);
-  const [dismissed, setDismissed] = useState(false);
-
-  // Debug: ?preview-origin=opencode to test OpenCode-specific UI
-  const urlParams = new URLSearchParams(window.location.search);
-  const previewOrigin = urlParams.get('preview-origin');
-  const effectiveOrigin = previewOrigin || origin;
-  const isPi = effectiveOrigin === 'pi';
-  const isOpenCode = effectiveOrigin === 'opencode';
-  const installCommand = isPi ? PI_INSTALL_COMMAND : getInstallCommand(isWSL);
-
-  if (!updateInfo?.updateAvailable || dismissed) return null;
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(installCommand);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (e) {
-      console.error('Failed to copy:', e);
-    }
-  };
-
-  const hasFeature = !!updateInfo.featureHighlight;
-
-  // Expanded banner for milestone releases with feature highlights
-  if (hasFeature) {
-    return (
-      <div className="fixed bottom-4 right-4 z-50 max-w-md animate-in slide-in-from-bottom-2 fade-in duration-300">
-        <div className="bg-card border border-primary/30 rounded-xl shadow-2xl overflow-hidden">
-          {/* Feature highlight header */}
-          <div className="bg-gradient-to-r from-primary/20 to-primary/5 px-5 py-4 border-b border-border/50">
-            <div className="flex items-start justify-between gap-3">
-              <div className="flex items-center gap-3">
-                <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
-                  <svg className="w-5 h-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-                  </svg>
-                </div>
-                <div>
-                  <h4 className="text-base font-semibold text-foreground">
-                    {updateInfo.featureHighlight!.title}
-                  </h4>
-                  <p className="text-xs text-muted-foreground mt-0.5">
-                    New in {updateInfo.latestVersion}
-                  </p>
-                </div>
-              </div>
-              <button
-                onClick={() => setDismissed(true)}
-                className="text-muted-foreground hover:text-foreground transition-colors p-1"
-              >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-          </div>
-
-          {/* Feature description */}
-          <div className="px-5 py-4">
-            <p className="text-sm text-foreground/80 leading-relaxed">
-              {updateInfo.featureHighlight!.description}
-            </p>
-
-            <p className="text-xs text-muted-foreground mt-3">
-              You have {updateInfo.currentVersion}
-            </p>
-
-            {/* Agent-specific extra instructions */}
-            {isOpenCode && (
-              <p className="text-xs text-muted-foreground mt-3">
-                Run the install script, then restart OpenCode.
-              </p>
-            )}
-            {isPi && (
-              <p className="text-xs text-muted-foreground mt-3">
-                Run the install command, then restart Pi.
-              </p>
-            )}
-
-            <div className="mt-4 flex items-center gap-2">
-              <button
-                onClick={handleCopy}
-                className="flex-1 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity"
-              >
-                {copied ? 'Copied!' : 'Copy install command'}
-              </button>
-              <a
-                href={updateInfo.releaseUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground border border-border rounded-lg hover:bg-muted transition-colors"
-              >
-                Release notes
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Standard update banner
-  return (
-    <div className="fixed bottom-4 right-4 z-50 max-w-sm animate-in slide-in-from-bottom-2 fade-in duration-300">
-      <div className="bg-card border border-border rounded-lg shadow-xl p-4">
-        <div className="flex items-start gap-3">
-          <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
-            <svg className="w-4 h-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-            </svg>
-          </div>
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center justify-between gap-2">
-              <h4 className="text-sm font-medium text-foreground">
-                Update available
-              </h4>
-              <button
-                onClick={() => setDismissed(true)}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-            <p className="text-xs text-muted-foreground mt-0.5">
-              {updateInfo.latestVersion} is available (you have {updateInfo.currentVersion})
-            </p>
-            <div className="mt-3 flex items-center gap-2">
-              <button
-                onClick={handleCopy}
-                className="flex-1 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:opacity-90 transition-opacity"
-              >
-                {copied ? 'Copied!' : 'Copy install command'}
-              </button>
-              <a
-                href={updateInfo.releaseUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted transition-colors"
-              >
-                Notes
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/ui/hooks/useUpdateCheck.ts b/packages/ui/hooks/useUpdateCheck.ts
index cc10ac681..94808997e 100644
--- a/packages/ui/hooks/useUpdateCheck.ts
+++ b/packages/ui/hooks/useUpdateCheck.ts
@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { getItem, setItem } from '../utils/storage';
 
 declare const __APP_VERSION__: string;
 
@@ -7,7 +8,17 @@ export interface FeatureHighlight {
   description: string;
 }
 
-interface UpdateInfo {
+export interface UpdateInfo {
+  currentVersion: string;
+  latestVersion: string;
+  updateAvailable: boolean;
+  dismissed: boolean;
+  releaseUrl: string;
+  featureHighlight?: FeatureHighlight;
+  dismiss: () => void;
+}
+
+interface VersionCheckResult {
   currentVersion: string;
   latestVersion: string;
   updateAvailable: boolean;
@@ -17,6 +28,8 @@ interface UpdateInfo {
 
 const GITHUB_API = 'https://api.github.com/repos/backnotprop/plannotator/releases/latest';
 
+const DISMISSED_VERSION_KEY = 'update-dismissed-version';
+
 // Feature highlights for milestone releases
 const FEATURE_HIGHLIGHTS: Record<string, FeatureHighlight> = {
   '0.5.0': {
@@ -39,8 +52,24 @@ function compareVersions(current: string, latest: string): boolean {
   return false;
 }
 
+function isDismissedVersion(latestVersion: string): boolean {
+  const dismissed = getItem(DISMISSED_VERSION_KEY);
+  if (!dismissed) return false;
+  const cleanLatest = latestVersion.replace(/^v/, '');
+  const cleanDismissed = dismissed.replace(/^v/, '');
+  return cleanLatest === cleanDismissed;
+}
+
 export function useUpdateCheck(): UpdateInfo | null {
-  const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
+  const [checkResult, setCheckResult] = useState<VersionCheckResult | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+
+  const dismiss = useCallback(() => {
+    if (!checkResult?.latestVersion) return;
+    const clean = checkResult.latestVersion.replace(/^v/, '');
+    setItem(DISMISSED_VERSION_KEY, clean);
+    setDismissed(true);
+  }, [checkResult?.latestVersion]);
 
   useEffect(() => {
     const checkForUpdates = async () => {
@@ -55,7 +84,8 @@ export function useUpdateCheck(): UpdateInfo | null {
 
         if (previewVersion) {
           const cleanPreview = previewVersion.replace(/^v/, '');
-          setUpdateInfo({
+          setDismissed(isDismissedVersion(cleanPreview));
+          setCheckResult({
             currentVersion,
             latestVersion: previewVersion,
             updateAvailable: true,
@@ -73,11 +103,11 @@ export function useUpdateCheck(): UpdateInfo | null {
 
         const updateAvailable = compareVersions(currentVersion, latestVersion);
 
-        // Check for feature highlight for this version
         const cleanLatest = latestVersion.replace(/^v/, '');
         const featureHighlight = FEATURE_HIGHLIGHTS[cleanLatest];
 
-        setUpdateInfo({
+        setDismissed(isDismissedVersion(latestVersion));
+        setCheckResult({
           currentVersion,
           latestVersion,
           updateAvailable,
@@ -85,7 +115,6 @@ export function useUpdateCheck(): UpdateInfo | null {
           featureHighlight,
         });
       } catch (e) {
-        // Silently fail - update check is not critical
         console.debug('Update check failed:', e);
       }
     };
@@ -93,5 +122,11 @@ export function useUpdateCheck(): UpdateInfo | null {
     checkForUpdates();
   }, []);
 
-  return updateInfo;
+  if (!checkResult) return null;
+
+  return {
+    ...checkResult,
+    dismissed,
+    dismiss,
+  };
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4374f3c3e..0f14707c7 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -35,6 +35,7 @@
     "overlayscrollbars": "^2.11.0",
     "overlayscrollbars-react": "^0.5.6",
     "perfect-freehand": "^1.2.2",
+    "motion": "^12.38.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "unique-username-generator": "^1.5.1"