Function BottomBanner

cli/src/components/bottom-banner.tsx:63–136

({
  borderColorKey,
  borderColor: borderColorOverride,
  textColorKey,
  textColor: textColorOverride,
  text,
  children,
  onClose,
  border,
})

 * ```
 */
export const BottomBanner: React.FC<BottomBannerProps> = ({
  borderColorKey,
  borderColor: borderColorOverride,
  textColorKey,
  textColor: textColorOverride,
  text,
  children,
  onClose,
  border,
}) => {
  const { width, terminalWidth } = useTerminalLayout()
  const theme = useTheme()
  const [isCloseHovered, setIsCloseHovered] = useState(false)

  // Resolve colors from theme or use overrides
  const themeRecord = theme as unknown as Record<string, string>
  const borderColor = borderColorOverride ?? themeRecord[borderColorKey]
  const textColor =
    textColorOverride ??
    (textColorKey ? themeRecord[textColorKey] : borderColor)

  const hasCloseButton = onClose !== undefined
  const hasTextContent = text !== undefined && children === undefined

  return (
    <box
      key={terminalWidth}
      style={{
        marginLeft: width.is('sm') ? 0 : 1,
        marginRight: width.is('sm') ? 0 : 1,
        borderStyle: 'single',
        borderColor: borderColor,
        flexDirection: hasCloseButton ? 'row' : 'column',
        justifyContent: hasCloseButton ? 'space-between' : undefined,
        paddingLeft: 1,
        paddingRight: 1,
        marginTop: 0,
        marginBottom: 0,
      }}
      border={border ?? ['bottom', 'left', 'right']}
      customBorderChars={BORDER_CHARS}
    >
      {hasTextContent ? (
        // Simple text content with optional close button
        <>
          <text
            style={{
              fg: textColor,
              wrapMode: 'word',
              flexShrink: 1,
              marginRight: hasCloseButton ? 3 : 0,
            }}
          >
            {text}
          </text>
        </>
      ) : (
        // Custom children content