Clean up style, ensure minimum width of ads

Author: jahooma

cli/src/chat.tsx

@@ -169,7 +169,7 @@ export const Chat = ({
   })
   const hasSubscription = subscriptionData?.hasSubscription ?? false
 
-  const { ad, adData } = useGravityAd({ enabled: IS_FREEBUFF || !hasSubscription })
+  const { ad, adData, recordImpression } = useGravityAd({ enabled: IS_FREEBUFF || !hasSubscription })
   const [adsManuallyDisabled, setAdsManuallyDisabled] = useState(false)
 
   const handleDisableAds = useCallback(() => {
@@ -1451,6 +1451,7 @@ export const Chat = ({
               ads={adData.ads}
               onDisableAds={handleDisableAds}
               isFreeMode={IS_FREEBUFF || agentMode === 'FREE'}
+              onImpression={recordImpression}
             />
           ) : (
             <AdBanner

cli/src/components/choice-ad-banner.tsx

@@ -1,22 +1,28 @@
 import { TextAttributes } from '@opentui/core'
 import { safeOpen } from '../utils/open-url'
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 
 import { Button } from './button'
-import { Clickable } from './clickable'
 import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
 import { useTheme } from '../hooks/use-theme'
-import { IS_FREEBUFF } from '../utils/constants'
 
 import type { AdResponse } from '../hooks/use-gravity-ad'
 
 interface ChoiceAdBannerProps {
   ads: AdResponse[]
-  onDisableAds: () => void
-  isFreeMode: boolean
+  onImpression?: (impUrl: string) => void
 }
 
-const CARD_HEIGHT = 5 // border-top + description + spacer + cta row + border-bottom
+const CARD_HEIGHT = 5 // border-top + 2 lines description + spacer + cta row + border-bottom
+const MAX_DESC_LINES = 2
+const MIN_CARD_WIDTH = 60 // Minimum width per ad card to remain readable
+
+function truncateToLines(text: string, lineWidth: number, maxLines: number): string {
+  if (lineWidth <= 0) return text
+  const maxChars = lineWidth * maxLines
+  if (text.length <= maxChars) return text
+  return text.slice(0, maxChars - 1) + '…'
+}
 
 const extractDomain = (url: string): string => {
   try {
@@ -37,21 +43,31 @@ function columnWidths(count: number, availableWidth: number): number[] {
   return Array.from({ length: count }, (_, i) => base + (i < remainder ? 1 : 0))
 }
 
-export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({ ads, onDisableAds, isFreeMode }) => {
+export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({ ads, onImpression }) => {
   const theme = useTheme()
-  const { separatorWidth, terminalWidth } = useTerminalDimensions()
+  const { terminalWidth } = useTerminalDimensions()
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
-  const [showInfoPanel, setShowInfoPanel] = useState(false)
-  const [isAdLabelHovered, setIsAdLabelHovered] = useState(false)
-  const [isHideHovered, setIsHideHovered] = useState(false)
-  const [isCloseHovered, setIsCloseHovered] = useState(false)
 
   // Available width for cards (terminal minus left/right margin of 1 each)
   const colAvail = terminalWidth - 2
-  const widths = useMemo(() => columnWidths(ads.length, colAvail), [ads.length, colAvail])
 
-  // Sum of all credits across choice ads
-  const totalCredits = ads.reduce((sum, ad) => sum + (ad.credits ?? 0), 0)
+  // Only show as many ads as fit with a healthy minimum width; hide the rest
+  const maxVisible = Math.max(1, Math.floor(colAvail / MIN_CARD_WIDTH))
+  const visibleAds = useMemo(
+    () => (ads.length > maxVisible ? ads.slice(0, maxVisible) : ads),
+    [ads, maxVisible],
+  )
+
+  const widths = useMemo(() => columnWidths(visibleAds.length, colAvail), [visibleAds.length, colAvail])
+
+  // Fire impressions only for visible ads
+  useEffect(() => {
+    if (onImpression) {
+      for (const ad of visibleAds) {
+        onImpression(ad.impUrl)
+      }
+    }
+  }, [visibleAds, onImpression])
 
   // Hover colors
   const hoverBorderColor = theme.link
@@ -64,46 +80,6 @@ export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({ ads, onDisableAd
         flexDirection: 'column',
       }}
     >
-      {/* Horizontal divider line */}
-      <text style={{ fg: theme.muted }}>{'─'.repeat(terminalWidth)}</text>
-
-      {/* Header: "Sponsored picks" + credits + Ad label */}
-      <box
-        style={{
-          width: '100%',
-          paddingLeft: 1,
-          paddingRight: 1,
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'flex-start',
-        }}
-      >
-        <text style={{ fg: theme.muted, attributes: TextAttributes.BOLD }}>Sponsored picks</text>
-        <box style={{ flexDirection: 'row', alignItems: 'center', gap: 2, flexShrink: 0 }}>
-          {!IS_FREEBUFF && totalCredits > 0 && (
-            <text style={{ fg: theme.muted }}>+{totalCredits} credits</text>
-          )}
-          {!IS_FREEBUFF ? (
-            <Clickable
-              onMouseDown={() => setShowInfoPanel(true)}
-              onMouseOver={() => setIsAdLabelHovered(true)}
-              onMouseOut={() => setIsAdLabelHovered(false)}
-            >
-              <text
-                style={{
-                  fg: isAdLabelHovered && !showInfoPanel ? theme.foreground : theme.muted,
-                  flexShrink: 0,
-                }}
-              >
-                {isAdLabelHovered && !showInfoPanel ? 'Ad ?' : '  Ad'}
-              </text>
-            </Clickable>
-          ) : (
-            <text style={{ fg: theme.muted, flexShrink: 0 }}>{'  Ad'}</text>
-          )}
-        </box>
-      </box>
-
       {/* Card columns */}
       <box
         style={{
@@ -112,7 +88,7 @@ export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({ ads, onDisableAd
           flexDirection: 'row',
         }}
       >
-        {ads.map((ad, i) => {
+        {visibleAds.map((ad, i) => {
           const isHovered = hoveredIndex === i
           const domain = extractDomain(ad.url)
           const ctaText = ad.cta || ad.title || 'Learn more'
@@ -136,10 +112,14 @@ export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({ ads, onDisableAd
                 backgroundColor: isHovered ? hoverBgColor : undefined,
               }}
             >
-              <text style={{ fg: isHovered ? theme.link : theme.muted, flexShrink: 1 }}>
-                {ad.adText}
-              </text>
+              <box style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                <text style={{ fg: theme.muted, flexShrink: 1 }}>
+                  {truncateToLines(ad.adText, widths[i] - 8, MAX_DESC_LINES)}
+                </text>
+                <text style={{ fg: theme.muted, flexShrink: 0 }}>{'  Ad'}</text>
+              </box>
               <box style={{ flexGrow: 1 }} />
+              {/* Bottom: CTA + domain */}
               <box style={{ flexDirection: 'row', columnGap: 1, alignItems: 'center' }}>
                 <text
                   style={{
@@ -153,90 +133,14 @@ export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({ ads, onDisableAd
                 <text style={{ fg: theme.muted, attributes: TextAttributes.UNDERLINE }}>
                   {domain}
                 </text>
+
               </box>
             </Button>
           )
         })}
+
       </box>
 
-      {/* Info panel: shown when Ad label is clicked */}
-      {showInfoPanel && (
-        <box
-          style={{
-            width: '100%',
-            flexDirection: 'column',
-            gap: 0,
-          }}
-        >
-          <text style={{ fg: theme.muted }}>{' ' + '┄'.repeat(separatorWidth - 2)}</text>
-          <box
-            style={{
-              width: '100%',
-              paddingLeft: 1,
-              paddingRight: 1,
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'flex-start',
-            }}
-          >
-            <text style={{ fg: theme.muted, flexShrink: 1 }}>
-              {IS_FREEBUFF
-                ? 'Ads help keep Freebuff free.'
-                : 'Ads are optional and earn you credits on each impression. Feel free to hide them anytime.'}
-            </text>
-            <Button
-              onClick={() => setShowInfoPanel(false)}
-              onMouseOver={() => setIsCloseHovered(true)}
-              onMouseOut={() => setIsCloseHovered(false)}
-            >
-              <text
-                style={{
-                  fg: isCloseHovered ? theme.foreground : theme.muted,
-                  flexShrink: 0,
-                }}
-              >
-                {' ✕'}
-              </text>
-            </Button>
-          </box>
-          <box
-            style={{
-              paddingLeft: 1,
-              paddingRight: 1,
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 2,
-            }}
-          >
-            {isFreeMode && !IS_FREEBUFF ? (
-              <text style={{ fg: theme.muted }}>
-                Ads are required in Free mode.
-              </text>
-            ) : (
-              <>
-                <Button
-                  onClick={onDisableAds}
-                  onMouseOver={() => setIsHideHovered(true)}
-                  onMouseOut={() => setIsHideHovered(false)}
-                >
-                  <text
-                    style={{
-                      fg: isHideHovered ? theme.link : theme.muted,
-                      attributes: TextAttributes.UNDERLINE,
-                    }}
-                  >
-                    Hide ads
-                  </text>
-                </Button>
-                <text style={{ fg: theme.muted }}>·</text>
-                <text style={{ fg: theme.muted }}>
-                  Use /ads:enable to show again
-                </text>
-              </>
-            )}
-          </box>
-        </box>
-      )}
     </box>
   )
 }

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

@@ -37,6 +37,7 @@ export type GravityAdState = {
   ad: AdResponse | null
   adData: AdData | null
   isLoading: boolean
+  recordImpression: (impUrl: string) => void
 }
 
 // Consolidated controller state for the ad rotation logic
@@ -206,13 +207,10 @@ export const useGravityAd = (options?: { enabled?: boolean }): GravityAdState =>
     recordImpressionOnce(next.impUrl)
   }
 
-  // Show a choice ad set and fire impressions for all
+  // Show a choice ad set (impressions are fired by the component for visible ads only)
   const showChoiceAds = (ads: AdResponse[]): void => {
     setAd(ads[0] ?? null) // Keep backwards compat for ad field
     setAdData({ variant: 'choice', ads })
-    for (const choiceAd of ads) {
-      recordImpressionOnce(choiceAd.impUrl)
-    }
   }
 
   type FetchAdResult =
@@ -400,6 +398,7 @@ export const useGravityAd = (options?: { enabled?: boolean }): GravityAdState =>
     ad: visible ? ad : null,
     adData: visible ? adData : null,
     isLoading,
+    recordImpression: recordImpressionOnce,
   }
 }