Add mode divider

Author: jahooma

cli/src/chat.tsx

@@ -122,6 +122,8 @@ export const App = ({
     toggleAgentMode,
     hasReceivedPlanResponse,
     setHasReceivedPlanResponse,
+    lastMessageMode,
+    setLastMessageMode,
     resetChatStore,
   } = useChatStore(
     useShallow((store) => ({
@@ -152,6 +154,8 @@ export const App = ({
       toggleAgentMode: store.toggleAgentMode,
       hasReceivedPlanResponse: store.hasReceivedPlanResponse,
       setHasReceivedPlanResponse: store.setHasReceivedPlanResponse,
+      lastMessageMode: store.lastMessageMode,
+      setLastMessageMode: store.setLastMessageMode,
       resetChatStore: store.reset,
     })),
   )
@@ -615,6 +619,8 @@ export const App = ({
     availableWidth: separatorWidth,
     onTimerEvent: handleTimerEvent,
     setHasReceivedPlanResponse,
+    lastMessageMode,
+    setLastMessageMode,
   })
 
   sendMessageRef.current = sendMessage

cli/src/components/mode-divider.tsx

@@ -0,0 +1,40 @@
+import { TextAttributes } from '@opentui/core'
+import React from 'react'
+import stringWidth from 'string-width'
+
+import { useTheme } from '../hooks/use-theme'
+
+interface ModeDividerProps {
+  mode: string
+  width: number
+}
+
+export const ModeDivider = ({ mode, width }: ModeDividerProps) => {
+  const theme = useTheme()
+
+  const label = ` ${mode} `
+  const labelWidth = stringWidth(label)
+  const lineWidth = Math.max(0, Math.floor((width - labelWidth) / 2))
+  const leftLine = '─'.repeat(lineWidth)
+  const rightLine = '─'.repeat(Math.max(0, width - lineWidth - labelWidth))
+
+  return (
+    <box
+      style={{
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        paddingTop: 1,
+        paddingBottom: 1,
+      }}
+    >
+      <text style={{ wrapMode: 'none' }}>
+        <span fg={theme.border}>{leftLine}</span>
+        <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
+          {label}
+        </span>
+        <span fg={theme.border}>{rightLine}</span>
+      </text>
+    </box>
+  )
+}

cli/src/hooks/use-message-renderer.tsx

@@ -3,6 +3,7 @@ import { useMemo, type ReactNode } from 'react'
 import React from 'react'
 
 import { MessageBlock } from '../components/message-block'
+import { ModeDivider } from '../components/mode-divider'
 import {
   renderMarkdown,
   hasMarkdown,
@@ -271,6 +272,22 @@ export const useMessageRenderer = (
       const isAi = message.variant === 'ai'
       const isUser = message.variant === 'user'
       const isError = message.variant === 'error'
+      
+      // Check if this is a mode divider message
+      if (
+        message.blocks &&
+        message.blocks.length === 1 &&
+        message.blocks[0].type === 'mode-divider'
+      ) {
+        const dividerBlock = message.blocks[0]
+        return (
+          <ModeDivider
+            key={message.id}
+            mode={dividerBlock.mode}
+            width={availableWidth}
+          />
+        )
+      }
       const lineColor = isError ? 'red' : isAi ? theme.aiLine : theme.userLine
       const textColor = isError
         ? theme.foreground

cli/src/hooks/use-send-message.ts

@@ -15,6 +15,7 @@ import type { ChatMessage, ContentBlock, ToolContentBlock } from '../types/chat'
 import type { SendMessageFn } from '../types/contracts/send-message'
 import type { ParamsOf } from '../types/function-params'
 import type { SetElement } from '../types/utils'
+import type { AgentMode } from '../utils/constants'
 import type { AgentDefinition, ToolName } from '@codebuff/sdk'
 import type { SetStateAction } from 'react'
 
@@ -172,6 +173,8 @@ interface UseSendMessageOptions {
   availableWidth?: number
   onTimerEvent?: (event: SendMessageTimerEvent) => void
   setHasReceivedPlanResponse: (value: boolean) => void
+  lastMessageMode: AgentMode | null
+  setLastMessageMode: (mode: AgentMode | null) => void
 }
 
 export const useSendMessage = ({
@@ -201,6 +204,8 @@ export const useSendMessage = ({
   availableWidth = 80,
   onTimerEvent = () => {},
   setHasReceivedPlanResponse,
+  lastMessageMode,
+  setLastMessageMode,
 }: UseSendMessageOptions): {
   sendMessage: SendMessageFn
   clearMessages: () => void
@@ -351,6 +356,10 @@ export const useSendMessage = ({
       // This is computed efficiently in the Zustand store
       const previousToggleIds = allToggleIds
 
+      // Check if mode changed and insert divider if needed
+      // Also show divider on first message (when lastMessageMode is null)
+      const shouldInsertDivider = lastMessageMode === null || lastMessageMode !== agentMode
+
       // Add user message to UI first
       const userMessage: ChatMessage = {
         id: `user-${Date.now()}`,
@@ -360,7 +369,27 @@ export const useSendMessage = ({
       }
 
       applyMessageUpdate((prev) => {
-        let newMessages = [...prev, userMessage]
+        let newMessages = [...prev]
+        
+        // Insert mode divider if mode changed
+        if (shouldInsertDivider) {
+          const dividerMessage: ChatMessage = {
+            id: `divider-${Date.now()}`,
+            variant: 'ai',
+            content: '',
+            blocks: [
+              {
+                type: 'mode-divider',
+                mode: agentMode,
+              },
+            ],
+            timestamp: formatTimestamp(),
+          }
+          newMessages.push(dividerMessage)
+        }
+        
+        newMessages.push(userMessage)
+        
         if (postUserMessage) {
           newMessages = postUserMessage(newMessages)
         }
@@ -369,6 +398,10 @@ export const useSendMessage = ({
         }
         return newMessages
       })
+      
+      // Update last message mode
+      setLastMessageMode(agentMode)
+      
       await yieldToEventLoop()
 
       // Auto-collapse previous message toggles to minimize clutter.
@@ -1488,6 +1521,8 @@ export const useSendMessage = ({
       scrollToLatest,
       availableWidth,
       setHasReceivedPlanResponse,
+      lastMessageMode,
+      setLastMessageMode,
     ],
   )
 

cli/src/state/chat-store.ts

@@ -19,6 +19,7 @@ export type ChatStoreState = {
   agentSelectedIndex: number
   agentMode: AgentMode
   hasReceivedPlanResponse: boolean
+  lastMessageMode: AgentMode | null
 }
 
 type ChatStoreActions = {
@@ -46,6 +47,7 @@ type ChatStoreActions = {
   setAgentMode: (mode: AgentMode) => void
   toggleAgentMode: () => void
   setHasReceivedPlanResponse: (value: boolean) => void
+  setLastMessageMode: (mode: AgentMode | null) => void
   reset: () => void
 }
 
@@ -67,6 +69,7 @@ const initialState: ChatStoreState = {
   agentSelectedIndex: 0,
   agentMode: 'FAST',
   hasReceivedPlanResponse: false,
+  lastMessageMode: null,
 }
 
 export const useChatStore = create<ChatStore>()(
@@ -158,6 +161,11 @@ export const useChatStore = create<ChatStore>()(
         state.hasReceivedPlanResponse = value
       }),
 
+    setLastMessageMode: (mode) =>
+      set((state) => {
+        state.lastMessageMode = mode
+      }),
+
     reset: () =>
       set((state) => {
         state.messages = initialState.messages.slice()
@@ -173,6 +181,7 @@ export const useChatStore = create<ChatStore>()(
         state.agentSelectedIndex = initialState.agentSelectedIndex
         state.agentMode = initialState.agentMode
         state.hasReceivedPlanResponse = initialState.hasReceivedPlanResponse
+        state.lastMessageMode = initialState.lastMessageMode
       }),
   })),
 )

cli/src/types/chat.ts

@@ -44,10 +44,15 @@ export type AgentListContentBlock = {
   agents: Array<{ id: string; displayName: string }>
   agentsDir: string
 }
+export type ModeDividerContentBlock = {
+  type: 'mode-divider'
+  mode: string
+}
 export type ContentBlock =
   | AgentContentBlock
   | AgentListContentBlock
   | HtmlContentBlock
+  | ModeDividerContentBlock
   | TextContentBlock
   | ToolContentBlock