add /init command

Author: charleslien

cli/src/chat.tsx

@@ -2,14 +2,7 @@ import os from 'os'
 import path from 'path'
 
 import { useRenderer, useTerminalDimensions } from '@opentui/react'
-import React, {
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import stringWidth from 'string-width'
 import { useShallow } from 'zustand/react/shallow'
 
@@ -37,6 +30,7 @@ import { useChatScrollbox } from './hooks/use-scroll-management'
 import { useSendMessage } from './hooks/use-send-message'
 import { useSuggestionEngine } from './hooks/use-suggestion-engine'
 import { useSystemThemeDetector } from './hooks/use-system-theme-detector'
+import { handleSlashCommands } from './slash-commands/handlers'
 import { useChatStore } from './state/chat-store'
 import { flushAnalytics } from './utils/analytics'
 import { getUserCredentials } from './utils/auth'
@@ -50,87 +44,18 @@ import {
 import { logger } from './utils/logger'
 import { buildMessageTree } from './utils/message-tree-utils'
 import { openFileAtPath } from './utils/open-file'
-import { handleSlashCommands } from './utils/slash-commands'
-import {
-  chatThemes,
-  createMarkdownPalette,
-  type ChatTheme,
-} from './utils/theme-system'
+import { chatThemes, createMarkdownPalette } from './utils/theme-system'
 import { formatValidationError } from './utils/validation-error-formatting'
 
 import type { SendMessageTimerEvent } from './hooks/use-send-message'
+import type { ChatMessage, ContentBlock } from './types/chat'
+import type { SendMessageFn } from './types/contracts/send-message'
 import type { User } from './utils/auth'
-import type { AgentMode } from './utils/constants'
-import type { ToolName } from '@codebuff/sdk'
 import type { ScrollBoxRenderable } from '@opentui/core'
 
-type ChatVariant = 'ai' | 'user' | 'agent' | 'error'
-
 const MAX_VIRTUALIZED_TOP_LEVEL = 60
 const VIRTUAL_OVERSCAN = 12
 
-// LOGO_BLOCK moved to component to be reactive to terminal width changes
-
-type AgentMessage = {
-  agentName: string
-  agentType: string
-  responseCount: number
-  subAgentCount?: number
-}
-
-export type ContentBlock =
-  | {
-      type: 'text'
-      content: string
-      marginTop?: number
-      marginBottom?: number
-    }
-  | {
-      type: 'html'
-      marginTop?: number
-      marginBottom?: number
-      render: (context: { textColor: string; theme: ChatTheme }) => ReactNode
-    }
-  | {
-      type: 'tool'
-      toolCallId: string
-      toolName: ToolName
-      input: any
-      output?: string
-      agentId?: string
-    }
-  | {
-      type: 'agent'
-      agentId: string
-      agentName: string
-      agentType: string
-      content: string
-      status: 'running' | 'complete'
-      blocks?: ContentBlock[]
-      initialPrompt?: string
-    }
-  | {
-      type: 'agent-list'
-      id: string
-      agents: Array<{ id: string; displayName: string }>
-      agentsDir: string
-    }
-
-export type ChatMessage = {
-  id: string
-  variant: ChatVariant
-  content: string
-  blocks?: ContentBlock[]
-  timestamp: string
-  parentId?: string
-  agent?: AgentMessage
-  isCompletion?: boolean
-  credits?: number
-  completionTime?: string
-  isComplete?: boolean
-  metadata?: Record<string, any>
-}
-
 export const App = ({
   initialPrompt,
   agentId,
@@ -788,10 +713,7 @@ export const App = ({
     setInputValue,
   )
 
-  const sendMessageRef =
-    useRef<
-      (content: string, params: { agentMode: AgentMode }) => Promise<void>
-    >()
+  const sendMessageRef = useRef<SendMessageFn>()
 
   const {
     queuedMessages,
@@ -806,7 +728,7 @@ export const App = ({
     setIsStreaming,
   } = useMessageQueue(
     (content: string) =>
-      sendMessageRef.current?.(content, { agentMode }) ?? Promise.resolve(),
+      sendMessageRef.current?.({ content, agentMode }) ?? Promise.resolve(),
     isChainInProgressRef,
     activeAgentStreamsRef,
   )
@@ -870,7 +792,7 @@ export const App = ({
       const timeout = setTimeout(() => {
         logger.info({ prompt: initialPrompt }, 'Auto-submitting initial prompt')
         if (sendMessageRef.current) {
-          sendMessageRef.current(initialPrompt, { agentMode })
+          sendMessageRef.current({ content: initialPrompt, agentMode })
         }
       }, 100)
 
@@ -888,28 +810,29 @@ export const App = ({
   )
 
   const handleSubmit = useCallback(
-    () => handleSlashCommands({
-      abortControllerRef,
-      agentMode,
-      inputRef,
-      inputValue,
-      isChainInProgressRef,
-      isStreaming,
-      logoutMutation,
-      streamMessageIdRef,
-      addToQueue,
-      handleCtrlC,
-      saveToHistory,
-      scrollToLatest,
-      sendMessage,
-      setCanProcessQueue,
-      setInputFocused,
-      setInputValue,
-      setIsAuthenticated,
-      setMessages,
-      setUser,
-      stopStreaming,
-    }),
+    () =>
+      handleSlashCommands({
+        abortControllerRef,
+        agentMode,
+        inputRef,
+        inputValue,
+        isChainInProgressRef,
+        isStreaming,
+        logoutMutation,
+        streamMessageIdRef,
+        addToQueue,
+        handleCtrlC,
+        saveToHistory,
+        scrollToLatest,
+        sendMessage,
+        setCanProcessQueue,
+        setInputFocused,
+        setInputValue,
+        setIsAuthenticated,
+        setMessages,
+        setUser,
+        stopStreaming,
+      }),
     [
       inputValue,
       isStreaming,

cli/src/components/agent-mode-toggle.tsx

@@ -1,12 +1,12 @@
-import { AgentMode } from '../utils/constants'
-import type { ChatTheme } from '../utils/theme-system'
+import type { ChatTheme } from '../types/theme-system'
+import type { AgentMode } from '../utils/constants'
 
 export const AgentModeToggle = ({
   mode,
   theme,
   onToggle,
 }: {
-  mode: AgentMode,
+  mode: AgentMode
   theme: ChatTheme
   onToggle: () => void
 }) => {

cli/src/components/branch-item.tsx

@@ -1,6 +1,8 @@
 import { TextAttributes, type BorderCharacters } from '@opentui/core'
 import React, { type ReactNode } from 'react'
 
+import type { ChatTheme } from '../types/theme-system'
+
 const borderCharsWithoutVertical: BorderCharacters = {
   topLeft: '┌',
   topRight: '┐',
@@ -15,8 +17,6 @@ const borderCharsWithoutVertical: BorderCharacters = {
   cross: ' ',
 }
 
-import type { ChatTheme } from '../utils/theme-system'
-
 interface BranchItemProps {
   name: string
   content: ReactNode
@@ -170,16 +170,17 @@ export const BranchItem = ({
           </text>
         </box>
         <box style={{ flexShrink: 1, marginBottom: 0 }}>
-          {isCollapsed && (isStreaming ? streamingPreview : finishedPreview) && (
-            <text
-              key={isStreaming ? 'streaming-preview' : 'finished-preview'}
-              wrap
-              fg={isStreaming ? theme.agentText : theme.agentResponseCount}
-              attributes={TextAttributes.ITALIC}
-            >
-              {isStreaming ? streamingPreview : finishedPreview}
-            </text>
-          )}
+          {isCollapsed &&
+            (isStreaming ? streamingPreview : finishedPreview) && (
+              <text
+                key={isStreaming ? 'streaming-preview' : 'finished-preview'}
+                wrap
+                fg={isStreaming ? theme.agentText : theme.agentResponseCount}
+                attributes={TextAttributes.ITALIC}
+              >
+                {isStreaming ? streamingPreview : finishedPreview}
+              </text>
+            )}
           {!isCollapsed && (
             <box style={{ flexDirection: 'column', gap: 1 }}>
               {content && (

cli/src/components/login-modal.tsx

@@ -31,8 +31,8 @@ import { useLoginStore } from '../state/login-store'
 import { copyTextToClipboard } from '../utils/clipboard'
 import { logger } from '../utils/logger'
 
+import type { ChatTheme } from '../types/theme-system'
 import type { User } from '../utils/auth'
-import type { ChatTheme } from '../utils/theme-system'
 
 interface LoginModalProps {
   onLoginSuccess: (user: User) => void

cli/src/components/message-block.tsx

@@ -1,8 +1,7 @@
+import { pluralize } from '@codebuff/common/util/string'
 import { TextAttributes } from '@opentui/core'
 import React, { type ReactNode } from 'react'
 
-import { pluralize } from '@codebuff/common/util/string'
-
 import { BranchItem } from './branch-item'
 import { getToolDisplayInfo } from '../utils/codebuff-client'
 import {
@@ -13,8 +12,8 @@ import {
 } from '../utils/markdown-renderer'
 
 import type { ElapsedTimeTracker } from '../hooks/use-elapsed-time'
-import type { ContentBlock } from '../chat'
-import type { ChatTheme } from '../utils/theme-system'
+import type { ContentBlock } from '../types/chat'
+import type { ChatTheme } from '../types/theme-system'
 
 const trimTrailingNewlines = (value: string): string =>
   value.replace(/[\r\n]+$/g, '')
@@ -462,11 +461,7 @@ export const MessageBlock = ({
       markdownOptions,
     )
     return (
-      <text
-        key={`message-content-${messageId}`}
-        wrap
-        style={{ fg: textColor }}
-      >
+      <text key={`message-content-${messageId}`} wrap style={{ fg: textColor }}>
         {displayContent}
       </text>
     )

cli/src/components/separator.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { ChatTheme } from '../utils/theme-system'
+import type { ChatTheme } from '../types/theme-system'
 
 interface SeparatorProps {
   theme: ChatTheme

cli/src/components/status-indicator.tsx

@@ -2,10 +2,9 @@ import React, { useEffect, useState } from 'react'
 
 import { ShimmerText } from './shimmer-text'
 import { getCodebuffClient } from '../utils/codebuff-client'
-import { logger } from '../utils/logger'
 
 import type { ElapsedTimeTracker } from '../hooks/use-elapsed-time'
-import type { ChatTheme } from '../utils/theme-system'
+import type { ChatTheme } from '../types/theme-system'
 
 const useConnectionStatus = () => {
   const [isConnected, setIsConnected] = useState(true)

cli/src/components/suggestion-menu.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { ChatTheme } from '../utils/theme-system'
+import type { ChatTheme } from '../types/theme-system'
 
 export interface SuggestionItem {
   id: string

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

@@ -11,8 +11,8 @@ import {
 import { getDescendantIds, getAncestorIds } from '../utils/message-tree-utils'
 
 import type { ElapsedTimeTracker } from './use-elapsed-time'
-import type { ChatMessage } from '../chat'
-import type { ChatTheme } from '../utils/theme-system'
+import type { ChatMessage } from '../types/chat'
+import type { ChatTheme } from '../types/theme-system'
 
 interface UseMessageRendererProps {
   messages: ChatMessage[]
@@ -275,8 +275,16 @@ export const useMessageRenderer = (
       const isUser = message.variant === 'user'
       const isError = message.variant === 'error'
       const lineColor = isError ? 'red' : isAi ? theme.aiLine : theme.userLine
-      const textColor = isError ? theme.messageAiText : isAi ? theme.messageAiText : theme.messageUserText
-      const timestampColor = isError ? 'red' : isAi ? theme.timestampAi : theme.timestampUser
+      const textColor = isError
+        ? theme.messageAiText
+        : isAi
+          ? theme.messageAiText
+          : theme.messageUserText
+      const timestampColor = isError
+        ? 'red'
+        : isAi
+          ? theme.timestampAi
+          : theme.timestampUser
       const estimatedMessageWidth = availableWidth
       const codeBlockWidth = Math.max(10, estimatedMessageWidth - 8)
       const paletteForMessage: MarkdownPalette = {