(CODUX-125) Gate title-bar Update button on real availability

dashboard/src/v2/components/TitleBar.tsx

@@ -2,6 +2,7 @@ import type { FunctionComponent, JSX } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { Copy, Download, Minus, Square, X } from "lucide-preact";
 import { RobotLogo } from "./brand/RobotLogo.js";
+import { useUpdateStatus } from "../hooks/use-update-status.js";
 
 declare const __APP_VERSION__: string;
 
@@ -21,6 +22,7 @@ export const TitleBar: FunctionComponent<TitleBarProps> = ({ appearanceVariant =
   const windowApi = desktop?.window;
   const [platform, setPlatform] = useState<Platform>(() => resolvePlatform(desktop?.platform));
   const [isMaximized, setIsMaximized] = useState(false);
+  const { updateAvailable, latestVersion } = useUpdateStatus();
 
   useEffect(() => {
     if (!windowApi) return;
@@ -55,6 +57,7 @@ export const TitleBar: FunctionComponent<TitleBarProps> = ({ appearanceVariant =
     event.stopPropagation();
     void desktop?.openUpdates?.();
   };
+  const updateLabel = latestVersion ? `Update available: v${latestVersion}` : "Open updates";
 
   const controls = isMac ? null : (
     <div className="flex items-stretch h-full titlebar-no-drag">
@@ -129,16 +132,19 @@ export const TitleBar: FunctionComponent<TitleBarProps> = ({ appearanceVariant =
             v{__APP_VERSION__}
           </span>
         </span>
-        <button
-          type="button"
-          onClick={handleUpdateClick}
-          onDblClick={stopTitleBarDoubleClick}
-          aria-label="Open updates"
-          className="titlebar-no-drag inline-flex h-5 shrink-0 items-center gap-1 rounded-full border border-amber-500/20 bg-amber-500/10 px-1.5 text-[9px] font-bold uppercase tracking-wider text-amber-600 transition-colors hover:border-amber-500/35 hover:bg-amber-500/15 hover:text-amber-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/45 dark:border-amber-400/20 dark:bg-amber-400/10 dark:text-amber-400 dark:hover:border-amber-300/35 dark:hover:bg-amber-400/15 dark:hover:text-amber-300"
-        >
-          <Download aria-hidden="true" className="h-3 w-3" strokeWidth={2} />
-          Update
-        </button>
+        {updateAvailable ? (
+          <button
+            type="button"
+            onClick={handleUpdateClick}
+            onDblClick={stopTitleBarDoubleClick}
+            aria-label={updateLabel}
+            title={updateLabel}
+            className="titlebar-no-drag inline-flex h-5 shrink-0 items-center gap-1 rounded-full border border-amber-500/20 bg-amber-500/10 px-1.5 text-[9px] font-bold uppercase tracking-wider text-amber-600 transition-colors hover:border-amber-500/35 hover:bg-amber-500/15 hover:text-amber-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/45 dark:border-amber-400/20 dark:bg-amber-400/10 dark:text-amber-400 dark:hover:border-amber-300/35 dark:hover:bg-amber-400/15 dark:hover:text-amber-300"
+          >
+            <Download aria-hidden="true" className="h-3 w-3" strokeWidth={2} />
+            Update
+          </button>
+        ) : null}
       </div>
       {controls}
     </div>

dashboard/src/v2/components/__tests__/TitleBar.test.tsx

@@ -6,11 +6,41 @@ import { h } from "preact";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/preact";
 import "@testing-library/jest-dom/vitest";
+import { useUpdateStatus } from "../../hooks/use-update-status.js";
 import { TitleBar } from "../TitleBar.js";
 
+vi.mock("../../hooks/use-update-status.js", () => ({
+  useUpdateStatus: vi.fn(),
+}));
+
+const mockUseUpdateStatus = vi.mocked(useUpdateStatus);
+
+const installDesktopApi = () => {
+  const desktopApi = {
+    platform: "linux",
+    renderProfile: "standard" as const,
+    pickDirectory: vi.fn(),
+    openUpdates: vi.fn().mockResolvedValue(true),
+    window: {
+      getState: vi.fn().mockResolvedValue({ isMaximized: false, isFullScreen: false, platform: "linux" }),
+      onStateChange: vi.fn(() => () => {}),
+      minimize: vi.fn(),
+      toggleMaximize: vi.fn().mockResolvedValue(true),
+      close: vi.fn(),
+    },
+  };
+  window.codeUxDesktop = desktopApi;
+  return desktopApi;
+};
+
 describe("TitleBar", () => {
   beforeEach(() => {
     vi.stubGlobal("__APP_VERSION__", "0.8.9");
+    mockUseUpdateStatus.mockReturnValue({
+      status: null,
+      updateAvailable: false,
+      latestVersion: null,
+    });
   });
 
   afterEach(() => {
@@ -24,27 +54,39 @@ describe("TitleBar", () => {
 
     expect(container).toBeEmptyDOMElement();
 
-    window.codeUxDesktop = {
-      platform: "linux",
-      renderProfile: "standard",
-      pickDirectory: vi.fn(),
-      openUpdates: vi.fn().mockResolvedValue(true),
-      window: {
-        getState: vi.fn().mockResolvedValue({ isMaximized: false, isFullScreen: false, platform: "linux" }),
-        onStateChange: vi.fn(() => () => {}),
-        minimize: vi.fn(),
-        toggleMaximize: vi.fn().mockResolvedValue(true),
-        close: vi.fn(),
-      },
-    };
+    installDesktopApi();
 
     rerender(<TitleBar />);
 
     expect(screen.getByText("v0.8.9")).toBeInTheDocument();
-    const updateButton = screen.getByRole("button", { name: "Open updates" });
+  });
+
+  it("renders the update button with the available version and opens updates when clicked", () => {
+    mockUseUpdateStatus.mockReturnValue({
+      status: null,
+      updateAvailable: true,
+      latestVersion: "0.9.0",
+    });
+    const desktopApi = installDesktopApi();
+
+    render(<TitleBar />);
+
+    const updateButton = screen.getByRole("button", { name: "Update available: v0.9.0" });
 
     fireEvent.click(updateButton);
 
-    expect(window.codeUxDesktop.openUpdates).toHaveBeenCalledTimes(1);
+    expect(desktopApi.openUpdates).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides the update button when no update is available while keeping title and window controls", () => {
+    installDesktopApi();
+
+    render(<TitleBar />);
+
+    expect(screen.queryByRole("button", { name: /update/i })).not.toBeInTheDocument();
+    expect(screen.getByText("v0.8.9")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Minimize window" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Maximize window" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Close window" })).toBeInTheDocument();
   });
 });

tests/dashboard/v2/title-bar.test.tsx

@@ -5,9 +5,15 @@ import { act } from "preact/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/preact";
 import "@testing-library/jest-dom/vitest";
+import { useUpdateStatus } from "../../../dashboard/src/v2/hooks/use-update-status.js";
 import { TitleBar } from "../../../dashboard/src/v2/components/TitleBar.js";
 
+vi.mock("../../../dashboard/src/v2/hooks/use-update-status.js", () => ({
+  useUpdateStatus: vi.fn(),
+}));
+
 type WindowStateListener = (state: CodeUxWindowState) => void;
+const mockUseUpdateStatus = vi.mocked(useUpdateStatus);
 
 const createDesktopBridge = () => {
   let stateListener: WindowStateListener | null = null;
@@ -41,6 +47,11 @@ const createDesktopBridge = () => {
 describe("TitleBar", () => {
   beforeEach(() => {
     vi.stubGlobal("__APP_VERSION__", "2.3.4");
+    mockUseUpdateStatus.mockReturnValue({
+      status: null,
+      updateAvailable: false,
+      latestVersion: null,
+    });
   });
 
   afterEach(() => {
@@ -57,22 +68,18 @@ describe("TitleBar", () => {
     expect(container).toBeEmptyDOMElement();
   });
 
-  it("renders Code UX, the version, and an update action when the desktop window API exists", () => {
+  it("renders Code UX, the version, and the window controls when the desktop window API exists", () => {
     const { bridge } = createDesktopBridge();
     window.codeUxDesktop = bridge;
 
     render(<TitleBar />);
 
     expect(screen.getByRole("img", { name: "Code UX" })).toBeInTheDocument();
     expect(screen.getByText("v2.3.4")).toBeInTheDocument();
-
-    const updateButton = screen.getByRole("button", { name: "Open updates" });
-    expect(updateButton).toHaveTextContent("Update");
-    expect(updateButton).toHaveClass("titlebar-no-drag");
-
-    fireEvent.click(updateButton);
-
-    expect(bridge.openUpdates).toHaveBeenCalledTimes(1);
+    expect(screen.queryByRole("button", { name: /update/i })).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Minimize window" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Maximize window" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Close window" })).toBeInTheDocument();
   });
 
   it("double-clicks the non-interactive title-bar area to toggle maximize", async () => {
@@ -102,7 +109,6 @@ describe("TitleBar", () => {
     render(<TitleBar />);
 
     const controls = [
-      screen.getByRole("button", { name: "Open updates" }),
       screen.getByRole("button", { name: "Minimize window" }),
       screen.getByRole("button", { name: "Maximize window" }),
       screen.getByRole("button", { name: "Close window" }),
@@ -116,6 +122,27 @@ describe("TitleBar", () => {
     expect(bridge.window.toggleMaximize).not.toHaveBeenCalled();
   });
 
+  it("renders the update affordance with the available version and opens updates when clicked", () => {
+    mockUseUpdateStatus.mockReturnValue({
+      status: null,
+      updateAvailable: true,
+      latestVersion: "2.4.0",
+    });
+    const { bridge } = createDesktopBridge();
+    window.codeUxDesktop = bridge;
+
+    render(<TitleBar />);
+
+    const updateButton = screen.getByRole("button", { name: "Update available: v2.4.0" });
+
+    expect(updateButton).toHaveTextContent("Update");
+    expect(updateButton).toHaveClass("titlebar-no-drag");
+
+    fireEvent.click(updateButton);
+
+    expect(bridge.openUpdates).toHaveBeenCalledTimes(1);
+  });
+
   it("updates the maximize button label and icon from state-change events", async () => {
     const { bridge, emitWindowState } = createDesktopBridge();
     window.codeUxDesktop = bridge;