Add dashboard update indicator

Author: =

apps/predbat/frontend.zip

@@ -229,10 +229,14 @@ def _error_total(page):
             print("ERROR: /api/browse allowed directory traversal")
             failed = 1
 
-        my_predbat.set_state_wrapper("update.predbat_version", "on", attributes={"in_progress": True})
-        if requests.get(base_url + "/api/status").json().get("updating") is not True:
+        my_predbat.set_state_wrapper("update.predbat_version", "on", attributes={"in_progress": True, "latest_version": "v99.0.0"})
+        update_status = requests.get(base_url + "/api/status").json()
+        if update_status.get("updating") is not True:
             print("ERROR: /api/status did not report an in-progress Predbat update")
             failed = 1
+        if update_status.get("update_available") is not True or update_status.get("latest_version") != "v99.0.0":
+            print("ERROR: /api/status did not report the available Predbat update")
+            failed = 1
         my_predbat.set_state_wrapper("update.predbat_version", "on", attributes={"in_progress": False})
 
         print("Test apps.yaml editor API and generated schema")

apps/predbat/tests/test_web_if.py

@@ -3015,7 +3015,12 @@ async def html_api_get_status(self, request):
 
             predbat_active, _ = self.get_ha_config("active", None)
 
-            updating = self.get_state_wrapper("update.predbat_version", attribute="in_progress", default=False) is True
+            update_entity = "update.predbat_version"
+            updating = self.get_state_wrapper(update_entity, attribute="in_progress", default=False) is True
+            update_available = self.get_state_wrapper(update_entity, default="off") == "on"
+            latest_version = self.get_state_wrapper(update_entity, attribute="latest_version", default=None)
+            if latest_version in (None, "", "unknown", "unavailable", "check HACS"):
+                latest_version = None
 
             # Configuration health
             config_errors = len(self.arg_errors)
@@ -3031,6 +3036,8 @@ async def html_api_get_status(self, request):
                 "last_updated": last_updated,
                 "last_started": last_started,
                 "version": THIS_VERSION_DISPLAY,
+                "latest_version": latest_version,
+                "update_available": update_available,
                 # Predbat configuration
                 "mode": mode,
                 "debug_enable": debug_enable,

apps/predbat/web.py

@@ -108,6 +108,14 @@ function App() {
    * consecutive failures before the user is told about it.
    */
   const [controlError, setControlError] = useState<string | null>(null)
+  const [updateRequested, setUpdateRequested] = useState(false)
+
+  useEffect(() => {
+    if (!updateRequested) return
+
+    const timeout = window.setTimeout(() => setUpdateRequested(false), 15_000)
+    return () => window.clearTimeout(timeout)
+  }, [updateRequested])
 
   /*
    * Consecutive failure count for each endpoint.
@@ -238,6 +246,7 @@ function App() {
     previousCalculatingRef.current = data.calculating
 
     setStatusData(data)
+    if (data.updating) setUpdateRequested(false)
 
     /*
      * Predbat has just completed a calculation.
@@ -317,6 +326,36 @@ function App() {
     })
   }
 
+  async function installLatestUpdate() {
+    setUpdateRequested(true)
+
+    try {
+      const response = await fetch('./api/service', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          service: 'update/install',
+          data: { entity_id: 'update.predbat_version' }
+        })
+      })
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+      const result = await response.json() as { result?: unknown } | null
+      if (result?.result === 'error') throw new Error('Home Assistant rejected the update request')
+
+      setControlError(null)
+      fetchStatus().catch(() => {
+        // Polling will retry if Predbat restarts before returning status.
+      })
+    } catch (error) {
+      console.error('Unable to start the Predbat update:', error)
+      const detail = error instanceof Error ? error.message : 'Unknown error'
+      setControlError(`Predbat could not start the update. ${detail}`)
+      setUpdateRequested(false)
+    }
+  }
+
   /*
    * Manual retry used by the error notice.
    */
@@ -569,6 +608,9 @@ function App() {
                   status={statusData.status}
                   mode={statusData.mode}
                   version={statusData.version}
+                  latestVersion={statusData.latest_version}
+                  updateAvailable={statusData.update_available}
+                  updating={updating || updateRequested}
                   lastUpdated={statusData.last_updated}
                   configOk={statusData.config_ok}
 
@@ -583,6 +625,8 @@ function App() {
                   onReadOnlyChange={(value) => updateControl('set_read_only', value)}
 
                   onDebugChange={(value) => updateControl('debug_enable', value)}
+
+                  onUpdate={installLatestUpdate}
                 />
 
                 <PlanSummary plan={planData.plan} />

frontend/src/App.tsx

@@ -26,6 +26,43 @@
   color: var(--color-text-muted);
 }
 
+.status-card-version-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.6rem;
+}
+
+.status-card-update {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-height: 1.75rem;
+  padding: 0.25rem 0.55rem;
+  color: var(--color-success);
+  background: color-mix(in srgb, var(--color-success) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-success) 45%, transparent);
+  border-radius: 999px;
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.status-card-update:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-success) 20%, transparent);
+}
+
+.status-card-update:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.status-card-update:disabled {
+  opacity: 0.65;
+  cursor: wait;
+}
+
 .status-card-label,
 .status-card-detail > span {
   font-size: 0.72rem;

frontend/src/components/StatusCard.css

@@ -1,9 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleArrowUp } from '@fortawesome/free-solid-svg-icons'
+
 import './StatusCard.css'
 
 type StatusCardProps = {
   status: string
   mode: string
   version: string
+  latestVersion: string | null
+  updateAvailable: boolean
+  updating: boolean
 
   lastUpdated: string | null
 
@@ -17,6 +23,7 @@ type StatusCardProps = {
   onActiveChange: (value: boolean) => void
   onReadOnlyChange: (value: boolean) => void
   onDebugChange: (value: boolean) => void
+  onUpdate: () => void
 }
 
 // Relative labels refresh when the parent supplies the next status poll.
@@ -67,6 +74,9 @@ function StatusCard({
   status,
   mode,
   version,
+  latestVersion,
+  updateAvailable,
+  updating,
   lastUpdated,
   configOk,
   active,
@@ -75,7 +85,8 @@ function StatusCard({
   onModeChange,
   onActiveChange,
   onReadOnlyChange,
-  onDebugChange
+  onDebugChange,
+  onUpdate
 }: StatusCardProps) {
   const statusHealth = getStatusHealth(status)
 
@@ -85,9 +96,23 @@ function StatusCard({
       <div className="status-card-header">
         <h2>Predbat Status</h2>
 
-        <span className="status-card-version">
-          Predbat {version}
-        </span>
+        <div className="status-card-version-row">
+          <span className="status-card-version">Predbat {version}</span>
+
+          {updateAvailable && (
+            <button
+              type="button"
+              className="status-card-update"
+              disabled={updating}
+              title={latestVersion ? `Install Predbat ${latestVersion}` : 'Install the latest Predbat update'}
+              aria-label={latestVersion ? `Update Predbat to ${latestVersion}` : 'Update Predbat'}
+              onClick={onUpdate}
+            >
+              <FontAwesomeIcon icon={faCircleArrowUp} aria-hidden="true" />
+              {updating ? 'Updating' : 'Update'}
+            </button>
+          )}
+        </div>
       </div>
 
       {/* Current status */}

frontend/src/components/StatusCard.tsx

@@ -10,6 +10,8 @@ export type PredbatStatus = {
   last_started: string | null
 
   version: string
+  latest_version: string | null
+  update_available: boolean
 
   mode: string
   debug_enable: boolean