@@ -25,7 +25,13 @@ function truncateToLines(text: string, lineWidth: number, maxLines: number): str
2525 return text . slice ( 0 , maxChars - 1 ) + '…'
2626}
2727
28- const extractDomain = ( url : string ) : string => {
28+ function truncateToWidth ( text : string , width : number ) : string {
29+ if ( width <= 0 ) return ''
30+ if ( text . length <= width ) return text
31+ return text . slice ( 0 , width - 1 ) + '…'
32+ }
33+
34+ export const extractDomain = ( url : string ) : string => {
2935 try {
3036 const parsed = new URL ( url )
3137 return parsed . hostname . replace ( / ^ w w w \. / , '' )
@@ -34,6 +40,17 @@ const extractDomain = (url: string): string => {
3440 }
3541}
3642
43+ export function getAdDisplayLabel (
44+ ad : Pick < AdResponse , 'title' | 'url' > ,
45+ ) : { text : string ; variant : 'domain' | 'title' } {
46+ const url = ad . url . trim ( )
47+ if ( url ) {
48+ return { text : extractDomain ( url ) , variant : 'domain' }
49+ }
50+
51+ return { text : ad . title . trim ( ) || 'Sponsored' , variant : 'title' }
52+ }
53+
3754/**
3855 * Calculate evenly distributed column widths that sum exactly to availableWidth.
3956 * Distributes remainder pixels across the first N columns so there's no gap.
@@ -89,8 +106,10 @@ export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({ ads, onImpressio
89106 >
90107 { visibleAds . map ( ( ad , i ) => {
91108 const isHovered = hoveredIndex === i
92- const domain = extractDomain ( ad . url )
93109 const ctaText = ad . cta || ad . title || 'Learn more'
110+ const label = getAdDisplayLabel ( ad )
111+ const labelMaxWidth = Math . max ( 0 , widths [ i ] - ctaText . length - 5 )
112+ const labelText = truncateToWidth ( label . text , labelMaxWidth )
94113
95114 return (
96115 < Button
@@ -130,8 +149,16 @@ export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({ ads, onImpressio
130149 >
131150 { ` ${ ctaText } ` }
132151 </ text >
133- < text style = { { fg : theme . muted , attributes : TextAttributes . UNDERLINE } } >
134- { domain }
152+ < text
153+ style = { {
154+ fg : theme . muted ,
155+ attributes :
156+ label . variant === 'domain'
157+ ? TextAttributes . UNDERLINE
158+ : TextAttributes . DIM ,
159+ } }
160+ >
161+ { labelText }
135162 </ text >
136163
137164 </ box >
0 commit comments