Pass credits and show them in ui

Author: jahooma

cli/src/components/ad-banner.tsx

@@ -25,7 +25,7 @@ export const AdBanner: React.FC<AdBannerProps> = ({ ad }) => {
   useEffect(() => {
     logger.info(
       { adText: ad.adText?.substring(0, 50), hasClickUrl: !!ad.clickUrl },
-      '[gravity] Rendering AdBanner'
+      '[gravity] Rendering AdBanner',
     )
   }, [ad])
   const theme = useTheme()
@@ -58,6 +58,7 @@ export const AdBanner: React.FC<AdBannerProps> = ({ ad }) => {
     >
       {/* Horizontal divider line */}
       <text style={{ fg: theme.muted }}>{'─'.repeat(terminalWidth)}</text>
+      {/* Top line: ad text + Ad label */}
       <box
         style={{
           width: '100%',
@@ -68,44 +69,51 @@ export const AdBanner: React.FC<AdBannerProps> = ({ ad }) => {
           alignItems: 'flex-start',
         }}
       >
-        <box
+        <text
           style={{
-            flexDirection: 'column',
+            fg: theme.foreground,
             flexShrink: 1,
             maxWidth: maxTextWidth,
           }}
         >
-          <text
-            style={{
-              fg: theme.foreground,
-            }}
-          >
-            {ad.adText}
-          </text>
-          <box style={{ flexDirection: 'row', gap: 2 }}>
-            {ctaText && (
-              <Button
-                onClick={handleClick}
-                onMouseOver={() => setIsLinkHovered(true)}
-                onMouseOut={() => setIsLinkHovered(false)}
-              >
-                <text
-                  style={{
-                    fg: theme.name === 'light' ? '#ffffff' : theme.background,
-                    bg: isLinkHovered ? theme.link : theme.muted,
-                  }}
-                >
-                  {` ${ctaText} `}
-                </text>
-              </Button>
-            )}
-            {domain && (
-              <text style={{ fg: theme.muted }}>{domain}</text>
-            )}
-          </box>
-        </box>
+          {ad.adText}
+        </text>
         <text style={{ fg: theme.muted, flexShrink: 0 }}>Ad</text>
       </box>
+      {/* Bottom line: button, domain, credits */}
+      <box
+        style={{
+          width: '100%',
+          paddingLeft: 1,
+          paddingRight: 1,
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          columnGap: 2,
+          alignItems: 'center',
+        }}
+      >
+        {ctaText && (
+          <Button
+            onClick={handleClick}
+            onMouseOver={() => setIsLinkHovered(true)}
+            onMouseOut={() => setIsLinkHovered(false)}
+          >
+            <text
+              style={{
+                fg: theme.name === 'light' ? '#ffffff' : theme.background,
+                bg: isLinkHovered ? theme.link : theme.muted,
+              }}
+            >
+              {` ${ctaText} `}
+            </text>
+          </Button>
+        )}
+        {domain && <text style={{ fg: theme.muted }}>{domain}</text>}
+        <box style={{ flexGrow: 1 }} />
+        {ad.credits != null && ad.credits > 0 && (
+          <text style={{ fg: theme.muted }}>+{ad.credits} credits</text>
+        )}
+      </box>
     </box>
   )
 }

cli/src/hooks/use-gravity-ad.ts

@@ -15,15 +15,15 @@ const MAX_ADS_AFTER_ACTIVITY = 3 // Show up to 3 ads after last activity, then s
 
 type AdMessage = { role: 'user' | 'assistant'; content: string }
 
-// Ad response type (matches Gravity API response)
+// Ad response type (matches Gravity API response, credits added after impression)
 export type AdResponse = {
   adText: string
   title: string
   url: string
   favicon: string
   clickUrl: string
   impUrl: string
-  payout: number
+  credits?: number // Set after impression is recorded (in cents)
 }
 
 /**
@@ -105,9 +105,10 @@ export const useGravityAd = (): GravityAdState => {
   // Fire impression via web API when ad changes (grants credits)
   useEffect(() => {
     if (ad?.impUrl && !impressionFiredRef.current.has(ad.impUrl)) {
-      impressionFiredRef.current.add(ad.impUrl)
+      const currentImpUrl = ad.impUrl
+      impressionFiredRef.current.add(currentImpUrl)
       logger.info(
-        { impUrl: ad.impUrl, payout: ad.payout },
+        { impUrl: currentImpUrl },
         '[gravity] Recording ad impression',
       )
 
@@ -126,7 +127,7 @@ export const useGravityAd = (): GravityAdState => {
           Authorization: `Bearer ${authToken}`,
         },
         body: JSON.stringify({
-          impUrl: ad.impUrl,
+          impUrl: currentImpUrl,
         }),
       })
         .then((res) => res.json())
@@ -136,6 +137,12 @@ export const useGravityAd = (): GravityAdState => {
               { creditsGranted: data.creditsGranted },
               '[gravity] Ad impression credits granted',
             )
+            // Update ad with credits from impression response
+            setAd((currentAd) =>
+              currentAd?.impUrl === currentImpUrl
+                ? { ...currentAd, credits: data.creditsGranted }
+                : currentAd,
+            )
           }
         })
         .catch((err) => {
@@ -183,7 +190,7 @@ export const useGravityAd = (): GravityAdState => {
           'Content-Type': 'application/json',
           Authorization: `Bearer ${authToken}`,
         },
-        body: JSON.stringify({ messages: adMessages }),
+        body: JSON.stringify({ messages: messageHistory }),
       })
 
       if (!response.ok) {
@@ -199,12 +206,7 @@ export const useGravityAd = (): GravityAdState => {
 
       logger.info(
         {
-          hasAd: !!ad,
-          adText: ad?.adText,
-          title: ad?.title,
-          clickUrl: ad?.clickUrl,
-          impUrl: ad?.impUrl,
-          payout: ad?.payout,
+          ad,
         },
         '[gravity] Received ad response',
       )

web/src/app/api/v1/ads/_post.ts

@@ -158,8 +158,9 @@ export async function postAds(params: {
       )
     }
 
-    // Return complete ad to client (client will call /impression endpoint when displayed)
-    return NextResponse.json({ ad })
+    // Return ad to client without payout (credits will come from impression endpoint)
+    const { payout: _payout, ...adWithoutPayout } = ad
+    return NextResponse.json({ ad: adWithoutPayout })
   } catch (error) {
     logger.error(
       {

web/src/app/api/v1/ads/impression/_post.ts

@@ -67,7 +67,7 @@ function generateImpressionOperationId(userId: string, impUrl: string): string {
 
 const bodySchema = z.object({
   // Only impUrl needed - we look up the ad data from our database
-  impUrl: z.string().url(),
+  impUrl: z.url(),
 })
 
 export async function postAdImpression(params: {