refactor(cli): consolidate terminal breakpoints into reusable hook

- Create useTerminalBreakpoints hook (terminal equivalent of useMediaQuery)
- Provides consistent breakpoint values across components
- Replace manual breakpoint calculations in LoginModal
- More maintainable and DRY code

Author: brandonkachen

cli/src/components/login-modal.tsx

@@ -1,4 +1,4 @@
-import { useKeyboard, useRenderer } from '@opentui/react'
+import { useKeyboard } from '@opentui/react'
 import { useMutation } from '@tanstack/react-query'
 import open from 'open'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -12,6 +12,7 @@ import {
 } from './login-modal-utils'
 import { TerminalLink } from './terminal-link'
 import { useLoginMutation } from '../hooks/use-auth-query'
+import { useTerminalBreakpoints } from '../hooks/use-terminal-breakpoints'
 import { generateLoginUrl, pollLoginStatus } from '../login/login-flow'
 import { copyTextToClipboard } from '../utils/clipboard'
 import { logger } from '../utils/logger'
@@ -50,7 +51,7 @@ export const LoginModal = ({
   theme,
   hasInvalidCredentials = false,
 }: LoginModalProps) => {
-  const renderer = useRenderer()
+  const breakpoints = useTerminalBreakpoints()
   const [loginUrl, setLoginUrl] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -329,14 +330,14 @@ export const LoginModal = ({
   useEffect(() => {
     const interval = setInterval(() => {
       setSheenPosition((prev) => {
-        const modulo = Math.max(10, Math.min((renderer?.width || 80) - 4, 100))
+        const modulo = Math.max(10, Math.min(breakpoints.width - 4, 100))
         const next = (prev + 1) % modulo
         return next
       })
     }, 150) // Update every 150ms for smooth animation with less CPU usage
 
     return () => clearInterval(interval)
-  }, [])
+  }, [breakpoints.width])
 
   // Determine if we're in light mode by checking background color luminance
   const isLightMode = useMemo(
@@ -368,19 +369,9 @@ export const LoginModal = ({
   // Memoize logo lines to prevent recalculation
   const logoLines = useMemo(() => parseLogoLines(LOGO), [])
 
-  // Calculate terminal width and height for responsive display
-  const terminalWidth = renderer?.width || 80
-  const terminalHeight = renderer?.height || 24
-  const maxUrlWidth = Math.min(terminalWidth - 10, 100)
-
-  // Responsive breakpoints based on terminal height
-  const isVerySmall = terminalHeight < 15 // Minimal UI
-  const isSmall = terminalHeight >= 15 && terminalHeight < 20 // Compact UI
-  const isMedium = terminalHeight >= 20 && terminalHeight < 30 // Standard UI
-  const isLarge = terminalHeight >= 30 // Spacious UI
-
-  // Responsive breakpoints based on terminal width
-  const isNarrow = terminalWidth < 60
+  // Calculate responsive dimensions using breakpoints
+  const { width, height, isVerySmall, isNarrow, isTall } = breakpoints
+  const maxUrlWidth = Math.min(width - 10, 100)
 
   // Dynamic spacing based on terminal size - compressed to prevent scrolling
   const containerPadding = isVerySmall ? 0 : 1
@@ -389,7 +380,7 @@ export const LoginModal = ({
   const sectionMarginBottom = isVerySmall ? 0 : 1
   const contentMaxWidth = Math.max(
     10,
-    Math.min(terminalWidth - (containerPadding * 2 + 4), 80),
+    Math.min(width - (containerPadding * 2 + 4), 80),
   )
 
   const logoDisplayLines = useMemo(
@@ -398,23 +389,23 @@ export const LoginModal = ({
   )
 
   // Show full logo on all terminal sizes as long as width allows
-  const showFullLogo = contentMaxWidth >= 60
+  const showFullLogo = isTall && contentMaxWidth >= 60
   // Show simple header on smaller terminals
   const showHeader = true
 
   // Format URL for display (wrap if needed)
   return (
     <box
       position="absolute"
-      left={Math.floor(terminalWidth * 0.05)}
+      left={Math.floor(width * 0.05)}
       top={1}
       border
       borderStyle="double"
       borderColor={theme.statusAccent}
       style={{
-        width: Math.floor(terminalWidth * 0.9),
-        height: Math.min(Math.floor((renderer?.height || 24) - 2), 22),
-        maxHeight: Math.min(Math.floor((renderer?.height || 24) - 2), 22),
+        width: Math.floor(width * 0.9),
+        height: Math.min(Math.floor(height - 2), 22),
+        maxHeight: Math.min(Math.floor(height - 2), 22),
         backgroundColor: theme.background,
         padding: 0,
         overflow: 'hidden',

cli/src/hooks/use-terminal-breakpoints.ts

@@ -0,0 +1,77 @@
+import { useRenderer } from '@opentui/react'
+import { useMemo } from 'react'
+
+export interface TerminalBreakpoints {
+  // Width-based
+  width: number
+  isNarrow: boolean // < 60 cols
+  isMediumWidth: boolean // >= 60 && < 100
+  isWide: boolean // >= 100 cols
+
+  // Height-based
+  height: number
+  isVerySmall: boolean // < 15 rows (minimal UI)
+  isSmall: boolean // >= 15 && < 20 rows (compact UI)
+  isMedium: boolean // >= 20 && < 30 rows (standard UI)
+  isLarge: boolean // >= 30 rows (spacious UI)
+  isTall: boolean // >= 20 rows (alias for backward compatibility)
+}
+
+const WIDTH_BREAKPOINTS = {
+  narrow: 60,
+  mediumWidth: 100,
+} as const
+
+const HEIGHT_BREAKPOINTS = {
+  verySmall: 15,
+  small: 20,
+  medium: 30,
+} as const
+
+/**
+ * Hook to get responsive breakpoints based on terminal dimensions.
+ * Similar to useMediaQuery in web apps, but for terminal-based UIs.
+ *
+ * @returns Object with terminal dimensions and boolean breakpoint flags
+ *
+ * @example
+ * const { isNarrow, isVerySmall, width, height } = useTerminalBreakpoints()
+ *
+ * // Use breakpoints for conditional rendering
+ * {isNarrow && <CompactView />}
+ * {!isNarrow && <FullView />}
+ *
+ * // Use dimensions for calculations
+ * const maxWidth = Math.min(width - 10, 100)
+ */
+export const useTerminalBreakpoints = (): TerminalBreakpoints => {
+  const renderer = useRenderer()
+
+  return useMemo(() => {
+    const width = renderer?.width || 80
+    const height = renderer?.height || 24
+
+    return {
+      width,
+      height,
+
+      // Width breakpoints
+      isNarrow: width < WIDTH_BREAKPOINTS.narrow,
+      isMediumWidth:
+        width >= WIDTH_BREAKPOINTS.narrow &&
+        width < WIDTH_BREAKPOINTS.mediumWidth,
+      isWide: width >= WIDTH_BREAKPOINTS.mediumWidth,
+
+      // Height breakpoints
+      isVerySmall: height < HEIGHT_BREAKPOINTS.verySmall,
+      isSmall:
+        height >= HEIGHT_BREAKPOINTS.verySmall &&
+        height < HEIGHT_BREAKPOINTS.small,
+      isMedium:
+        height >= HEIGHT_BREAKPOINTS.small &&
+        height < HEIGHT_BREAKPOINTS.medium,
+      isLarge: height >= HEIGHT_BREAKPOINTS.medium,
+      isTall: height >= HEIGHT_BREAKPOINTS.small, // Alias for backward compatibility
+    }
+  }, [renderer?.width, renderer?.height])
+}