fix(cli): resolve circular dependency by extracting types

brandonkachen · brandonkachen · commit 592bfbdde0f6 · 2026-01-28T16:52:34.000-08:00
- Create cli/src/types/store.ts for type definitions previously in chat-store.ts
- Update 25+ files to import types from new location instead of state/chat-store.ts
- Fixes circular dependency: chat-store → utils → chat-store
- Dependency graph now flows: types/store (leaf) → utils → state/chat-store
diff --git a/cli/src/__tests__/bash-mode.test.ts b/cli/src/__tests__/bash-mode.test.ts
@@ -1,6 +1,6 @@
 import { describe, test, expect, mock } from 'bun:test'
 
-import type { InputValue } from '../state/chat-store'
+import type { InputValue } from '../types/store'
 import type { InputMode } from '../utils/input-modes'
 
 /**
diff --git a/cli/src/app.tsx b/cli/src/app.tsx
@@ -16,7 +16,8 @@ import { useTerminalFocus } from './hooks/use-terminal-focus'
 import { useTheme } from './hooks/use-theme'
 import { getProjectRoot } from './project-files'
 import { useChatHistoryStore } from './state/chat-history-store'
-import { useChatStore, type TopBannerType } from './state/chat-store'
+import { useChatStore } from './state/chat-store'
+import type { TopBannerType } from './types/store'
 import { findGitRoot } from './utils/git'
 import { openFileAtPath } from './utils/open-file'
 import { formatCwd } from './utils/path-helpers'
diff --git a/cli/src/commands/command-registry.ts b/cli/src/commands/command-registry.ts
@@ -18,7 +18,7 @@ import { capturePendingAttachments } from '../utils/pending-attachments'
 import { getSkillByName } from '../utils/skill-registry'
 
 import type { MultilineInputHandle } from '../components/multiline-input'
-import type { InputValue, PendingAttachment } from '../state/chat-store'
+import type { InputValue, PendingAttachment } from '../types/store'
 import type { ChatMessage } from '../types/chat'
 import type { SendMessageFn } from '../types/contracts/send-message'
 import type { User } from '../utils/auth'
diff --git a/cli/src/components/ask-user/components/accordion-question.tsx b/cli/src/components/ask-user/components/accordion-question.tsx
@@ -9,7 +9,7 @@ import { OptionsList } from './options-list'
 import { QuestionHeader } from './question-header'
 import { getOptionLabel } from '../constants'
 
-import type { AskUserQuestion } from '../../../state/chat-store'
+import type { AskUserQuestion } from '../../../types/store'
 
 /** Answer state for a single question */
 export interface AccordionAnswer {
diff --git a/cli/src/components/ask-user/components/options-list.tsx b/cli/src/components/ask-user/components/options-list.tsx
@@ -12,7 +12,7 @@ import { Button } from '../../button'
 import { CUSTOM_OPTION_INDEX, SYMBOLS } from '../constants'
 
 import type { AccordionAnswer } from './accordion-question'
-import type { AskUserQuestion } from '../../../state/chat-store'
+import type { AskUserQuestion } from '../../../types/store'
 
 export interface OptionsListProps {
   question: AskUserQuestion
diff --git a/cli/src/components/ask-user/index.tsx b/cli/src/components/ask-user/index.tsx
@@ -19,7 +19,7 @@ import { useChatStore } from '../../state/chat-store'
 import { BORDER_CHARS } from '../../utils/ui-constants'
 import { Button } from '../button'
 
-import type { AskUserQuestion } from '../../state/chat-store'
+import type { AskUserQuestion } from '../../types/store'
 import type { KeyEvent } from '@opentui/core'
 
 export interface MultipleChoiceFormProps {
diff --git a/cli/src/components/chat-input-bar.tsx b/cli/src/components/chat-input-bar.tsx
@@ -15,7 +15,7 @@ import { getInputModeConfig } from '../utils/input-modes'
 import { BORDER_CHARS } from '../utils/ui-constants'
 
 import type { useTheme } from '../hooks/use-theme'
-import type { InputValue } from '../state/chat-store'
+import type { InputValue } from '../types/store'
 import type { AgentMode } from '../utils/constants'
 
 type Theme = ReturnType<typeof useTheme>
diff --git a/cli/src/components/multiline-input.tsx b/cli/src/components/multiline-input.tsx
@@ -17,7 +17,7 @@ import { clamp } from '../utils/math'
 import { supportsTruecolor } from '../utils/theme-system'
 import { calculateNewCursorPosition } from '../utils/word-wrap-utils'
 
-import type { InputValue } from '../state/chat-store'
+import type { InputValue } from '../types/store'
 import type {
   KeyEvent,
   MouseEvent,
diff --git a/cli/src/components/pending-attachments-banner.tsx b/cli/src/components/pending-attachments-banner.tsx
@@ -4,7 +4,7 @@ import { TextAttachmentCard } from './text-attachment-card'
 import { useTheme } from '../hooks/use-theme'
 import { useChatStore } from '../state/chat-store'
 
-import type { PendingImageAttachment, PendingTextAttachment } from '../state/chat-store'
+import type { PendingImageAttachment, PendingTextAttachment } from '../types/store'
 
 /**
  * Combined banner for both image and text attachments.
diff --git a/cli/src/components/pending-bash-message.tsx b/cli/src/components/pending-bash-message.tsx
@@ -4,7 +4,7 @@ import { TerminalCommandDisplay } from './terminal-command-display'
 import { useTheme } from '../hooks/use-theme'
 import { DASHED_BORDER_CHARS } from '../utils/ui-constants'
 
-import type { PendingBashMessage as PendingBashMessageType } from '../state/chat-store'
+import type { PendingBashMessage as PendingBashMessageType } from '../types/store'
 
 interface PendingBashMessageProps {
   message: PendingBashMessageType
diff --git a/cli/src/components/text-attachment-card.tsx b/cli/src/components/text-attachment-card.tsx
@@ -1,7 +1,7 @@
 import { AttachmentCard } from './attachment-card'
 import { useTheme } from '../hooks/use-theme'
 
-import type { PendingTextAttachment } from '../state/chat-store'
+import type { PendingTextAttachment } from '../types/store'
 
 const TEXT_CARD_WIDTH = 24
 const MAX_PREVIEW_LINES = 2
diff --git a/cli/src/components/tools/suggest-followups.tsx b/cli/src/components/tools/suggest-followups.tsx
@@ -8,7 +8,7 @@ import { getLatestFollowupToolCallId, useChatStore } from '../../state/chat-stor
 import { Button } from '../button'
 
 import type { ToolRenderConfig } from './types'
-import type { SuggestedFollowup } from '../../state/chat-store'
+import type { SuggestedFollowup } from '../../types/store'
 
 const EMPTY_CLICKED_SET = new Set<number>()
 const MIN_LABEL_COLUMN_WIDTH = 12
diff --git a/cli/src/components/top-banner.tsx b/cli/src/components/top-banner.tsx
@@ -3,7 +3,8 @@ 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 { useChatStore } from '../state/chat-store'
+import type { TopBannerType } from '../types/store'
 import { formatCwd } from '../utils/path-helpers'
 import { BORDER_CHARS } from '../utils/ui-constants'
 
diff --git a/cli/src/hooks/helpers/send-message.ts b/cli/src/hooks/helpers/send-message.ts
@@ -26,7 +26,7 @@ import type {
   PendingAttachment,
   PendingImageAttachment,
   PendingTextAttachment,
-} from '../../state/chat-store'
+} from '../../types/store'
 import type { ChatMessage } from '../../types/chat'
 import type { AgentMode } from '../../utils/constants'
 import type { SendMessageTimerController } from '../../utils/send-message-timer'
diff --git a/cli/src/hooks/use-ask-user-bridge.ts b/cli/src/hooks/use-ask-user-bridge.ts
@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 
 import { useChatStore } from '../state/chat-store'
 
-import type { AskUserQuestion } from '../state/chat-store'
+import type { AskUserQuestion } from '../types/store'
 
 /**
  * Patterns that indicate a "custom" or "other" catch-all option.
diff --git a/cli/src/hooks/use-chat-input.ts b/cli/src/hooks/use-chat-input.ts
@@ -3,7 +3,7 @@ import stringWidth from 'string-width'
 
 import { useChatStore } from '../state/chat-store'
 
-import type { InputValue } from '../state/chat-store'
+import type { InputValue } from '../types/store'
 import type { AgentMode } from '../utils/constants'
 
 interface UseChatInputOptions {
diff --git a/cli/src/hooks/use-chat-state.ts b/cli/src/hooks/use-chat-state.ts
@@ -8,7 +8,7 @@ import { useShallow } from 'zustand/react/shallow'
 
 import { useChatStore } from '../state/chat-store'
 
-import type { InputValue, PendingBashMessage } from '../state/chat-store'
+import type { InputValue, PendingBashMessage } from '../types/store'
 import type { ChatMessage } from '../types/chat'
 import type { SendMessageFn } from '../types/contracts/send-message'
 import type { AgentMode } from '../utils/constants'
diff --git a/cli/src/hooks/use-chat-streaming.ts b/cli/src/hooks/use-chat-streaming.ts
@@ -18,7 +18,7 @@ import { useTimeout } from './use-timeout'
 import { useChatStore } from '../state/chat-store'
 
 import type { ElapsedTimeTracker } from './use-elapsed-time'
-import type { PendingAttachment } from '../state/chat-store'
+import type { PendingAttachment } from '../types/store'
 import type { SendMessageFn } from '../types/contracts/send-message'
 import type { AgentMode } from '../utils/constants'
 import type { MutableRefObject } from 'react'
diff --git a/cli/src/hooks/use-exit-handler.ts b/cli/src/hooks/use-exit-handler.ts
@@ -4,7 +4,7 @@ import { getCurrentChatId } from '../project-files'
 import { flushAnalytics } from '../utils/analytics'
 import { withTimeout } from '../utils/terminal-color-detection'
 
-import type { InputValue } from '../state/chat-store'
+import type { InputValue } from '../types/store'
 
 // Timeout for analytics flush during exit - don't block exit for too long
 const EXIT_FLUSH_TIMEOUT_MS = 1000
diff --git a/cli/src/hooks/use-input-history.ts b/cli/src/hooks/use-input-history.ts
@@ -5,7 +5,7 @@ import {
   saveMessageHistory,
 } from '../utils/message-history'
 
-import type { InputValue } from '../state/chat-store'
+import type { InputValue } from '../types/store'
 import type { InputMode } from '../utils/input-modes'
 
 /**
diff --git a/cli/src/hooks/use-message-queue.ts b/cli/src/hooks/use-message-queue.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { logger } from '../utils/logger'
 
-import type { PendingAttachment } from '../state/chat-store'
+import type { PendingAttachment } from '../types/store'
 
 export type StreamStatus = 'idle' | 'waiting' | 'streaming'
 
diff --git a/cli/src/hooks/use-send-message.ts b/cli/src/hooks/use-send-message.ts
@@ -32,7 +32,7 @@ import { yieldToEventLoop } from '../utils/yield-to-event-loop'
 
 import type { ElapsedTimeTracker } from './use-elapsed-time'
 import type { StreamStatus } from './use-message-queue'
-import type { PendingAttachment } from '../state/chat-store'
+import type { PendingAttachment } from '../types/store'
 import type { ChatMessage } from '../types/chat'
 import type { SendMessageFn } from '../types/contracts/send-message'
 import type { AgentMode } from '../utils/constants'
diff --git a/cli/src/state/chat-store.ts b/cli/src/state/chat-store.ts
@@ -11,106 +11,42 @@ import type { AgentMode } from '../utils/constants'
 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' | 'gitRoot' | null
-
-export type InputValue = {
-  text: string
-  cursorPosition: number
-  lastEditDueToNav: boolean
-}
-
-export type AskUserQuestion = {
-  question: string
-  header?: string
-  options:
-    | string[]
-    | Array<{
-        label: string
-        description?: string
-      }>
-  multiSelect?: boolean
-  validation?: {
-    maxLength?: number
-    minLength?: number
-    pattern?: string
-    patternError?: string
-  }
-}
-
-export type AnswerState = number | number[]
-
-export type AskUserState = {
-  toolCallId: string
-  questions: AskUserQuestion[]
-  selectedAnswers: AnswerState[] // Single-select: number (-1 = not answered), Multi-select: number[]
-  otherTexts: string[] // Custom text input for each question (empty string if not used)
-} | null
-
-export type PendingImageStatus = 'processing' | 'ready' | 'error'
-
-/** Image attachment with processed data */
-export type PendingImageAttachment = {
-  kind: 'image'
-  path: string
-  filename: string
-  status: PendingImageStatus
-  size?: number
-  width?: number
-  height?: number
-  note?: string // Display note: "compressed" | error message
-  processedImage?: {
-    base64: string
-    mediaType: string
-  }
+// Import types from the types/store module to avoid circular dependencies
+import type {
+  TopBannerType,
+  InputValue,
+  AskUserQuestion,
+  AnswerState,
+  AskUserState,
+  PendingImageStatus,
+  PendingImageAttachment,
+  PendingTextAttachment,
+  PendingAttachment,
+  PendingImage,
+  PendingBashMessage,
+  SuggestedFollowup,
+  SuggestedFollowupsState,
+  ClickedFollowupsMap,
+} from '../types/store'
+
+// Re-export types from the types/store module to maintain backwards compatibility
+export type {
+  TopBannerType,
+  InputValue,
+  AskUserQuestion,
+  AnswerState,
+  AskUserState,
+  PendingImageStatus,
+  PendingImageAttachment,
+  PendingTextAttachment,
+  PendingAttachment,
+  PendingImage,
+  PendingBashMessage,
+  SuggestedFollowup,
+  SuggestedFollowupsState,
+  ClickedFollowupsMap,
 }
 
-/** Text attachment (large pasted text) */
-export type PendingTextAttachment = {
-  kind: 'text'
-  id: string
-  content: string
-  preview: string // First ~100 chars for display
-  charCount: number
-}
-
-/** Unified attachment type with discriminator */
-export type PendingAttachment = PendingImageAttachment | PendingTextAttachment
-
-/** @deprecated Use PendingImageAttachment instead */
-export type PendingImage = PendingImageAttachment
-
-export type PendingBashMessage = {
-  id: string
-  command: string
-  stdout: string
-  stderr: string
-  exitCode: number
-  /** Whether the command is still running */
-  isRunning: boolean
-  startTime?: number
-  cwd?: string
-  /** Whether the message was already added to UI chat history (non-ghost mode) */
-  addedToHistory?: boolean
-}
-
-export type SuggestedFollowup = {
-  prompt: string
-  label?: string
-}
-
-export type SuggestedFollowupsState = {
-  /** The tool call ID that created these followups */
-  toolCallId: string
-  /** The list of followup suggestions */
-  followups: SuggestedFollowup[]
-  /** Set of indices that have been clicked */
-  clickedIndices: Set<number>
-}
-
-/** Map of toolCallId -> Set of clicked indices (persists across followup sets) */
-export type ClickedFollowupsMap = Map<string, Set<number>>
-
 export type ChatStoreState = {
   /** Unique ID for this chat session, regenerated on /new */
   chatSessionId: string
@@ -420,6 +356,15 @@ export const useChatStore = create<ChatStore>()(
     },
 
     removePendingImage: (path) => {
+      // Clear any auto-remove timer to prevent memory leaks
+      // Import dynamically to avoid circular dependency
+      import('../utils/pending-attachments')
+        .then(({ clearErrorImageTimer }) => {
+          clearErrorImageTimer(path)
+        })
+        .catch(() => {
+          // Silently ignore import errors - timer cleanup is best-effort
+        })
       useChatStore.getState().removePendingAttachment(path)
     },
 
diff --git a/cli/src/types/contracts/send-message.ts b/cli/src/types/contracts/send-message.ts
@@ -1,4 +1,4 @@
-import type { PendingAttachment } from '../../state/chat-store'
+import type { PendingAttachment } from '../store'
 import type { AgentMode } from '../../utils/constants'
 import type { ChatMessage } from '../chat'
 
diff --git a/cli/src/types/store.ts b/cli/src/types/store.ts
diff --git a/cli/src/utils/bash-context-processor.ts b/cli/src/utils/bash-context-processor.ts
diff --git a/cli/src/utils/bash-messages.ts b/cli/src/utils/bash-messages.ts
diff --git a/cli/src/utils/image-processor.ts b/cli/src/utils/image-processor.ts
diff --git a/cli/src/utils/pending-attachments.ts b/cli/src/utils/pending-attachments.ts
diff --git a/cli/src/utils/strings.ts b/cli/src/utils/strings.ts
