Show git root notice in top banner

brandonkachen · brandonkachen · commit 351cc201d2d1 · 2025-12-23T17:29:50.000-08:00
diff --git a/cli/src/app.tsx b/cli/src/app.tsx
@@ -1,5 +1,5 @@
 import { NetworkError, RETRYABLE_ERROR_CODES } from '@codebuff/sdk'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 
 import { Chat } from './chat'
@@ -14,9 +14,10 @@ import { useTerminalDimensions } from './hooks/use-terminal-dimensions'
 import { useTerminalFocus } from './hooks/use-terminal-focus'
 import { useTheme } from './hooks/use-theme'
 import { getProjectRoot } from './project-files'
-import { useChatStore } from './state/chat-store'
+import { useChatStore, type TopBannerType } from './state/chat-store'
 import { openFileAtPath } from './utils/open-file'
 import { formatCwd } from './utils/path-helpers'
+import { findGitRoot } from './utils/git'
 import { getLogoBlockColor, getLogoAccentColor } from './utils/theme-system'
 
 import type { MultilineInputHandle } from './components/multiline-input'
@@ -73,11 +74,21 @@ export const App = ({
   })
 
   const inputRef = useRef<MultilineInputHandle | null>(null)
-  const { setInputFocused, setIsFocusSupported, resetChatStore } = useChatStore(
+  const {
+    setInputFocused,
+    setIsFocusSupported,
+    resetChatStore,
+    activeTopBanner,
+    setActiveTopBanner,
+    closeTopBanner,
+  } = useChatStore(
     useShallow((store) => ({
       setInputFocused: store.setInputFocused,
       setIsFocusSupported: store.setIsFocusSupported,
       resetChatStore: store.reset,
+      activeTopBanner: store.activeTopBanner,
+      setActiveTopBanner: store.setActiveTopBanner,
+      closeTopBanner: store.closeTopBanner,
     })),
   )
 
@@ -110,6 +121,53 @@ export const App = ({
   })
 
   const projectRoot = getProjectRoot()
+  const gitRoot = useMemo(
+    () => findGitRoot({ cwd: projectRoot }),
+    [projectRoot],
+  )
+  const showGitRootBanner = Boolean(gitRoot && gitRoot !== projectRoot)
+  const [gitRootBannerDismissed, setGitRootBannerDismissed] = useState(false)
+  const prevTopBannerRef = useRef<TopBannerType | null>(null)
+
+  useEffect(() => {
+    setGitRootBannerDismissed(false)
+  }, [projectRoot])
+
+  useEffect(() => {
+    const prevBanner = prevTopBannerRef.current
+    if (
+      prevBanner === 'gitRoot' &&
+      activeTopBanner === null &&
+      showGitRootBanner
+    ) {
+      setGitRootBannerDismissed(true)
+    }
+    prevTopBannerRef.current = activeTopBanner
+  }, [activeTopBanner, showGitRootBanner])
+
+  useEffect(() => {
+    if (!showGitRootBanner) {
+      if (activeTopBanner === 'gitRoot') {
+        closeTopBanner()
+      }
+      return
+    }
+    if (!gitRootBannerDismissed && activeTopBanner === null) {
+      setActiveTopBanner('gitRoot')
+    }
+  }, [
+    activeTopBanner,
+    closeTopBanner,
+    gitRootBannerDismissed,
+    setActiveTopBanner,
+    showGitRootBanner,
+  ])
+
+  const handleSwitchToGitRoot = useCallback(() => {
+    if (gitRoot) {
+      onProjectChange(gitRoot)
+    }
+  }, [gitRoot, onProjectChange])
 
   const headerContent = useMemo(() => {
     const displayPath = formatCwd(projectRoot)
@@ -211,6 +269,8 @@ export const App = ({
       continueChatId={continueChatId}
       authStatus={authStatus}
       initialMode={initialMode}
+      gitRoot={gitRoot}
+      onSwitchToGitRoot={handleSwitchToGitRoot}
     />
   )
 }
diff --git a/cli/src/chat.tsx b/cli/src/chat.tsx
@@ -95,6 +95,8 @@ export const Chat = ({
   continueChatId,
   authStatus,
   initialMode,
+  gitRoot,
+  onSwitchToGitRoot,
 }: {
   headerContent: React.ReactNode
   initialPrompt: string | null
@@ -108,6 +110,8 @@ export const Chat = ({
   continueChatId?: string
   authStatus: AuthStatus
   initialMode?: AgentMode
+  gitRoot?: string | null
+  onSwitchToGitRoot?: () => void
 }) => {
   const scrollRef = useRef<ScrollBoxRenderable | null>(null)
   const [hasOverflow, setHasOverflow] = useState(false)
@@ -1368,7 +1372,7 @@ export const Chat = ({
           },
         }}
       >
-        <TopBanner />
+        <TopBanner gitRoot={gitRoot} onSwitchToGitRoot={onSwitchToGitRoot} />
 
         {headerContent}
         {hiddenMessageCount > 0 && (
diff --git a/cli/src/components/top-banner.tsx b/cli/src/components/top-banner.tsx
@@ -1,19 +1,31 @@
 import React from 'react'
 
 import { Button } from './button'
+import { TerminalLink } from './terminal-link'
 import { useTheme } from '../hooks/use-theme'
 import { useChatStore, type TopBannerType } from '../state/chat-store'
+import { formatCwd } from '../utils/path-helpers'
 import { BORDER_CHARS } from '../utils/ui-constants'
 
 import type { ThemeColorKey, InputMode } from '../utils/input-modes'
+import type { ChatTheme } from '../types/theme-system'
+
+type BannerContentParams = {
+  gitRoot?: string | null
+  onSwitchToGitRoot?: () => void
+  textColor: string
+  theme: ChatTheme
+}
 
 type BannerConfig = {
   /** Theme color key for the border */
   borderColorKey: ThemeColorKey
   /** Theme color key for text */
   textColorKey: ThemeColorKey
   /** Banner content */
-  content: React.ReactNode
+  content: React.ReactNode | ((params: BannerContentParams) => React.ReactNode)
+  /** Layout style for content */
+  layout?: 'text' | 'custom'
   /** Input mode to reset to when closing, if currently in a related mode */
   relatedInputMode?: InputMode
 }
@@ -38,13 +50,43 @@ const TOP_BANNER_REGISTRY: Record<NonNullable<TopBannerType>, BannerConfig> = {
       </>
     ),
   },
+  gitRoot: {
+    borderColorKey: 'warning',
+    textColorKey: 'foreground',
+    layout: 'custom',
+    content: ({ gitRoot, onSwitchToGitRoot, textColor }) => {
+      const displayGitRoot = gitRoot ? formatCwd(gitRoot) : 'git root'
+      return (
+        <>
+          <text style={{ wrapMode: 'word', fg: textColor }}>
+            You started Codebuff in a subdirectory of a git repo.
+          </text>
+          {gitRoot && onSwitchToGitRoot ? (
+            <TerminalLink
+              text={`Switch to git root (${displayGitRoot})`}
+              onActivate={onSwitchToGitRoot}
+              underlineOnHover={true}
+              lineWrap={true}
+              containerStyle={{ alignItems: 'flex-start' }}
+            />
+          ) : null}
+        </>
+      )
+    },
+  },
 }
 
 /**
  * Centralized component for rendering top banners.
  * Handles all banner types with consistent styling and behavior.
  */
-export const TopBanner = () => {
+export const TopBanner = ({
+  gitRoot,
+  onSwitchToGitRoot,
+}: {
+  gitRoot?: string | null
+  onSwitchToGitRoot?: () => void
+}) => {
   const theme = useTheme()
   const activeTopBanner = useChatStore((state) => state.activeTopBanner)
   const closeTopBanner = useChatStore((state) => state.closeTopBanner)
@@ -71,6 +113,44 @@ export const TopBanner = () => {
   const themeRecord = theme as unknown as Record<string, string>
   const borderColor = themeRecord[config.borderColorKey]
   const textColor = themeRecord[config.textColorKey]
+  const contentParams: BannerContentParams = {
+    gitRoot,
+    onSwitchToGitRoot,
+    textColor,
+    theme,
+  }
+  const content =
+    typeof config.content === 'function'
+      ? config.content(contentParams)
+      : config.content
+
+  if (!content) {
+    return null
+  }
+
+  const contentNode =
+    config.layout === 'custom' ? (
+      <box
+        style={{
+          flexDirection: 'column',
+          flexShrink: 1,
+          marginRight: 3,
+        }}
+      >
+        {content}
+      </box>
+    ) : (
+      <text
+        style={{
+          fg: textColor,
+          wrapMode: 'word',
+          flexShrink: 1,
+          marginRight: 3,
+        }}
+      >
+        {content}
+      </text>
+    )
 
   return (
     <box
@@ -92,16 +172,7 @@ export const TopBanner = () => {
       border={['top', 'bottom', 'left', 'right']}
       customBorderChars={BORDER_CHARS}
     >
-      <text
-        style={{
-          fg: textColor,
-          wrapMode: 'word',
-          flexShrink: 1,
-          marginRight: 3,
-        }}
-      >
-        {config.content}
-      </text>
+      {contentNode}
       <Button onClick={handleClose}>
         <text style={{ fg: borderColor }}>x</text>
       </Button>
diff --git a/cli/src/index.tsx b/cli/src/index.tsx
@@ -22,6 +22,7 @@ import { initializeApp } from './init/init-app'
 import { getProjectRoot, setProjectRoot } from './project-files'
 import { initAnalytics } from './utils/analytics'
 import { getAuthTokenDetails } from './utils/auth'
+import { resetCodebuffClient } from './utils/codebuff-client'
 import { getCliEnv } from './utils/env'
 import { initializeAgentRegistry } from './utils/local-agent-registry'
 import { clearLogFile, logger } from './utils/logger'
@@ -273,6 +274,8 @@ async function main(): Promise<void> {
         process.chdir(newProjectPath)
         // Update the project root in the module state
         setProjectRoot(newProjectPath)
+        // Reset client to ensure tools use the updated project root
+        resetCodebuffClient()
         // Save to recent projects list
         saveRecentProject(newProjectPath)
         // Update local state
diff --git a/cli/src/init/init-app.ts b/cli/src/init/init-app.ts
@@ -2,7 +2,6 @@ import { enableMapSet } from 'immer'
 
 import { initializeThemeStore } from '../hooks/use-theme'
 import { setProjectRoot } from '../project-files'
-import { findGitRoot } from '../utils/git'
 import { initTimestampFormatter } from '../utils/helpers'
 import { enableManualThemeRefresh } from '../utils/theme-system'
 
@@ -13,8 +12,7 @@ export async function initializeApp(params: {
     process.chdir(params.cwd)
   }
   const baseCwd = process.cwd()
-  const projectRoot = findGitRoot({ cwd: baseCwd }) ?? baseCwd
-  setProjectRoot(projectRoot)
+  setProjectRoot(baseCwd)
 
   enableMapSet()
   initializeThemeStore()
diff --git a/cli/src/state/chat-store.ts b/cli/src/state/chat-store.ts
@@ -12,7 +12,7 @@ import type { InputMode } from '../utils/input-modes'
 import type { RunState } from '@codebuff/sdk'
 
 /** Types of banners that can appear at the top of the chat */
-export type TopBannerType = 'homeDir' | null
+export type TopBannerType = 'homeDir' | 'gitRoot' | null
 
 export type InputValue = {
   text: string
