refactor: improve UI consistency and clean up code

brandonkachen · brandonkachen · commit ffb4f0ccae3c · 2025-10-30T11:44:00.000-07:00
- Refactor logo display logic to use cleaner logoVariant enum ('full' | 'small' | 'text')
- Fix agent sorting to properly sort by displayName then ID
- Update welcome message to show clickable repository path instead of "this repository"
- Remove debug logging from status indicator component
diff --git a/cli/src/chat.tsx b/cli/src/chat.tsx
@@ -161,7 +161,7 @@ export const App = ({
   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 logoToUse = terminalWidth >= 80 ? LOGO : LOGO_SMALL
   const logoBlock = logoToUse.split('\n')
     .filter((line) => line.length > 0)
     .join('\n')
@@ -235,6 +235,29 @@ export const App = ({
     )
   }, [])
 
+  // Update logo when terminal width changes
+  useEffect(() => {
+    if (messages.length > 0) {
+      const systemMessage = messages.find(m => m.id.startsWith('system-loaded-agents-'))
+      if (systemMessage?.blocks) {
+        const logoBlockIndex = systemMessage.blocks.findIndex(b => b.type === 'text' && b.content.includes('█'))
+        if (logoBlockIndex !== -1) {
+          setMessages(prev => prev.map(msg => {
+            if (msg.id === systemMessage.id) {
+              const newBlocks = [...msg.blocks!]
+              newBlocks[logoBlockIndex] = {
+                type: 'text',
+                content: '\n\n' + logoBlock,
+              }
+              return { ...msg, blocks: newBlocks }
+            }
+            return msg
+          }))
+        }
+      }
+    }
+  }, [logoBlock])
+
   // Initialize with loaded agents message
   useEffect(() => {
     if (loadedAgentsData && messages.length === 0) {
@@ -258,10 +281,29 @@ export const App = ({
         })
       }
 
+      // Calculate relative path from cwd to repository root
+      // agentsDir is typically in the root, so use its parent as the repository root
+      const cwd = process.cwd()
+      const repoRoot = path.dirname(loadedAgentsData.agentsDir)
+      const relativePath = path.relative(cwd, repoRoot)
+      const displayPath = relativePath || '.'
+
       blocks.push({
-        type: 'text',
-        content:
-          'Codebuff can read and write files in this repository, and run terminal commands to help you build.',
+        type: 'html',
+        render: ({ textColor }) => (
+          <text>
+            Codebuff can read and write files in{' '}
+            <TerminalLink
+              text={displayPath}
+              color={textColor}
+              inline={true}
+              onActivate={async () => {
+                await openFileAtPath(repoRoot)
+              }}
+            />
+            , and run terminal commands to help you build.
+          </text>
+        ),
       })
 
       blocks.push({
diff --git a/cli/src/components/login-modal.tsx b/cli/src/components/login-modal.tsx
@@ -246,8 +246,7 @@ export const LoginModal = ({
     sectionMarginBottom,
     contentMaxWidth,
     maxUrlWidth,
-    showFullLogo,
-    showSmallLogo,
+    logoVariant,
   } = calculateResponsiveLayout(terminalWidth, terminalHeight)
 
   // Use custom hook for sheen animation
@@ -258,8 +257,8 @@ export const LoginModal = ({
     setSheenPosition,
   })
 
-  // Parse logo lines based on which logo to show
-  const logoLines = parseLogoLines(showSmallLogo ? LOGO_SMALL : LOGO)
+  // Parse logo lines based on logo variant
+  const logoLines = parseLogoLines(logoVariant === 'small' ? LOGO_SMALL : LOGO)
 
   // Slice logo lines to fit terminal width
   const logoDisplayLines = useMemo(
@@ -341,37 +340,37 @@ export const LoginModal = ({
           gap: 0,
         }}
       >
-        {/* Header - Logo or simple text based on terminal size */}
-        {showFullLogo || showSmallLogo ? (
+        {/* Header - Always show logo in one of three variants: full, small, or text */}
+        {logoVariant === 'text' ? (
           <box
-            key="codebuff-logo"
             style={{
               flexDirection: 'column',
-              alignItems: 'flex-start',
+              alignItems: 'center',
               marginTop: headerMarginTop,
               marginBottom: headerMarginBottom,
               flexShrink: 0,
             }}
           >
-            {renderedLogo}
+            <text wrap={false}>
+              <b>
+                <span fg={theme.chromeText}>
+                  {isNarrow ? 'Codebuff' : 'Codebuff CLI'}
+                </span>
+              </b>
+            </text>
           </box>
         ) : (
           <box
+            key="codebuff-logo"
             style={{
               flexDirection: 'column',
-              alignItems: 'center',
+              alignItems: 'flex-start',
               marginTop: headerMarginTop,
               marginBottom: headerMarginBottom,
               flexShrink: 0,
             }}
           >
-            <text wrap={false}>
-              <b>
-                <span fg={theme.chromeText}>
-                  {isNarrow ? 'Codebuff' : 'Codebuff CLI'}
-                </span>
-              </b>
-            </text>
+            {renderedLogo}
           </box>
         )}
 
diff --git a/cli/src/components/message-block.tsx b/cli/src/components/message-block.tsx
@@ -252,9 +252,17 @@ export const MessageBlock = ({
     const { agents } = agentListBlock
 
     const sortedAgents = [...agents].sort((a, b) => {
-      const aLabel = (a.displayName || a.id).toLowerCase()
-      const bLabel = (b.displayName || b.id).toLowerCase()
-      return aLabel.localeCompare(bLabel)
+      // 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 = 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())
     })
 
     const agentCount = sortedAgents.length
@@ -284,17 +292,16 @@ export const MessageBlock = ({
     const previewLines = previewAgents.map(
       (agent) => `  • ${formatIdentifier(agent)}`,
     )
-    const finishedPreview =
-      isCollapsed
-        ? [
-            ...previewLines,
-            remainingCount > 0
-              ? `  ... ${pluralize(remainingCount, 'more agent')} available`
-              : null,
-          ]
-            .filter(Boolean)
-            .join('\n')
-        : ''
+    const finishedPreview = isCollapsed
+      ? [
+          ...previewLines,
+          remainingCount > 0
+            ? `  ... ${pluralize(remainingCount, 'more agent')} available`
+            : null,
+        ]
+          .filter(Boolean)
+          .join('\n')
+      : ''
 
     return (
       <box
@@ -512,7 +519,7 @@ export const MessageBlock = ({
           )
         })()
       )}
-      {isAi && isComplete && credits && (
+      {isAi && isComplete && (completionTime || credits) && (
         <text
           wrap={false}
           attributes={TextAttributes.DIM}
@@ -523,7 +530,8 @@ export const MessageBlock = ({
             alignSelf: 'flex-start',
           }}
         >
-          {credits} credits
+          {completionTime}
+          {credits && ` • ${credits} credits`}
         </text>
       )}
     </>
diff --git a/cli/src/components/status-indicator.tsx b/cli/src/components/status-indicator.tsx
@@ -51,13 +51,6 @@ export const StatusIndicator = ({
   const isConnected = useConnectionStatus()
   const [elapsedSeconds, setElapsedSeconds] = useState<number>(0)
 
-  // Debug log on every render
-  useEffect(() => {
-    logger.debug(
-      { streamStartTime, elapsedSeconds, isProcessing, showThinking },
-      '[STREAM TIMER] StatusIndicator rendered',
-    )
-  })
 
   // Update elapsed time every second while streaming
   useEffect(() => {
@@ -97,10 +90,6 @@ export const StatusIndicator = ({
   if (isProcessing || showThinking) {
     // If we have a stream start time and elapsed > 0, show elapsed time
     if (streamStartTime && elapsedSeconds > 0) {
-      logger.debug(
-        { streamStartTime, elapsedSeconds, isProcessing, showThinking },
-        '[STREAM TIMER] Showing elapsed time',
-      )
       return (
         <span fg={theme.statusSecondary}>
           {elapsedSeconds}s
@@ -109,10 +98,6 @@ export const StatusIndicator = ({
     }
 
     // Otherwise show thinking...
-    logger.debug(
-      { streamStartTime, elapsedSeconds, isProcessing, showThinking },
-      '[STREAM TIMER] Showing thinking... (no timer)',
-    )
     return (
       <ShimmerText
         text="thinking..."
diff --git a/cli/src/login/utils.ts b/cli/src/login/utils.ts
@@ -123,9 +123,10 @@ export function calculateResponsiveLayout(terminalWidth: number, terminalHeight:
 
   const maxUrlWidth = Math.min(terminalWidth - 10, 100)
 
-  // Show full logo on all terminal sizes as long as width allows
-  const showFullLogo = contentMaxWidth >= 60
-  const showSmallLogo = contentMaxWidth >= 20 && !showFullLogo
+  // 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,
@@ -139,8 +140,7 @@ export function calculateResponsiveLayout(terminalWidth: number, terminalHeight:
     sectionMarginBottom,
     contentMaxWidth,
     maxUrlWidth,
-    showFullLogo,
-    showSmallLogo,
+    logoVariant,
   }
 }
 
