From acd7ed8ba34ed0e55cd90faf89ef7a637dc52481 Mon Sep 17 00:00:00 2001
From: nyk <93952610+0xNyk@users.noreply.github.com>
Date: Sat, 14 Mar 2026 14:18:00 +0700
Subject: [PATCH] fix(ui): persist doctor banner dismiss with 24h expiry (#328)

* fix(ui): persist doctor banner dismiss with 24h expiry (#320)

Replace ephemeral useState dismiss with Zustand store + localStorage.
Banner stays hidden for 24 hours after dismiss, then resurfaces so
users can re-check. Mirrors the existing UpdateBanner pattern.

Closes #320

* test: add unit tests for doctor banner dismiss persistence

Tests verify localStorage persistence, 24h expiry, page refresh
survival, and graceful handling of corrupted values.
---
 .../layout/openclaw-doctor-banner.tsx         |  10 +-
 .../__tests__/doctor-banner-dismiss.test.ts   | 109 ++++++++++++++++++
 src/store/index.ts                            |  18 +++
 3 files changed, 134 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/__tests__/doctor-banner-dismiss.test.ts

diff --git a/src/components/layout/openclaw-doctor-banner.tsx b/src/components/layout/openclaw-doctor-banner.tsx
index 29ac1f9..bc88ccf 100644
--- a/src/components/layout/openclaw-doctor-banner.tsx
+++ b/src/components/layout/openclaw-doctor-banner.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { Button } from '@/components/ui/button'
+import { useMissionControl } from '@/store'
 
 interface OpenClawDoctorStatus {
   level: 'healthy' | 'warning' | 'error'
@@ -23,7 +24,8 @@ type BannerState = 'idle' | 'fixing' | 'success' | 'error'
 export function OpenClawDoctorBanner() {
   const [doctor, setDoctor] = useState<OpenClawDoctorStatus | null>(null)
   const [loading, setLoading] = useState(true)
-  const [dismissed, setDismissed] = useState(false)
+  const doctorDismissedAt = useMissionControl(s => s.doctorDismissedAt)
+  const dismissDoctor = useMissionControl(s => s.dismissDoctor)
   const [state, setState] = useState<BannerState>('idle')
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
   const [showDetails, setShowDetails] = useState(false)
@@ -38,7 +40,6 @@ export function OpenClawDoctorBanner() {
       }
       const data = await res.json()
       setDoctor(data)
-      setDismissed(false)
     } catch {
       setDoctor(null)
     } finally {
@@ -95,6 +96,9 @@ export function OpenClawDoctorBanner() {
     }
   }
 
+  const TWENTY_FOUR_HOURS = 24 * 60 * 60 * 1000
+  const dismissed = doctorDismissedAt != null && (Date.now() - doctorDismissedAt) < TWENTY_FOUR_HOURS
+
   if (loading || dismissed || !doctor || doctor.healthy) return null
 
   const tone =
@@ -176,7 +180,7 @@ export function OpenClawDoctorBanner() {
           <Button
             variant="ghost"
             size="icon-xs"
-            onClick={() => setDismissed(true)}
+            onClick={dismissDoctor}
             className="shrink-0 hover:bg-transparent"
             title="Dismiss"
           >
diff --git a/src/lib/__tests__/doctor-banner-dismiss.test.ts b/src/lib/__tests__/doctor-banner-dismiss.test.ts
new file mode 100644
index 0000000..5a60da9
--- /dev/null
+++ b/src/lib/__tests__/doctor-banner-dismiss.test.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+
+/**
+ * Tests for the doctor banner dismiss persistence logic.
+ * Mirrors the store + banner integration for doctorDismissedAt.
+ */
+
+const TWENTY_FOUR_HOURS = 24 * 60 * 60 * 1000
+const LS_KEY = 'mc-doctor-dismissed-at'
+
+// Simulate the store logic
+function createDoctorDismissStore() {
+  let storage: Record<string, string> = {}
+
+  return {
+    getItem: (key: string) => storage[key] ?? null,
+    setItem: (key: string, val: string) => { storage[key] = val },
+    removeItem: (key: string) => { delete storage[key] },
+    clear: () => { storage = {} },
+
+    // Store state
+    doctorDismissedAt: null as number | null,
+
+    // Initialize from localStorage (mirrors store IIFE)
+    init() {
+      const raw = this.getItem(LS_KEY)
+      this.doctorDismissedAt = raw ? Number(raw) : null
+    },
+
+    // Action (mirrors store.dismissDoctor)
+    dismissDoctor() {
+      const now = Date.now()
+      this.setItem(LS_KEY, String(now))
+      this.doctorDismissedAt = now
+    },
+
+    // Check if dismissed (mirrors banner logic)
+    isDismissed() {
+      return this.doctorDismissedAt != null && (Date.now() - this.doctorDismissedAt) < TWENTY_FOUR_HOURS
+    },
+  }
+}
+
+describe('doctor banner dismiss persistence', () => {
+  let store: ReturnType<typeof createDoctorDismissStore>
+
+  beforeEach(() => {
+    store = createDoctorDismissStore()
+  })
+
+  it('is not dismissed by default', () => {
+    store.init()
+    expect(store.isDismissed()).toBe(false)
+    expect(store.doctorDismissedAt).toBeNull()
+  })
+
+  it('persists dismiss to localStorage', () => {
+    store.dismissDoctor()
+    expect(store.getItem(LS_KEY)).toBeDefined()
+    expect(Number(store.getItem(LS_KEY))).toBeGreaterThan(0)
+  })
+
+  it('is dismissed immediately after calling dismissDoctor', () => {
+    store.dismissDoctor()
+    expect(store.isDismissed()).toBe(true)
+  })
+
+  it('survives re-initialization (simulates page refresh)', () => {
+    store.dismissDoctor()
+
+    // Simulate fresh store init (page refresh)
+    const store2 = createDoctorDismissStore()
+    // Copy storage state
+    const raw = store.getItem(LS_KEY)
+    if (raw) store2.setItem(LS_KEY, raw)
+    store2.init()
+
+    expect(store2.isDismissed()).toBe(true)
+    expect(store2.doctorDismissedAt).toEqual(store.doctorDismissedAt)
+  })
+
+  it('expires after 24 hours', () => {
+    const realNow = Date.now
+    try {
+      const baseTime = 1700000000000
+      Date.now = vi.fn(() => baseTime)
+
+      store.dismissDoctor()
+      expect(store.isDismissed()).toBe(true)
+
+      // Jump forward 23 hours — still dismissed
+      Date.now = vi.fn(() => baseTime + 23 * 60 * 60 * 1000)
+      expect(store.isDismissed()).toBe(true)
+
+      // Jump forward 25 hours — no longer dismissed
+      Date.now = vi.fn(() => baseTime + 25 * 60 * 60 * 1000)
+      expect(store.isDismissed()).toBe(false)
+    } finally {
+      Date.now = realNow
+    }
+  })
+
+  it('handles corrupted localStorage value gracefully', () => {
+    store.setItem(LS_KEY, 'not-a-number')
+    store.init()
+    // NaN from Number("not-a-number") — Date.now() - NaN is NaN, < 24h is false
+    expect(store.isDismissed()).toBe(false)
+  })
+})
diff --git a/src/store/index.ts b/src/store/index.ts
index a261982..658343f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -394,6 +394,10 @@ interface MissionControlStore {
   setOpenclawUpdate: (info: { installed: string; latest: string; releaseUrl: string; releaseNotes: string; updateCommand: string } | null) => void
   dismissOpenclawUpdate: (version: string) => void
 
+  // OpenClaw Doctor banner dismiss (persisted with 24h expiry)
+  doctorDismissedAt: number | null
+  dismissDoctor: () => void
+
   // WebSocket & Connection
   connection: ConnectionStatus
   lastMessage: unknown
@@ -633,6 +637,20 @@ export const useMissionControl = create<MissionControlStore>()(
       set({ openclawUpdateDismissedVersion: version })
     },
 
+    // OpenClaw Doctor banner dismiss
+    doctorDismissedAt: (() => {
+      if (typeof window === 'undefined') return null
+      try {
+        const raw = localStorage.getItem('mc-doctor-dismissed-at')
+        return raw ? Number(raw) : null
+      } catch { return null }
+    })(),
+    dismissDoctor: () => {
+      const now = Date.now()
+      try { localStorage.setItem('mc-doctor-dismissed-at', String(now)) } catch {}
+      set({ doctorDismissedAt: now })
+    },
+
     // Connection state
     connection: {
       isConnected: false,