From fc00ed23bfe2f8289a43c35a5d3ea41b0f33968d Mon Sep 17 00:00:00 2001
From: Felarof <nithin.sonti@gmail.com>
Date: Thu, 16 Apr 2026 15:34:33 -0700
Subject: [PATCH] feat(referral): show tweet share rules and lower default
 daily limit fallback (#731)

* feat(referral): show share rules and lower default daily limit fallback

Surface the three referral validation rules (must mention @browserOS_ai,
posted within last 30 minutes, single-use) directly in the ShareForCredits
UI so users understand submission requirements before pasting a tweet link.
Also align the UsagePage daily-limit fallback (used while credits load) with
the gateway default of 50.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(usage): handle credit balance exceeding daily limit

The "Credits used today" stat was computed as `dailyLimit - credits`,
which goes negative once a referral bonus pushes the balance above the
daily cap (e.g. balance 294 with cap 100 showed "-194 of 100"). Clamp
the math to zero and surface a separate "Bonus credits" stat when the
balance exceeds the daily allowance.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/referral/ShareForCredits.tsx   |  8 +++++++
 .../agent/entrypoints/app/usage/UsagePage.tsx | 23 +++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/browseros-agent/apps/agent/components/referral/ShareForCredits.tsx b/packages/browseros-agent/apps/agent/components/referral/ShareForCredits.tsx
index fcd1ac4ff..c5841c381 100644
--- a/packages/browseros-agent/apps/agent/components/referral/ShareForCredits.tsx
+++ b/packages/browseros-agent/apps/agent/components/referral/ShareForCredits.tsx
@@ -61,6 +61,14 @@ export const ShareForCredits: FC<ShareForCreditsProps> = ({ compact }) => {
         Share BrowserOS on Twitter to earn 200 bonus credits!
       </p>
 
+      <ul className="list-disc space-y-0.5 pl-4 text-muted-foreground text-xs">
+        <li>
+          Tweet must mention <span className="font-medium">@browserOS_ai</span>
+        </li>
+        <li>Tweet must be posted within the last 30 minutes</li>
+        <li>Each tweet can only be submitted once</li>
+      </ul>
+
       <Button variant="outline" size="sm" className="w-full gap-2" asChild>
         <a
           href={getShareOnTwitterUrl()}
diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/usage/UsagePage.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/usage/UsagePage.tsx
index 9dc4642f1..9b7cbd65a 100644
--- a/packages/browseros-agent/apps/agent/entrypoints/app/usage/UsagePage.tsx
+++ b/packages/browseros-agent/apps/agent/entrypoints/app/usage/UsagePage.tsx
@@ -44,8 +44,10 @@ export const UsagePage: FC = () => {
   }
 
   const credits = data?.credits ?? 0
-  const total = data?.dailyLimit ?? 100
+  const total = data?.dailyLimit ?? 50
   const percentage = Math.min((credits / total) * 100, 100)
+  const bonusCredits = Math.max(0, credits - total)
+  const creditsUsed = Math.max(0, total - credits)
 
   return (
     <div className="space-y-6 p-6">
@@ -96,10 +98,21 @@ export const UsagePage: FC = () => {
           <div className="flex items-center gap-2.5 rounded-lg bg-muted/50 px-3 py-2.5">
             <Zap className="h-4 w-4 shrink-0 text-muted-foreground" />
             <div>
-              <p className="font-medium text-xs">Credits used today</p>
-              <p className="text-muted-foreground text-xs">
-                {total - credits} of {total}
-              </p>
+              {bonusCredits > 0 ? (
+                <>
+                  <p className="font-medium text-xs">Bonus credits</p>
+                  <p className="text-muted-foreground text-xs">
+                    +{bonusCredits} from referrals
+                  </p>
+                </>
+              ) : (
+                <>
+                  <p className="font-medium text-xs">Credits used today</p>
+                  <p className="text-muted-foreground text-xs">
+                    {creditsUsed} of {total}
+                  </p>
+                </>
+              )}
             </div>
           </div>
         </div>