From d0fb78da51fbd0907bb2e3c5cbc9faee9f609884 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Wed, 15 Jul 2026 09:24:31 +0000
Subject: [PATCH] Show commits-behind badge on Updates tab

Displays a gold badge next to the latest commit hash when the backend
returns a commitsBehind count greater than zero.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/AdminMonitor.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/pages/AdminMonitor.tsx b/src/pages/AdminMonitor.tsx
index 4516f2e..2d41543 100644
--- a/src/pages/AdminMonitor.tsx
+++ b/src/pages/AdminMonitor.tsx
@@ -11,6 +11,7 @@ interface AppStatus {
   latestCommit: string
   latestCommitAt: string | null
   updateAvailable: boolean
+  commitsBehind: number | null
   deployed: boolean
   checkedAt: string
 }
@@ -322,6 +323,16 @@ export function AdminMonitor({ user }: { user: User }) {
                               · {relativeTime(s.latestCommitAt)}
                             </span>
                           )}
+                          {s.commitsBehind != null && s.commitsBehind > 0 && (
+                            <span style={{
+                              marginLeft: '0.6rem', fontFamily: 'sans-serif',
+                              background: 'var(--gold)', color: 'var(--navy)',
+                              borderRadius: '3px', padding: '0.05rem 0.35rem',
+                              fontSize: '0.65rem', fontWeight: 700,
+                            }}>
+                              {s.commitsBehind} commit{s.commitsBehind !== 1 ? 's' : ''} behind
+                            </span>
+                          )}
                         </span>
                       )}
                     </div>