feat: show small logo when terminal width is small

Author: brandonkachen

cli/src/chat.tsx

@@ -37,7 +37,7 @@ import { useSystemThemeDetector } from './hooks/use-system-theme-detector'
 import { useChatStore } from './state/chat-store'
 import { flushAnalytics } from './utils/analytics'
 import { getUserCredentials } from './utils/auth'
-import { LOGO } from './login/constants'
+import { LOGO, LOGO_SMALL } from './login/constants'
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
 import { formatQueuedPreview } from './utils/helpers'
 import {
@@ -63,9 +63,7 @@ type ChatVariant = 'ai' | 'user' | 'agent' | 'error'
 const MAX_VIRTUALIZED_TOP_LEVEL = 60
 const VIRTUAL_OVERSCAN = 12
 
-const LOGO_BLOCK = LOGO.split('\n')
-  .filter((line) => line.length > 0)
-  .join('\n')
+// LOGO_BLOCK moved to component to be reactive to terminal width changes
 
 type AgentMessage = {
   agentName: string
@@ -160,6 +158,12 @@ export const App = ({
   const terminalWidth = resolvedTerminalWidth
   const separatorWidth = Math.max(1, Math.floor(terminalWidth) - 2)
 
+  // Determine which logo to use based on terminal width
+  const logoToUse = terminalWidth >= 60 ? LOGO : LOGO_SMALL
+  const logoBlock = logoToUse.split('\n')
+    .filter((line) => line.length > 0)
+    .join('\n')
+
   const themeName = useSystemThemeDetector()
   const theme = chatThemes[themeName]
   const markdownPalette = useMemo(() => createMarkdownPalette(theme), [theme])
@@ -241,7 +245,7 @@ export const App = ({
       const blocks: ContentBlock[] = [
         {
           type: 'text',
-          content: '\n\n' + LOGO_BLOCK,
+          content: '\n\n' + logoBlock,
         },
       ]
 

cli/src/components/login-modal.tsx

@@ -10,6 +10,7 @@ import { useLoginPolling } from '../hooks/use-login-polling'
 import { useSheenAnimation } from '../hooks/use-sheen-animation'
 import {
   LOGO,
+  LOGO_SMALL,
   LINK_COLOR_DEFAULT,
   LINK_COLOR_CLICKED,
   COPY_SUCCESS_COLOR,
@@ -231,17 +232,6 @@ export const LoginModal = ({
   // Use pure black/white for logo
   const logoColor = isLightMode ? '#000000' : '#ffffff'
 
-  // Use custom hook for sheen animation
-  const { applySheenToChar } = useSheenAnimation({
-    logoColor,
-    terminalWidth: renderer?.width,
-    sheenPosition,
-    setSheenPosition,
-  })
-
-  // Parse logo lines
-  const logoLines = parseLogoLines(LOGO)
-
   // Calculate terminal width and height for responsive display
   const terminalWidth = renderer?.width || 80
   const terminalHeight = renderer?.height || 24
@@ -257,8 +247,20 @@ export const LoginModal = ({
     contentMaxWidth,
     maxUrlWidth,
     showFullLogo,
+    showSmallLogo,
   } = calculateResponsiveLayout(terminalWidth, terminalHeight)
 
+  // Use custom hook for sheen animation
+  const { applySheenToChar } = useSheenAnimation({
+    logoColor,
+    terminalWidth: renderer?.width,
+    sheenPosition,
+    setSheenPosition,
+  })
+
+  // Parse logo lines based on which logo to show
+  const logoLines = parseLogoLines(showSmallLogo ? LOGO_SMALL : LOGO)
+
   // Slice logo lines to fit terminal width
   const logoDisplayLines = useMemo(
     () => logoLines.map((line) => line.slice(0, contentMaxWidth)),
@@ -340,7 +342,7 @@ export const LoginModal = ({
         }}
       >
         {/* Header - Logo or simple text based on terminal size */}
-        {showFullLogo ? (
+        {showFullLogo || showSmallLogo ? (
           <box
             key="codebuff-logo"
             style={{

cli/src/login/constants.ts

@@ -12,6 +12,14 @@ export const LOGO = `
   ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚═════╝  ╚═════╝ ╚═╝     ╚═╝
 `
 
+export const LOGO_SMALL = `
+  ██████╗ ██████╗
+ ██╔════╝ ██╔══██╗
+ ██║      ██████╔╝
+ ██║      ██╔══██╗
+ ╚██████╗ ██████╔╝
+  ╚═════╝ ╚═════╝
+`
 // UI Color constants
 export const LINK_COLOR_DEFAULT = '#3b82f6'
 export const LINK_COLOR_CLICKED = '#1e40af'

cli/src/login/utils.ts

@@ -125,6 +125,7 @@ export function calculateResponsiveLayout(terminalWidth: number, terminalHeight:
 
   // Show full logo on all terminal sizes as long as width allows
   const showFullLogo = contentMaxWidth >= 60
+  const showSmallLogo = contentMaxWidth >= 20 && !showFullLogo
 
   return {
     isVerySmall,
@@ -139,6 +140,7 @@ export function calculateResponsiveLayout(terminalWidth: number, terminalHeight:
     contentMaxWidth,
     maxUrlWidth,
     showFullLogo,
+    showSmallLogo,
   }
 }