refactor: create shared useLogo hook and improve sorting

- Create useLogo hook to centralize logo variant logic
- Update chat and login modal to use shared hook
- Remove logoVariant from calculateResponsiveLayout
- Simplify agent sorting logic using comparison chaining
- Increase minimum width threshold for full logo (60->70)

Author: brandonkachen

cli/src/chat.tsx

@@ -28,6 +28,7 @@ import { useAuthQuery, useLogoutMutation } from './hooks/use-auth-query'
 import { useClipboard } from './hooks/use-clipboard'
 import { useInputHistory } from './hooks/use-input-history'
 import { useKeyboardHandlers } from './hooks/use-keyboard-handlers'
+import { useLogo } from './hooks/use-logo'
 import { useMessageQueue } from './hooks/use-message-queue'
 import { useMessageRenderer } from './hooks/use-message-renderer'
 import { useChatScrollbox } from './hooks/use-scroll-management'
@@ -160,11 +161,21 @@ 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 >= 80 ? LOGO : LOGO_SMALL
-  const logoBlock = logoToUse.split('\n')
-    .filter((line) => line.length > 0)
-    .join('\n')
+  // Determine which logo to use based on available content width
+  const contentMaxWidth = Math.max(10, Math.min(terminalWidth - 4, 80))
+  const logoVariant = useLogo(contentMaxWidth)
+
+  // Get logo string based on variant
+  const logoToUse =
+    logoVariant === 'text'
+      ? '' // Don't show ASCII art for text-only variant
+      : logoVariant === 'small'
+        ? LOGO_SMALL
+        : LOGO
+
+  const logoBlock = logoToUse
+    ? logoToUse.split('\n').filter((line) => line.length > 0).join('\n')
+    : ''
 
   const themeName = useSystemThemeDetector()
   const theme = chatThemes[themeName]
@@ -343,6 +354,7 @@ export const App = ({
         const errorBlocks = createValidationErrorBlocks({
           errors: validationErrors,
           loadedAgentsData,
+          availableWidth: separatorWidth,
         })
 
         const validationErrorMessage: ChatMessage = {
@@ -846,6 +858,7 @@ export const App = ({
     onBeforeMessageSend: validateAgents,
     setMainAgentStreamStartTime,
     scrollToLatest,
+    availableWidth: separatorWidth,
   })
 
   sendMessageRef.current = sendMessage

cli/src/components/login-modal.tsx

@@ -7,6 +7,7 @@ import { useLoginMutation } from '../hooks/use-auth-query'
 import { useFetchLoginUrl } from '../hooks/use-fetch-login-url'
 import { useLoginKeyboardHandlers } from '../hooks/use-login-keyboard-handlers'
 import { useLoginPolling } from '../hooks/use-login-polling'
+import { useLogo } from '../hooks/use-logo'
 import { useSheenAnimation } from '../hooks/use-sheen-animation'
 import {
   LOGO,
@@ -246,9 +247,11 @@ export const LoginModal = ({
     sectionMarginBottom,
     contentMaxWidth,
     maxUrlWidth,
-    logoVariant,
   } = calculateResponsiveLayout(terminalWidth, terminalHeight)
 
+  // Determine which logo to use based on available content width
+  const logoVariant = useLogo(contentMaxWidth)
+
   // Use custom hook for sheen animation
   const { applySheenToChar } = useSheenAnimation({
     logoColor,

cli/src/components/message-block.tsx

@@ -253,16 +253,11 @@ export const MessageBlock = ({
 
     const sortedAgents = [...agents].sort((a, b) => {
       // Sort by displayName first (empty string if missing), then by ID as tiebreaker
-      const aDisplayName = (a.displayName || '').toLowerCase()
-      const bDisplayName = (b.displayName || '').toLowerCase()
+      const displayNameComparison = (a.displayName || '')
+        .toLowerCase()
+        .localeCompare((b.displayName || '').toLowerCase())
 
-      const displayNameComparison = aDisplayName.localeCompare(bDisplayName)
-      if (displayNameComparison !== 0) {
-        return displayNameComparison
-      }
-
-      // If displayNames are identical (including both empty), sort by ID
-      return a.id.toLowerCase().localeCompare(b.id.toLowerCase())
+      return displayNameComparison || a.id.toLowerCase().localeCompare(b.id.toLowerCase())
     })
 
     const agentCount = sortedAgents.length

cli/src/hooks/use-logo.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+
+export type LogoVariant = 'full' | 'small' | 'text'
+
+/**
+ * Hook to determine which logo variant to use based on available width
+ * Returns 'full' for wide content (>=70), 'small' for medium (>=40), 'text' for narrow
+ *
+ * Note: Use contentMaxWidth for login modal (accounts for padding),
+ * or raw terminalWidth for other contexts
+ */
+export const useLogo = (availableWidth: number): LogoVariant => {
+  return useMemo(() => {
+    if (availableWidth >= 70) return 'full'
+    if (availableWidth >= 40) return 'small'
+    return 'text'
+  }, [availableWidth])
+}

cli/src/login/utils.ts

@@ -123,11 +123,6 @@ export function calculateResponsiveLayout(terminalWidth: number, terminalHeight:
 
   const maxUrlWidth = Math.min(terminalWidth - 10, 100)
 
-  // Determine logo variant based on available width
-  // Always show some form of logo/header: full → small → text
-  const logoVariant: 'full' | 'small' | 'text' =
-    contentMaxWidth >= 60 ? 'full' : contentMaxWidth >= 20 ? 'small' : 'text'
-
   return {
     isVerySmall,
     isSmall,
@@ -140,7 +135,6 @@ export function calculateResponsiveLayout(terminalWidth: number, terminalHeight:
     sectionMarginBottom,
     contentMaxWidth,
     maxUrlWidth,
-    logoVariant,
   }
 }