Skip to content

Add waiting room ad spacer #581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jahooma merged 1 commit into from
May 3, 2026
Merged

Add waiting room ad spacer #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions cli/src/components/choice-ad-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface ChoiceAdBannerProps {
onImpression?: (impUrl: string) => void
}

const CARD_HEIGHT = 5 // border-top + 2 lines description + spacer + cta row + border-bottom
export const CHOICE_AD_BANNER_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

Expand Down Expand Up @@ -121,7 +121,7 @@ export const ChoiceAdBanner: React.FC<ChoiceAdBannerProps> = ({ ads, onImpressio
onMouseOut={() => setHoveredIndex(null)}
style={{
width: widths[i],
height: CARD_HEIGHT,
height: CHOICE_AD_BANNER_HEIGHT,
borderStyle: 'single',
borderColor: isHovered ? hoverBorderColor : theme.muted,
customBorderChars: BORDER_CHARS,
Expand Down
31 changes: 18 additions & 13 deletions cli/src/components/waiting-room-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ import { useRenderer } from '@opentui/react'
import React, { useMemo, useState } from 'react'

import { Button } from './button'
import { ChoiceAdBanner } from './choice-ad-banner'
import {
ChoiceAdBanner,
CHOICE_AD_BANNER_HEIGHT,
} from './choice-ad-banner'
import { FreebuffModelSelector } from './freebuff-model-selector'
import { ShimmerText } from './shimmer-text'
import { useFreebuffCtrlCExit } from '../hooks/use-freebuff-ctrl-c-exit'
Expand Down Expand Up @@ -368,19 +371,21 @@ export const WaitingRoomScreen: React.FC<WaitingRoomScreenProps> = ({
</box>
</box>

{/* Ad banner pinned to the bottom, same look-and-feel as in chat. */}
{ads && (
<box style={{ flexShrink: 0 }}>
{/* Reserve the ad banner slot before the async ad fetch resolves so the
waiting-room content does not jump when the banner fills. */}
<box
style={{
width: '100%',
flexShrink: 0,
height: CHOICE_AD_BANNER_HEIGHT,
}}
>
{ads ? (
<ChoiceAdBanner ads={ads} onImpression={recordImpression} />
</box>
)}

{/* Horizontal separator (mirrors chat input divider style) */}
{!ads && (
<text style={{ fg: theme.muted, flexShrink: 0 }}>
{'─'.repeat(terminalWidth)}
</text>
)}
) : (
<text style={{ fg: theme.muted }}>{'─'.repeat(terminalWidth)}</text>
)}
</box>
</box>
)
}
Loading