fix(update): soften transient update check error UX (#139)

Use a neutral, retryable footer state for transient update check failures while keeping explicit failure messaging for download/install errors.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: robinebers

src/App.tsx

@@ -80,7 +80,7 @@ function App() {
   const maxPanelHeightPxRef = useRef<number | null>(null)
   const [appVersion, setAppVersion] = useState("...")
 
-  const { updateStatus, triggerInstall } = useAppUpdate()
+  const { updateStatus, triggerInstall, checkForUpdates } = useAppUpdate()
   const [showAbout, setShowAbout] = useState(false)
 
   const trayRef = useRef<TrayIcon | null>(null)
@@ -879,6 +879,7 @@ function App() {
               autoUpdateNextAt={autoUpdateNextAt}
               updateStatus={updateStatus}
               onUpdateInstall={triggerInstall}
+              onUpdateCheck={checkForUpdates}
               showAbout={showAbout}
               onShowAbout={() => setShowAbout(true)}
               onCloseAbout={() => setShowAbout(false)}

src/components/panel-footer.test.tsx

@@ -11,7 +11,7 @@ vi.mock("@tauri-apps/plugin-opener", () => ({
 
 const idle: UpdateStatus = { status: "idle" }
 const noop = () => {}
-const aboutProps = { showAbout: false, onShowAbout: noop, onCloseAbout: noop }
+const footerProps = { showAbout: false, onShowAbout: noop, onCloseAbout: noop, onUpdateCheck: noop }
 
 describe("PanelFooter", () => {
   it("shows countdown in minutes when >= 60 seconds", () => {
@@ -22,7 +22,7 @@ describe("PanelFooter", () => {
         autoUpdateNextAt={futureTime}
         updateStatus={idle}
         onUpdateInstall={noop}
-        {...aboutProps}
+        {...footerProps}
       />
     )
     expect(screen.getByText("Next update in 5m")).toBeTruthy()
@@ -36,7 +36,7 @@ describe("PanelFooter", () => {
         autoUpdateNextAt={futureTime}
         updateStatus={idle}
         onUpdateInstall={noop}
-        {...aboutProps}
+        {...footerProps}
       />
     )
     expect(screen.getByText("Next update in 30s")).toBeTruthy()
@@ -49,7 +49,7 @@ describe("PanelFooter", () => {
         autoUpdateNextAt={null}
         updateStatus={idle}
         onUpdateInstall={noop}
-        {...aboutProps}
+        {...footerProps}
       />
     )
     expect(screen.getByText("Paused")).toBeTruthy()
@@ -62,7 +62,7 @@ describe("PanelFooter", () => {
         autoUpdateNextAt={null}
         updateStatus={{ status: "downloading", progress: 42 }}
         onUpdateInstall={noop}
-        {...aboutProps}
+        {...footerProps}
       />
     )
     expect(screen.getByText("Downloading update 42%")).toBeTruthy()
@@ -75,7 +75,7 @@ describe("PanelFooter", () => {
         autoUpdateNextAt={null}
         updateStatus={{ status: "downloading", progress: -1 }}
         onUpdateInstall={noop}
-        {...aboutProps}
+        {...footerProps}
       />
     )
     expect(screen.getByText("Downloading update...")).toBeTruthy()
@@ -89,7 +89,7 @@ describe("PanelFooter", () => {
         autoUpdateNextAt={null}
         updateStatus={{ status: "ready" }}
         onUpdateInstall={onInstall}
-        {...aboutProps}
+        {...footerProps}
       />
     )
     const button = screen.getByText("Restart to update")
@@ -98,17 +98,39 @@ describe("PanelFooter", () => {
     expect(onInstall).toHaveBeenCalledTimes(1)
   })
 
-  it("shows error state", () => {
+  it("shows retryable updates soon state for update check failures", async () => {
+    const onUpdateCheck = vi.fn()
+    render(
+      <PanelFooter
+        version="0.0.0"
+        autoUpdateNextAt={null}
+        updateStatus={{ status: "error", message: "Update check failed" }}
+        onUpdateInstall={noop}
+        showAbout={false}
+        onShowAbout={noop}
+        onCloseAbout={noop}
+        onUpdateCheck={onUpdateCheck}
+      />
+    )
+
+    const retryButton = screen.getByRole("button", { name: "Updates soon" })
+    expect(retryButton).toBeTruthy()
+    await userEvent.click(retryButton)
+    expect(onUpdateCheck).toHaveBeenCalledTimes(1)
+  })
+
+  it("shows error state for non-check failures", () => {
     const { container } = render(
       <PanelFooter
         version="0.0.0"
         autoUpdateNextAt={null}
-        updateStatus={{ status: "error", message: "oops" }}
+        updateStatus={{ status: "error", message: "Download failed" }}
         onUpdateInstall={noop}
-        {...aboutProps}
+        {...footerProps}
       />
     )
     expect(container.textContent).toContain("Update failed")
+    expect(screen.queryByRole("button", { name: "Updates soon" })).toBeNull()
   })
 
   it("shows installing state", () => {
@@ -118,7 +140,7 @@ describe("PanelFooter", () => {
         autoUpdateNextAt={null}
         updateStatus={{ status: "installing" }}
         onUpdateInstall={noop}
-        {...aboutProps}
+        {...footerProps}
       />
     )
     expect(screen.getByText("Installing...")).toBeTruthy()
@@ -136,6 +158,7 @@ describe("PanelFooter", () => {
           showAbout={showAbout}
           onShowAbout={() => setShowAbout(true)}
           onCloseAbout={() => setShowAbout(false)}
+          onUpdateCheck={noop}
         />
       )
     }

src/components/panel-footer.tsx

@@ -9,6 +9,7 @@ interface PanelFooterProps {
   autoUpdateNextAt: number | null;
   updateStatus: UpdateStatus;
   onUpdateInstall: () => void;
+  onUpdateCheck: () => void;
   showAbout: boolean;
   onShowAbout: () => void;
   onCloseAbout: () => void;
@@ -18,11 +19,13 @@ function VersionDisplay({
   version,
   updateStatus,
   onUpdateInstall,
+  onUpdateCheck,
   onVersionClick,
 }: {
   version: string;
   updateStatus: UpdateStatus;
   onUpdateInstall: () => void;
+  onUpdateCheck: () => void;
   onVersionClick: () => void;
 }) {
   switch (updateStatus.status) {
@@ -50,6 +53,18 @@ function VersionDisplay({
         <span className="text-xs text-muted-foreground">Installing...</span>
       );
     case "error":
+      if (updateStatus.message === "Update check failed") {
+        return (
+          <button
+            type="button"
+            onClick={onUpdateCheck}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+            title={updateStatus.message}
+          >
+            Updates soon
+          </button>
+        );
+      }
       return (
         <span className="text-xs text-destructive" title={updateStatus.message}>
           Update failed
@@ -73,6 +88,7 @@ export function PanelFooter({
   autoUpdateNextAt,
   updateStatus,
   onUpdateInstall,
+  onUpdateCheck,
   showAbout,
   onShowAbout,
   onCloseAbout,
@@ -100,6 +116,7 @@ export function PanelFooter({
           version={version}
           updateStatus={updateStatus}
           onUpdateInstall={onUpdateInstall}
+          onUpdateCheck={onUpdateCheck}
           onVersionClick={onShowAbout}
         />
         <span className="text-xs text-muted-foreground tabular-nums">