From dc9ce4fffd5ba4b4835f6f28046cac6c19cd75e4 Mon Sep 17 00:00:00 2001
From: Nariman Jelveh <nj@puter.com>
Date: Fri, 23 Oct 2026 14:21:47 -0700
Subject: [PATCH] fix(dashboard): refresh the Usage tab when the subscription
 changes

An upgrade from the Usage tab's own button, or a return from the billing
portal, refreshed Home behind it while the Usage meter and plan button
kept the old allowance until the user left the tab and came back. Usage
now handles puter:subscription:changed while it is showing.
---
 src/gui/src/UI/Dashboard/TabUsage.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/gui/src/UI/Dashboard/TabUsage.js b/src/gui/src/UI/Dashboard/TabUsage.js
index c57290fc6..43872f5ba 100644
--- a/src/gui/src/UI/Dashboard/TabUsage.js
+++ b/src/gui/src/UI/Dashboard/TabUsage.js
@@ -97,6 +97,15 @@ const TabUsage = {
 
         refreshUsageDetails($el_window);
 
+        // An upgrade, a plan change, or a return from the billing portal (see
+        // TabHome) changes the allowance and the button shown here. Hidden,
+        // the tab refreshes on its next activation instead.
+        window.addEventListener('puter:subscription:changed', () => {
+            if ( ! $($el_window).find('.dashboard-section-usage').hasClass('active') ) return;
+            setupPlanButton($el_window);
+            refreshUsageDetails($el_window);
+        });
+
         // Click handler for sortable table headers
         $($el_window).on('click', '.driver-usage-details-content-table th[data-sort]', function () {
             const column = $(this).data('sort');