Make login it's own screen. Handle auth in app.tsx instead of chat.tsx

Author: jahooma

cli/src/app.tsx

@@ -1,18 +1,23 @@
 import os from 'os'
 import path from 'path'
 
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 
 import { Chat } from './chat'
+import { LoginModal } from './components/login-modal'
 import { TerminalLink } from './components/terminal-link'
 import { ToolCallItem } from './components/tools/tool-call-item'
+import { useAuthState } from './hooks/use-auth-state'
 import { useLogo } from './hooks/use-logo'
 import { useTerminalDimensions } from './hooks/use-terminal-dimensions'
 import { useTheme } from './hooks/use-theme'
+import { useChatStore } from './state/chat-store'
 import { createValidationErrorBlocks } from './utils/create-validation-error-blocks'
 import { openFileAtPath } from './utils/open-file'
 import { pluralize } from '@codebuff/common/util/string'
 
+import type { MultilineInputHandle } from './components/multiline-input'
 import type { FileTreeNode } from '@codebuff/common/util/file'
 
 interface AppProps {
@@ -42,6 +47,28 @@ export const App = ({
   const { textBlock: logoBlock } = useLogo({ availableWidth: contentMaxWidth })
 
   const [isAgentListCollapsed, setIsAgentListCollapsed] = useState(true)
+  
+  const inputRef = useRef<MultilineInputHandle | null>(null)
+  const { setInputFocused, resetChatStore } = useChatStore(
+    useShallow((store) => ({
+      setInputFocused: store.setInputFocused,
+      resetChatStore: store.reset,
+    }))
+  )
+
+  const {
+    isAuthenticated,
+    setIsAuthenticated,
+    setUser,
+    handleLoginSuccess,
+    logoutMutation,
+  } = useAuthState({
+    requireAuth,
+    hasInvalidCredentials,
+    inputRef,
+    setInputFocused,
+    resetChatStore,
+  })
 
   const headerContent = useMemo(() => {
     if (!loadedAgentsData) {
@@ -172,16 +199,28 @@ export const App = ({
     separatorWidth,
   ])
 
+  // Render login modal when not authenticated, otherwise render chat
+  if (requireAuth !== null && isAuthenticated === false) {
+    return (
+      <LoginModal
+        onLoginSuccess={handleLoginSuccess}
+        hasInvalidCredentials={hasInvalidCredentials}
+      />
+    )
+  }
+
   return (
     <Chat
       headerContent={headerContent}
       initialPrompt={initialPrompt}
       agentId={agentId}
-      requireAuth={requireAuth}
-      hasInvalidCredentials={hasInvalidCredentials}
       loadedAgentsData={loadedAgentsData}
       validationErrors={validationErrors}
       fileTree={fileTree}
+      inputRef={inputRef}
+      setIsAuthenticated={setIsAuthenticated}
+      setUser={setUser}
+      logoutMutation={logoutMutation}
     />
   )
 }

cli/src/chat.tsx

@@ -3,8 +3,6 @@ import { useShallow } from 'zustand/react/shallow'
 
 import { routeUserPrompt } from './commands/router'
 import { AgentModeToggle } from './components/agent-mode-toggle'
-import { Button } from './components/button'
-import { LoginModal } from './components/login-modal'
 import { MessageWithAgents } from './components/message-with-agents'
 import {
   MultilineInput,
@@ -15,7 +13,6 @@ import { StatusBar } from './components/status-bar'
 import { SuggestionMenu } from './components/suggestion-menu'
 import { SLASH_COMMANDS } from './data/slash-commands'
 import { useAgentValidation } from './hooks/use-agent-validation'
-import { useAuthState } from './hooks/use-auth-state'
 import { useChatInput } from './hooks/use-chat-input'
 import { useClipboard } from './hooks/use-clipboard'
 import { useConnectionStatus } from './hooks/use-connection-status'
@@ -44,33 +41,39 @@ import { BORDER_CHARS } from './utils/ui-constants'
 
 import type { ContentBlock } from './types/chat'
 import type { SendMessageFn } from './types/contracts/send-message'
+import type { User } from './utils/auth'
 import type { FileTreeNode } from '@codebuff/common/util/file'
 import type { ScrollBoxRenderable } from '@opentui/core'
+import type { UseMutationResult } from '@tanstack/react-query'
+import type { Dispatch, SetStateAction } from 'react'
 
 export const Chat = ({
   headerContent,
   initialPrompt,
   agentId,
-  requireAuth,
-  hasInvalidCredentials,
   loadedAgentsData,
   validationErrors,
   fileTree,
+  inputRef,
+  setIsAuthenticated,
+  setUser,
+  logoutMutation,
 }: {
   headerContent: React.ReactNode
   initialPrompt: string | null
   agentId?: string
-  requireAuth: boolean | null
-  hasInvalidCredentials: boolean
   loadedAgentsData: {
     agents: Array<{ id: string; displayName: string }>
     agentsDir: string
   } | null
   validationErrors: Array<{ id: string; message: string }>
   fileTree: FileTreeNode[]
+  inputRef: React.MutableRefObject<MultilineInputHandle | null>
+  setIsAuthenticated: Dispatch<SetStateAction<boolean | null>>
+  setUser: Dispatch<SetStateAction<User | null>>
+  logoutMutation: UseMutationResult<boolean, Error, void, unknown>
 }) => {
   const scrollRef = useRef<ScrollBoxRenderable | null>(null)
-  const inputRef = useRef<MultilineInputHandle | null>(null)
 
   const { separatorWidth, terminalWidth } = useTerminalDimensions()
 
@@ -178,20 +181,6 @@ export const Chat = ({
     return ids
   }, [messages])
 
-  const {
-    isAuthenticated,
-    setIsAuthenticated,
-    setUser,
-    handleLoginSuccess,
-    logoutMutation,
-  } = useAuthState({
-    requireAuth,
-    hasInvalidCredentials,
-    inputRef,
-    setInputFocused,
-    resetChatStore,
-  })
-
   // Refs for tracking state across renders
   const activeAgentStreamsRef = useRef<number>(0)
   const isChainInProgressRef = useRef<boolean>(isChainInProgress)
@@ -800,15 +789,7 @@ export const Chat = ({
         </box>
       </box>
 
-      {/* Login Modal Overlay - show when not authenticated and done checking */}
       {validationBanner}
-
-      {requireAuth !== null && isAuthenticated === false && (
-        <LoginModal
-          onLoginSuccess={handleLoginSuccess}
-          hasInvalidCredentials={hasInvalidCredentials}
-        />
-      )}
     </box>
   )
 }

cli/src/components/login-modal.tsx

@@ -255,48 +255,24 @@ export const LoginModal = ({
     textColor: theme.foreground,
   })
 
-  // Calculate modal dimensions
-  const { modalHeight } = calculateModalDimensions(
-    terminalHeight,
-    !!hasInvalidCredentials,
-    DEFAULT_TERMINAL_HEIGHT,
-    MODAL_VERTICAL_MARGIN,
-    MAX_MODAL_BASE_HEIGHT,
-    WARNING_BANNER_HEIGHT,
-  )
-
-  // Calculate modal width and center position
-  const modalWidth = Math.floor(terminalWidth * 0.95)
-  const modalLeft = Math.floor((terminalWidth - modalWidth) / 2)
-  const modalTop = Math.floor((terminalHeight - modalHeight) / 2)
-
   // Format URL for display (wrap if needed)
   return (
     <box
-      position="absolute"
-      left={modalLeft}
-      top={modalTop}
-      border
-      borderStyle="double"
-      borderColor={theme.primary}
       style={{
-        width: modalWidth,
-        height: modalHeight,
-        maxHeight: modalHeight,
+        width: '100%',
+        height: '100%',
         backgroundColor: theme.surface,
         padding: 0,
         flexDirection: 'column',
       }}
     >
-      {/* Sticky banner at top - outside scrollbox */}
+      {/* Sticky banner at top */}
       {hasInvalidCredentials && (
         <box
           style={{
             width: '100%',
             padding: 1,
             backgroundColor: theme.error,
-            borderStyle: 'single',
-            borderColor: theme.error,
             flexShrink: 0,
           }}
         >
@@ -314,6 +290,7 @@ export const LoginModal = ({
         style={{
           flexDirection: 'column',
           alignItems: 'center',
+          justifyContent: 'center',
           width: '100%',
           height: '100%',
           padding: containerPadding,