From 9e38a6b252bf96490571e8de22426e951c1cc73e Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sat, 6 Jun 2026 15:17:27 -0500
Subject: [PATCH] feat(tracker): show last_updated age on balance cards and
 summary pill

---
 client/pages/TrackerPage.jsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/pages/TrackerPage.jsx b/client/pages/TrackerPage.jsx
index dc210f1..14655b3 100644
--- a/client/pages/TrackerPage.jsx
+++ b/client/pages/TrackerPage.jsx
@@ -32,6 +32,11 @@ import { TrackerBucket as Bucket } from '@/components/tracker/TrackerBucket';
 import IncomeBreakdownModal from '@/components/IncomeBreakdownModal';
 
 
+function fmtBalanceAge(isoStr) {
+  if (!isoStr) return null;
+  return new Date(isoStr).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+
 // ── Main page ──────────────────────────────────────────────────────────────
 function LateAttributionDialog({ attr, remaining, busy, onAccept, onDismiss }) {
   if (!attr) return null;
@@ -434,6 +439,12 @@ export default function TrackerPage() {
             <span className="font-semibold">{bankTracking.account_name}</span>
             <span className="text-muted-foreground">·</span>
             <span>{fmt(bankTracking.balance ?? 0)} balance</span>
+            {bankTracking.last_updated && (
+              <>
+                <span className="text-muted-foreground">·</span>
+                <span className="text-muted-foreground">as of {fmtBalanceAge(bankTracking.last_updated)}</span>
+              </>
+            )}
             {Number(bankTracking.pending_payments ?? 0) > 0 && (
               <>
                 <span className="text-muted-foreground">·</span>
@@ -540,7 +551,7 @@ export default function TrackerPage() {
                     <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
                     <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
                   </span>
-                  Live
+                  Live Sync
                 </span>
               </div>
               <p className="text-[1.75rem] font-bold tracking-tight font-mono leading-none text-foreground">
@@ -549,6 +560,11 @@ export default function TrackerPage() {
               <p className="mt-2 text-[11px] text-muted-foreground">
                 {Number(bankTracking.remaining ?? 0) < 0 ? '−' : ''}{fmt(Math.abs(Number(bankTracking.remaining ?? 0)))} projected after bills
               </p>
+              {bankTracking.last_updated && (
+                <p className="mt-1 text-[10px] text-muted-foreground/60">
+                  as of {fmtBalanceAge(bankTracking.last_updated)}
+                </p>
+              )}
             </button>
           ) : (
             <SummaryCard