@alumbwe/anvil 1.0.19 → 1.0.20

package/src/chat.tsx

@@ -0,0 +1,1698 @@
+import { AnalyticsEvent } from '@anvil/common/constants/analytics-events'
+import type { FeedbackCategory } from '@anvil/common/constants/feedback'
+import { isDirectDeepSeekMode } from '@anvil/common/constants/deepseek-direct'
+import { setFreeModeCapacityDeferralListener } from '@anvil/sdk'
+import { safeOpen } from './utils/open-url'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useShallow } from 'zustand/react/shallow'
+
+import { getAdsEnabled } from './commands/ads'
+import { routeUserPrompt, addBashMessageToHistory } from './commands/router'
+import { SingleAdBanner } from './components/ad-banner'
+import { ChatInputBar } from './components/chat-input-bar'
+import { ChatHeader } from './components/chat-header'
+import { AnvilActiveSessionSummary } from './components/anvil-active-session-summary'
+import { LoadPreviousButton } from './components/load-previous-button'
+import { QueuePanel } from './components/queue-panel'
+import { ReviewScreen } from './components/review-screen'
+import { MessageWithAgents } from './components/message-with-agents'
+import { areCreditsRestored } from './components/out-of-credits-banner'
+import { PendingBashMessage } from './components/pending-bash-message'
+import { SessionEndedBanner } from './components/session-ended-banner'
+import { StatusBar } from './components/status-bar'
+import {
+  SuggestedPrompts,
+  DEFAULT_SUGGESTED_PROMPTS,
+  type SuggestedPromptSelection,
+} from './components/suggested-prompts'
+import { TopBanner } from './components/top-banner'
+import { useChatRuntime } from './contexts/chat-runtime-context'
+import { getSlashCommandsWithSkills } from './data/slash-commands'
+import { useAskUserBridge } from './hooks/use-ask-user-bridge'
+import { useChatInput } from './hooks/use-chat-input'
+import {
+  useChatKeyboard,
+  type ChatKeyboardHandlers,
+} from './hooks/use-chat-keyboard'
+import { useChatMessages } from './hooks/use-chat-messages'
+import { useChatState } from './hooks/use-chat-state'
+import { useChatStreaming } from './hooks/use-chat-streaming'
+import { useChatUI } from './hooks/use-chat-ui'
+import { useClipboard } from './hooks/use-clipboard'
+import { useEvent } from './hooks/use-event'
+import { useGravityAd } from './hooks/use-gravity-ad'
+import { useInputHistory } from './hooks/use-input-history'
+import { usePublishMutation } from './hooks/use-publish-mutation'
+import { useSuggestionEngine } from './hooks/use-suggestion-engine'
+import { useUsageMonitor } from './hooks/use-usage-monitor'
+import { WEBSITE_URL } from './login/constants'
+import { getProjectRoot } from './project-files'
+import { useChatHistoryStore } from './state/chat-history-store'
+import { useChatStore } from './state/chat-store'
+import { useQueuePanelStore } from './state/queue-panel-store'
+import { useReviewStore } from './state/review-store'
+import { useFeedbackStore } from './state/feedback-store'
+import { useMessageBlockStore } from './state/message-block-store'
+import { usePublishStore } from './state/publish-store'
+import { reportActivity } from './utils/activity-tracker'
+import { stopActiveRun } from './utils/active-run'
+import { trackEvent } from './utils/analytics'
+import { showClipboardMessage } from './utils/clipboard'
+import { readClipboardImage } from './utils/clipboard-image'
+import { returnToAnvilLanding } from './hooks/use-anvil-session'
+import { END_SESSION_MESSAGE, IS_ANVIL } from './utils/constants'
+import { getSystemMessage } from './utils/message-history'
+import { getInputModeConfig } from './utils/input-modes'
+import {
+  hasSubmittedFirstPrompt,
+  markFirstPromptSubmitted,
+} from './utils/settings'
+
+import {
+  type ChatKeyboardState,
+  createDefaultChatKeyboardState,
+} from './utils/keyboard-actions'
+import { loadLocalAgents } from './utils/local-agent-registry'
+import { logger } from './utils/logger'
+import {
+  addClipboardPlaceholder,
+  addPendingFileFromPath,
+  addPendingImageFromFile,
+  validateAndAddImage,
+} from './utils/pending-attachments'
+import { getLoadedSkills } from './utils/skill-registry'
+import {
+  getStatusIndicatorState,
+  type AuthStatus,
+} from './utils/status-indicator-state'
+import { createPasteHandler } from './utils/strings'
+import { setTerminalTitle } from './utils/terminal-title'
+import { computeInputLayoutMetrics } from './utils/text-layout'
+
+import type { CommandResult } from './commands/command-registry'
+import type { MultilineInputHandle } from './components/multiline-input'
+import type { MatchedSlashCommand } from './hooks/use-suggestion-engine'
+import type { AnvilSessionResponse } from './types/anvil-session'
+import type { User } from './utils/auth'
+import type { AgentMode } from './utils/constants'
+import type { FileTreeNode } from '@anvil/common/util/file'
+import type { BoxRenderable, ScrollBoxRenderable } from '@opentui/core'
+import type { UseMutationResult } from '@tanstack/react-query'
+import type { Dispatch, SetStateAction } from 'react'
+
+export const Chat = ({
+  consumeInitialPrompt,
+  fileTree,
+  inputRef,
+  setIsAuthenticated,
+  setUser,
+  logoutMutation,
+  authStatus,
+  initialMode,
+  gitRoot,
+  onSwitchToGitRoot,
+  anvilSession,
+}: {
+  consumeInitialPrompt: () => string | null
+  fileTree: FileTreeNode[]
+  inputRef: React.MutableRefObject<MultilineInputHandle | null>
+  setIsAuthenticated: Dispatch<SetStateAction<boolean | null>>
+  setUser: Dispatch<SetStateAction<User | null>>
+  logoutMutation: UseMutationResult<boolean, Error, void, unknown>
+  authStatus: AuthStatus
+  initialMode?: AgentMode
+  gitRoot?: string | null
+  onSwitchToGitRoot?: () => void
+  anvilSession: AnvilSessionResponse | null
+}) => {
+  const [forceFileOnlyMentions, setForceFileOnlyMentions] = useState(false)
+  const headerRef = useRef<BoxRenderable | null>(null)
+
+  // First-time onboarding: show clickable starter prompts until the user
+  // submits their first prompt ever (persisted in settings). Anvil only.
+  const [showSuggestedPrompts, setShowSuggestedPrompts] = useState(
+    () => IS_ANVIL && !hasSubmittedFirstPrompt(),
+  )
+
+  // Subscribe to ask_user bridge to trigger form display
+  useAskUserBridge()
+
+  // Monitor usage data and auto-show banner when thresholds are crossed
+  useUsageMonitor()
+
+  // Get chat state from extracted hook
+  const {
+    inputValue,
+    cursorPosition,
+    lastEditDueToNav,
+    setInputValue,
+    inputFocused,
+    setInputFocused,
+    slashSelectedIndex,
+    setSlashSelectedIndex,
+    agentSelectedIndex,
+    setAgentSelectedIndex,
+    focusedAgentId,
+    setFocusedAgentId,
+    messages,
+    setMessages,
+    agentMode,
+    setAgentMode,
+    toggleAgentMode,
+    isRetrying,
+    isCapacityWait,
+    pendingBashMessages,
+  } = useChatState()
+
+  const { statusMessage } = useClipboard()
+  const {
+    isChainInProgressRef,
+    sendMessage,
+    clearMessages,
+    subscriptionData,
+    registerScrollToLatest,
+    queuedMessages,
+    editQueuedMessage,
+    removeQueuedMessage,
+    moveQueuedMessage,
+  } = useChatRuntime()
+  const hasSubscription = subscriptionData?.hasSubscription ?? false
+
+  const {
+    ads,
+    responseAds,
+    requestResponseAds,
+    recordClick,
+    recordImpression,
+  } = useGravityAd({
+    enabled: IS_ANVIL || !hasSubscription,
+    provider: 'gravity',
+    inline: true,
+    surface: 'cli_chat',
+    // Lazily fill a four-ad pool, then repeat it for later transcript slots.
+    inlinePlacementId: 'CLI-Chat-Inline',
+    // Keep the rotating above-input slot separate for reporting continuity.
+    slotPlacementId: 'Single-Ad-Unit-1',
+  })
+  const showInlineAds = IS_ANVIL || getAdsEnabled()
+
+  // Stable identities so the message-block callbacks (set once) always call
+  // the latest recorder from the hook.
+  const handleAdClick = useEvent(recordClick)
+  const handleAdImpression = useEvent(recordImpression)
+  const handleResponseAdsNeeded = useEvent(requestResponseAds)
+
+  // Set initial mode from CLI flag on mount
+  useEffect(() => {
+    if (initialMode) {
+      setAgentMode(initialMode)
+    }
+  }, [initialMode, setAgentMode])
+
+  // Use extracted chat messages hook for message tree and pagination
+  const {
+    messageTree,
+    visibleTopLevelMessages,
+    hiddenMessageCount,
+    handleCollapseToggle,
+    isUserCollapsing,
+    handleLoadPreviousMessages,
+    handleToggleAll,
+  } = useChatMessages({ messages, setMessages })
+
+  // Use extracted UI hook for scroll, terminal dimensions, and theme
+  const {
+    scrollRef,
+    scrollToLatest,
+    scrollUp,
+    scrollDown,
+    appliedScrollboxProps,
+    isAtBottom,
+    hasOverflow,
+    terminalWidth,
+    terminalHeight,
+    separatorWidth,
+    messageAvailableWidth,
+    isCompactHeight,
+    isNarrowWidth,
+    theme,
+    markdownPalette,
+  } = useChatUI({ messages, isUserCollapsing })
+
+  useEffect(
+    () => registerScrollToLatest(scrollToLatest),
+    [registerScrollToLatest, scrollToLatest],
+  )
+
+  // Surface server capacity deferrals (free-mode tier shedding under peak
+  // demand): the SDK's retry loop absorbs the 429s silently, so without this
+  // the user just sees a longer unexplained "thinking". The stream-chunk
+  // handlers clear the flag (via setIsRetrying(false)) as soon as real
+  // output resumes.
+  useEffect(() => {
+    setFreeModeCapacityDeferralListener(() => {
+      useChatStore.getState().noteCapacityDeferral()
+    })
+    return () => setFreeModeCapacityDeferralListener(null)
+  }, [])
+
+  const localAgents = useMemo(() => loadLocalAgents(agentMode), [agentMode])
+  const inputMode = useChatStore((state) => state.inputMode)
+  const setInputMode = useChatStore((state) => state.setInputMode)
+  const askUserState = useChatStore((state) => state.askUserState)
+
+  // Get loaded skills for slash commands
+  const loadedSkills = useMemo(() => getLoadedSkills(), [])
+
+  // Filter slash commands based on current ads state - only show the option that changes state
+  // Hide both ads commands entirely for subscribers
+  // Also merge in skill commands
+  const filteredSlashCommands = useMemo(() => {
+    const adsEnabled = getAdsEnabled()
+    const allCommands = getSlashCommandsWithSkills(loadedSkills)
+    return allCommands.filter((cmd) => {
+      if (cmd.id === 'ads:enable') return !hasSubscription && !adsEnabled
+      if (cmd.id === 'ads:disable') return !hasSubscription && adsEnabled
+      return true
+    })
+  }, [inputValue, loadedSkills, hasSubscription]) // Re-evaluate when input changes (user may have just toggled)
+
+  const {
+    slashContext,
+    mentionContext,
+    slashMatches,
+    agentMatches,
+    fileMatches,
+    slashSuggestionItems,
+    agentSuggestionItems,
+    fileSuggestionItems,
+  } = useSuggestionEngine({
+    disableAgentSuggestions: forceFileOnlyMentions || inputMode !== 'default',
+    inputValue: inputMode === 'bash' ? '' : inputValue,
+    cursorPosition,
+    slashCommands: filteredSlashCommands,
+    localAgents,
+    fileTree,
+    currentAgentMode: agentMode,
+  })
+
+  useEffect(() => {
+    if (!mentionContext.active) {
+      setForceFileOnlyMentions(false)
+    }
+  }, [mentionContext.active])
+
+  // Track when slash menu is activated
+  const prevSlashActiveRef = useRef(false)
+  useEffect(() => {
+    if (slashContext.active && !prevSlashActiveRef.current) {
+      trackEvent(AnalyticsEvent.SLASH_MENU_ACTIVATED, {
+        queryLength: slashContext.query.length,
+        matchCount: slashMatches.length,
+        inputLength: inputValue.length,
+      })
+    }
+    prevSlashActiveRef.current = slashContext.active
+  }, [
+    slashContext.active,
+    slashContext.query,
+    slashMatches.length,
+    inputValue.length,
+  ])
+
+  // Reset suggestion menu indexes when context changes
+  useEffect(() => {
+    if (!slashContext.active) {
+      setSlashSelectedIndex(0)
+      return
+    }
+    setSlashSelectedIndex(0)
+  }, [slashContext.active, slashContext.query, setSlashSelectedIndex])
+
+  useEffect(() => {
+    if (slashMatches.length > 0 && slashSelectedIndex >= slashMatches.length) {
+      setSlashSelectedIndex(slashMatches.length - 1)
+    }
+    if (slashMatches.length === 0 && slashSelectedIndex !== 0) {
+      setSlashSelectedIndex(0)
+    }
+  }, [slashMatches.length, slashSelectedIndex, setSlashSelectedIndex])
+
+  useEffect(() => {
+    if (!mentionContext.active) {
+      setAgentSelectedIndex(0)
+      return
+    }
+    setAgentSelectedIndex(0)
+  }, [mentionContext.active, mentionContext.query, setAgentSelectedIndex])
+
+  useEffect(() => {
+    const totalMatches = agentMatches.length + fileMatches.length
+    if (totalMatches > 0 && agentSelectedIndex >= totalMatches) {
+      setAgentSelectedIndex(totalMatches - 1)
+    }
+    if (totalMatches === 0 && agentSelectedIndex !== 0) {
+      setAgentSelectedIndex(0)
+    }
+  }, [
+    agentMatches.length,
+    fileMatches.length,
+    agentSelectedIndex,
+    setAgentSelectedIndex,
+  ])
+
+  const openFileMenuWithTab = useCallback(() => {
+    const safeCursor = Math.max(0, Math.min(cursorPosition, inputValue.length))
+
+    let wordStart = safeCursor
+    while (wordStart > 0 && !/\s/.test(inputValue[wordStart - 1])) {
+      wordStart--
+    }
+
+    const before = inputValue.slice(0, wordStart)
+    const wordAtCursor = inputValue.slice(wordStart, safeCursor)
+    const after = inputValue.slice(safeCursor)
+    const mentionWord = wordAtCursor.startsWith('@')
+      ? wordAtCursor
+      : `@${wordAtCursor}`
+
+    const text = `${before}${mentionWord}${after}`
+    const nextCursor = before.length + mentionWord.length
+
+    setInputValue({
+      text,
+      cursorPosition: nextCursor,
+      lastEditDueToNav: false,
+    })
+    setForceFileOnlyMentions(true)
+  }, [cursorPosition, inputValue, setInputValue])
+
+  const { saveToHistory, navigateUp, navigateDown, resetHistoryNavigation } =
+    useInputHistory(inputValue, setInputValue, { inputMode, setInputMode })
+
+  // Use extracted streaming hook for connection, timer, queue, and exit handling
+  const {
+    isConnected,
+    showReconnectionMessage,
+    timerStartTime,
+    streamStatus,
+    isWaitingForResponse,
+    isStreaming,
+    queuePaused,
+    streamMessageIdRef,
+    addToQueue,
+    setCanProcessQueue,
+    clearQueue,
+    queuedCount,
+    shouldShowQueuePreview,
+    inputBoxTitle,
+    inputPlaceholder,
+    handleCtrlC,
+    ensureQueueActiveBeforeSubmit,
+    nextCtrlCWillExit,
+  } = useChatStreaming({
+    inputValue,
+    setInputValue,
+    terminalWidth,
+    separatorWidth,
+  })
+
+  // When streaming completes, flush any pending bash commands into history (ghost mode only)
+  // Non-ghost mode commands are already in history and will be cleared when user sends next message
+  useEffect(() => {
+    if (
+      !isStreaming &&
+      !streamMessageIdRef.current &&
+      !isChainInProgressRef.current &&
+      pendingBashMessages.length > 0
+    ) {
+      // Only flush ghost mode commands (those not already added to history) to UI
+      const ghostModeMessages = pendingBashMessages.filter(
+        (msg) => !msg.isRunning && !msg.addedToHistory,
+      )
+
+      // Add ghost mode messages to UI history
+      for (const msg of ghostModeMessages) {
+        addBashMessageToHistory({
+          command: msg.command,
+          stdout: msg.stdout,
+          stderr: msg.stderr ?? null,
+          exitCode: msg.exitCode,
+          cwd: msg.cwd || process.cwd(),
+          setMessages,
+        })
+      }
+
+      // Mark ghost mode messages as added to history (so they don't show as ghost UI)
+      // but keep them in pendingBashMessages so they get sent to LLM with next user message
+      if (ghostModeMessages.length > 0) {
+        const ghostIds = new Set(ghostModeMessages.map((m) => m.id))
+        useChatStore.setState((state) => ({
+          pendingBashMessages: state.pendingBashMessages.map((m) =>
+            ghostIds.has(m.id) ? { ...m, addedToHistory: true } : m,
+          ),
+        }))
+      }
+    }
+  }, [isStreaming, pendingBashMessages, setMessages])
+
+  const onSubmitPrompt = useEvent(
+    async (
+      content: string,
+      mode: AgentMode,
+      options?: { preserveInputValue?: boolean },
+    ) => {
+      ensureQueueActiveBeforeSubmit()
+
+      const preserveInput = options?.preserveInputValue === true
+      const previousInputValue = preserveInput
+        ? (() => {
+            const {
+              inputValue: text,
+              cursorPosition,
+              lastEditDueToNav,
+            } = useChatStore.getState()
+            return { text, cursorPosition, lastEditDueToNav }
+          })()
+        : null
+
+      // Preserve attachments if needed (inline logic to avoid abstraction overhead)
+      const preservedAttachments = preserveInput
+        ? (() => {
+            const items = useChatStore.getState().pendingAttachments
+            if (items.length > 0) {
+              useChatStore.getState().clearPendingAttachments()
+              return [...items]
+            }
+            return null
+          })()
+        : null
+
+      try {
+        const result = await routeUserPrompt({
+          agentMode: mode,
+          inputRef,
+          inputValue: content,
+          isChainInProgressRef,
+          isStreaming,
+          logoutMutation,
+          streamMessageIdRef,
+          addToQueue,
+          clearMessages,
+          saveToHistory,
+          scrollToLatest,
+          sendMessage,
+          setCanProcessQueue,
+          setInputFocused,
+          setInputValue,
+          setIsAuthenticated,
+          setMessages,
+          setUser,
+        })
+
+        return result
+      } finally {
+        if (previousInputValue) {
+          setInputValue({
+            text: previousInputValue.text,
+            cursorPosition: previousInputValue.cursorPosition,
+            lastEditDueToNav: previousInputValue.lastEditDueToNav,
+          })
+        }
+
+        // Restore attachments if they were preserved and none have been added since
+        if (
+          preservedAttachments &&
+          useChatStore.getState().pendingAttachments.length === 0
+        ) {
+          useChatStore.setState((state) => {
+            state.pendingAttachments = preservedAttachments
+          })
+        }
+      }
+    },
+  )
+
+  // Retire onboarding suggested prompts once the user submits anything
+  // (typed or clicked), persisting so they don't return on future launches.
+  useEffect(() => {
+    if (showSuggestedPrompts && messages.length > 0) {
+      markFirstPromptSubmitted()
+      setShowSuggestedPrompts(false)
+    }
+  }, [showSuggestedPrompts, messages.length])
+
+  // Submit a suggested onboarding prompt as if the user had typed and sent it
+  const handleSelectSuggestedPrompt = useEvent(
+    (prompt: string, selection: SuggestedPromptSelection) => {
+      trackEvent(AnalyticsEvent.SUGGESTED_PROMPT_CLICKED, {
+        label: selection.label,
+        index: selection.index,
+        promptLength: prompt.length,
+        agentMode,
+      })
+      onSubmitPrompt(prompt, agentMode).catch((error) => {
+        logger.error({ error }, '[suggested-prompt] Failed to submit prompt')
+        showClipboardMessage('Failed to send prompt', { durationMs: 3000 })
+      })
+    },
+  )
+
+  // Handle followup suggestion clicks
+  useEffect(() => {
+    const handleFollowupClick = (event: Event) => {
+      const customEvent = event as CustomEvent<{
+        prompt: string
+        index: number
+        toolCallId: string
+      }>
+      const { prompt, index, toolCallId } = customEvent.detail
+
+      logger.info(
+        { promptLength: prompt.length, index, toolCallId, agentMode },
+        '[followup-click] Followup clicked',
+      )
+
+      // Track analytics event
+      trackEvent(AnalyticsEvent.FOLLOWUP_CLICKED, {
+        promptLength: prompt.length,
+        index,
+        agentMode,
+      })
+
+      // Mark this followup as clicked (persisted per toolCallId)
+      useChatStore.getState().markFollowupClicked(toolCallId, index)
+
+      // Send the followup prompt directly, preserving the user's current input
+      onSubmitPrompt(prompt, agentMode, {
+        preserveInputValue: true,
+      })
+        .then((result) => {
+          logger.info(
+            { hasResult: !!result },
+            '[followup-click] onSubmitPrompt completed',
+          )
+        })
+        .catch((error) => {
+          logger.error(
+            { error },
+            '[followup-click] onSubmitPrompt failed with error',
+          )
+          showClipboardMessage('Failed to send followup', { durationMs: 3000 })
+        })
+    }
+
+    globalThis.addEventListener('anvil:send-followup', handleFollowupClick)
+    return () => {
+      globalThis.removeEventListener(
+        'anvil:send-followup',
+        handleFollowupClick,
+      )
+    }
+  }, [onSubmitPrompt, agentMode])
+
+  // handleSlashItemClick is defined later after feedback/publish stores are available
+
+  const handleMentionItemClick = useCallback(
+    (index: number) => {
+      if (mentionContext.startIndex < 0) return
+
+      let replacement: string
+      if (index < agentMatches.length) {
+        const selected = agentMatches[index]
+        if (!selected) return
+        replacement = `@${selected.id} `
+      } else {
+        const fileIndex = index - agentMatches.length
+        const selectedFile = fileMatches[fileIndex]
+        if (!selectedFile) return
+        replacement = `@${selectedFile.filePath} `
+      }
+      const before = inputValue.slice(0, mentionContext.startIndex)
+      const after = inputValue.slice(
+        mentionContext.startIndex + 1 + mentionContext.query.length,
+      )
+      setInputValue({
+        text: before + replacement + after,
+        cursorPosition: before.length + replacement.length,
+        lastEditDueToNav: false,
+      })
+      setAgentSelectedIndex(0)
+    },
+    [
+      mentionContext,
+      agentMatches,
+      fileMatches,
+      inputValue,
+      setInputValue,
+      setAgentSelectedIndex,
+    ],
+  )
+
+  const { inputWidth, handleBuildFast, handleBuildMax, handleBuildLite } =
+    useChatInput({
+      setInputValue,
+      agentMode,
+      setAgentMode,
+      separatorWidth,
+      consumeInitialPrompt,
+      onSubmitPrompt,
+      isCompactHeight,
+      isNarrowWidth,
+    })
+
+  const {
+    feedbackMode,
+    feedbackText,
+    openFeedbackForMessage,
+    closeFeedback,
+    saveCurrentInput,
+    restoreSavedInput,
+    setFeedbackText,
+  } = useFeedbackStore(
+    useShallow((state) => ({
+      feedbackMode: state.feedbackMode,
+      feedbackText: state.feedbackText,
+      openFeedbackForMessage: state.openFeedbackForMessage,
+      closeFeedback: state.closeFeedback,
+      saveCurrentInput: state.saveCurrentInput,
+      restoreSavedInput: state.restoreSavedInput,
+      setFeedbackText: state.setFeedbackText,
+    })),
+  )
+
+  const { publishMode, openPublishMode, closePublish, preSelectAgents } =
+    usePublishStore(
+      useShallow((state) => ({
+        publishMode: state.publishMode,
+        openPublishMode: state.openPublishMode,
+        closePublish: state.closePublish,
+        preSelectAgents: state.preSelectAgents,
+      })),
+    )
+
+  const { reviewMode, closeReviewScreen } = useReviewStore(
+    useShallow((state) => ({
+      reviewMode: state.reviewMode,
+      closeReviewScreen: state.closeReviewScreen,
+    })),
+  )
+
+  const { queuePanelOpen, openQueuePanel, closeQueuePanel } =
+    useQueuePanelStore(
+      useShallow((state) => ({
+        queuePanelOpen: state.queuePanelOpen,
+        openQueuePanel: state.openQueuePanel,
+        closeQueuePanel: state.closeQueuePanel,
+      })),
+    )
+
+  // Review and ask_user take the composer's place too. Leaving the panel
+  // flagged open behind them would keep chat's keyboard disabled with nothing
+  // rendered to handle keys, so hand the surface back for real.
+  useEffect(() => {
+    if (queuePanelOpen && (reviewMode || askUserState !== null)) {
+      closeQueuePanel()
+    }
+  }, [queuePanelOpen, reviewMode, askUserState, closeQueuePanel])
+
+  // The panel store outlives this component and a Anvil session can end on
+  // its own, unmounting chat mid-edit. Without this, the next session would
+  // open onto a panel for a queue that no longer exists.
+  useEffect(() => () => useQueuePanelStore.getState().closeQueuePanel(), [])
+
+  const publishMutation = usePublishMutation()
+
+  const handleCommandResult = useCallback(
+    (result?: CommandResult) => {
+      if (!result) return
+
+      if (result.openFeedbackMode) {
+        // Save the feedback text that was set by the command handler before opening feedback mode
+        const { feedbackText, feedbackCursor } = useFeedbackStore.getState()
+        saveCurrentInput('', 0)
+        openFeedbackForMessage(null)
+        // Restore the prefilled text after openFeedbackForMessage resets it
+        if (feedbackText) {
+          useFeedbackStore.getState().setFeedbackText(feedbackText)
+          useFeedbackStore.getState().setFeedbackCursor(feedbackCursor)
+        }
+      }
+
+      if (result.openPublishMode) {
+        if (result.preSelectAgents && result.preSelectAgents.length > 0) {
+          // preSelectAgents already sets publishMode: true, so don't call openPublishMode
+          // which would reset the selectedAgentIds
+          preSelectAgents(result.preSelectAgents)
+        } else {
+          openPublishMode()
+        }
+      }
+
+      if (result.openChatHistory) {
+        useChatHistoryStore.getState().openChatHistory()
+      }
+
+      if (result.openReviewScreen) {
+        useReviewStore.getState().openReviewScreen()
+      }
+
+      if (result.openQueuePanel) {
+        // The panel closes itself once the queue drains, so opening an empty
+        // one would just flash. Say so instead.
+        if (queuedCount > 0) useQueuePanelStore.getState().openQueuePanel()
+        else setMessages((prev) => [...prev, getSystemMessage('Nothing queued.')])
+      }
+    },
+    [
+      saveCurrentInput,
+      openFeedbackForMessage,
+      openPublishMode,
+      preSelectAgents,
+      queuedCount,
+      setMessages,
+    ],
+  )
+
+  // Helper to apply insertText for slash commands - returns true if handled
+  const applySlashInsertText = useCallback(
+    (selected: MatchedSlashCommand): boolean => {
+      if (selected.insertText != null && slashContext.startIndex >= 0) {
+        const before = inputValue.slice(0, slashContext.startIndex)
+        const after = inputValue.slice(
+          slashContext.startIndex + 1 + slashContext.query.length,
+        )
+        setInputValue({
+          text: before + selected.insertText + after,
+          cursorPosition: before.length + selected.insertText.length,
+          lastEditDueToNav: false,
+        })
+        setSlashSelectedIndex(0)
+        return true
+      }
+      return false
+    },
+    [slashContext, inputValue, setInputValue, setSlashSelectedIndex],
+  )
+
+  // Click handler for slash menu items - executes command or inserts text
+  const handleSlashItemClick = useCallback(
+    async (index: number) => {
+      const selected = slashMatches[index]
+      if (!selected) return
+
+      // If the command has insertText, insert it instead of executing
+      if (applySlashInsertText(selected)) return
+
+      // Execute the selected slash command immediately
+      const commandString = `/${selected.id}`
+      setSlashSelectedIndex(0)
+
+      const result = await onSubmitPrompt(commandString, agentMode)
+      handleCommandResult(result)
+    },
+    [
+      slashMatches,
+      applySlashInsertText,
+      setSlashSelectedIndex,
+      onSubmitPrompt,
+      agentMode,
+      handleCommandResult,
+    ],
+  )
+
+  const inputValueRef = useRef(inputValue)
+  const cursorPositionRef = useRef(cursorPosition)
+  useEffect(() => {
+    inputValueRef.current = inputValue
+  }, [inputValue])
+
+  // Report activity on input changes for ad rotation (debounced via separate effect)
+  const lastReportedActivityRef = useRef<number>(0)
+  useEffect(() => {
+    const now = Date.now()
+    // Throttle to max once per second to avoid excessive calls
+    if (now - lastReportedActivityRef.current > 1000) {
+      lastReportedActivityRef.current = now
+      reportActivity()
+    }
+  }, [inputValue])
+  useEffect(() => {
+    cursorPositionRef.current = cursorPosition
+  }, [cursorPosition])
+
+  const handleOpenFeedbackForMessage = useCallback(
+    (
+      id: string | null,
+      options?: {
+        category?: FeedbackCategory
+        footerMessage?: string
+        errors?: Array<{ id: string; message: string }>
+      },
+    ) => {
+      saveCurrentInput(inputValueRef.current, cursorPositionRef.current)
+      openFeedbackForMessage(id, options)
+    },
+    [saveCurrentInput, openFeedbackForMessage],
+  )
+
+  const handleMessageFeedback = useCallback(
+    (
+      id: string,
+      options?: {
+        category?: FeedbackCategory
+        footerMessage?: string
+        errors?: Array<{ id: string; message: string }>
+      },
+    ) => {
+      handleOpenFeedbackForMessage(id, options)
+    },
+    [handleOpenFeedbackForMessage],
+  )
+
+  const handleExitFeedback = useCallback(() => {
+    const { value, cursor } = restoreSavedInput()
+    setInputValue({
+      text: value,
+      cursorPosition: cursor,
+      lastEditDueToNav: false,
+    })
+    setInputFocused(true)
+    resetHistoryNavigation()
+  }, [
+    restoreSavedInput,
+    setInputValue,
+    setInputFocused,
+    resetHistoryNavigation,
+  ])
+
+  const handleCloseFeedback = useCallback(() => {
+    closeFeedback()
+    handleExitFeedback()
+  }, [closeFeedback, handleExitFeedback])
+
+  const handleExitPublish = useCallback(() => {
+    closePublish()
+    setInputFocused(true)
+  }, [closePublish, setInputFocused])
+
+  const handleReviewOptionSelect = useCallback(
+    (reviewText: string) => {
+      closeReviewScreen()
+      setInputFocused(true)
+      // Submit the review request
+      onSubmitPrompt(reviewText, agentMode)
+        .then((result) => handleCommandResult(result))
+        .catch((error) => {
+          logger.error({ error }, '[review] Failed to submit review prompt')
+          showClipboardMessage('Failed to send review request', {
+            durationMs: 3000,
+          })
+        })
+    },
+    [
+      closeReviewScreen,
+      setInputFocused,
+      onSubmitPrompt,
+      agentMode,
+      handleCommandResult,
+    ],
+  )
+
+  const handleCloseReviewScreen = useCallback(() => {
+    closeReviewScreen()
+    setInputFocused(true)
+  }, [closeReviewScreen, setInputFocused])
+
+  // The panel took the composer's place, so give the keyboard back to it the
+  // same way the review screen does.
+  const handleCloseQueuePanel = useCallback(() => {
+    closeQueuePanel()
+    setInputFocused(true)
+    inputRef.current?.focus()
+  }, [closeQueuePanel, setInputFocused, inputRef])
+
+  const handleReviewCustom = useCallback(() => {
+    closeReviewScreen()
+    setInputMode('review')
+    setInputFocused(true)
+  }, [closeReviewScreen, setInputMode, setInputFocused])
+
+  const handlePublish = useCallback(
+    async (agentIds: string[]) => {
+      await publishMutation.mutateAsync(agentIds)
+    },
+    [publishMutation],
+  )
+
+  // Ensure bracketed paste events target the active chat input
+  useEffect(() => {
+    if (feedbackMode) {
+      inputRef.current?.focus()
+      return
+    }
+    if (!askUserState) {
+      inputRef.current?.focus()
+    }
+  }, [feedbackMode, askUserState, inputRef])
+
+  const handleSubmit = useCallback(async () => {
+    // Report activity for ad rotation
+    reportActivity()
+    // Update terminal title with truncated user input
+    if (inputValue.trim()) {
+      setTerminalTitle(inputValue)
+    }
+    const result = await onSubmitPrompt(inputValue, agentMode)
+    handleCommandResult(result)
+  }, [onSubmitPrompt, inputValue, agentMode, handleCommandResult])
+
+  const totalMentionMatches = agentMatches.length + fileMatches.length
+  const historyNavUpEnabled =
+    lastEditDueToNav ||
+    (cursorPosition === 0 &&
+      ((slashContext.active && slashSelectedIndex === 0) ||
+        (mentionContext.active && agentSelectedIndex === 0) ||
+        (!slashContext.active && !mentionContext.active)))
+  const historyNavDownEnabled =
+    lastEditDueToNav ||
+    (cursorPosition === inputValue.length &&
+      ((slashContext.active &&
+        slashSelectedIndex === slashMatches.length - 1) ||
+        (mentionContext.active &&
+          agentSelectedIndex === totalMentionMatches - 1) ||
+        (!slashContext.active && !mentionContext.active)))
+
+  // Build keyboard state from store values
+  const chatKeyboardState: ChatKeyboardState = useMemo(
+    () => ({
+      ...createDefaultChatKeyboardState(),
+      inputMode,
+      inputValue: feedbackMode ? feedbackText : inputValue,
+      cursorPosition,
+      isStreaming,
+      isWaitingForResponse,
+      feedbackMode,
+      focusedAgentId,
+      slashMenuActive: slashContext.active,
+      mentionMenuActive: mentionContext.active,
+      slashSelectedIndex,
+      agentSelectedIndex,
+      slashMatchesLength: slashMatches.length,
+      totalMentionMatches: agentMatches.length + fileMatches.length,
+      disableSlashSuggestions:
+        getInputModeConfig(inputMode).disableSlashSuggestions,
+      historyNavUpEnabled,
+      historyNavDownEnabled,
+      nextCtrlCWillExit,
+      queuePaused,
+      queuedCount,
+    }),
+    [
+      inputMode,
+      inputValue,
+      feedbackText,
+      cursorPosition,
+      isStreaming,
+      isWaitingForResponse,
+      feedbackMode,
+      focusedAgentId,
+      slashContext.active,
+      mentionContext.active,
+      slashSelectedIndex,
+      agentSelectedIndex,
+      slashMatches.length,
+      agentMatches.length,
+      fileMatches.length,
+      historyNavUpEnabled,
+      historyNavDownEnabled,
+      nextCtrlCWillExit,
+      queuePaused,
+      queuedCount,
+    ],
+  )
+
+  // Keyboard handlers
+  const chatKeyboardHandlers: ChatKeyboardHandlers = useMemo(
+    () => ({
+      onExitInputMode: () => setInputMode('default'),
+      onExitFeedbackMode: handleCloseFeedback,
+      onClearFeedbackInput: () => {
+        setFeedbackText('')
+        useFeedbackStore.getState().setFeedbackCursor(0)
+      },
+      onClearInput: () =>
+        setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false }),
+      onBackspaceExitMode: () => setInputMode('default'),
+      onInterruptStream: () => {
+        stopActiveRun('user-interrupt')
+      },
+      onSlashMenuDown: () => setSlashSelectedIndex((prev) => prev + 1),
+      onSlashMenuUp: () => setSlashSelectedIndex((prev) => prev - 1),
+      onSlashMenuSelect: async () => {
+        const selected = slashMatches[slashSelectedIndex] || slashMatches[0]
+        if (!selected) return
+
+        // If the command has insertText, insert it instead of executing
+        if (applySlashInsertText(selected)) return
+
+        // Execute the selected slash command immediately
+        const commandString = `/${selected.id}`
+        setSlashSelectedIndex(0)
+
+        const result = await onSubmitPrompt(commandString, agentMode)
+
+        handleCommandResult(result)
+      },
+      onSlashMenuComplete: () => {
+        // Complete the word without executing - same as clicking on the item
+        const selected = slashMatches[slashSelectedIndex] || slashMatches[0]
+        if (!selected || slashContext.startIndex < 0) return
+
+        // If the command has insertText, insert it instead of the command
+        if (applySlashInsertText(selected)) return
+
+        const before = inputValue.slice(0, slashContext.startIndex)
+        const after = inputValue.slice(
+          slashContext.startIndex + 1 + slashContext.query.length,
+        )
+        const replacement = `/${selected.id} `
+        setInputValue({
+          text: before + replacement + after,
+          cursorPosition: before.length + replacement.length,
+          lastEditDueToNav: false,
+        })
+        setSlashSelectedIndex(0)
+      },
+      onMentionMenuDown: () => setAgentSelectedIndex((prev) => prev + 1),
+      onMentionMenuUp: () => setAgentSelectedIndex((prev) => prev - 1),
+      onMentionMenuTab: () => {
+        const totalMatches = agentMatches.length + fileMatches.length
+        setAgentSelectedIndex((prev) => (prev + 1) % totalMatches)
+      },
+      onMentionMenuShiftTab: () => {
+        const totalMatches = agentMatches.length + fileMatches.length
+        setAgentSelectedIndex(
+          (prev) => (totalMatches + prev - 1) % totalMatches,
+        )
+      },
+      onMentionMenuSelect: () => {
+        if (mentionContext.startIndex < 0) return
+
+        const trySelectAtIndex = (index: number): boolean => {
+          let replacement: string
+          if (index < agentMatches.length) {
+            const selected = agentMatches[index]
+            if (!selected) return false
+            replacement = `@${selected.id} `
+          } else {
+            const fileIndex = index - agentMatches.length
+            const selectedFile = fileMatches[fileIndex]
+            if (!selectedFile) return false
+            replacement = `@${selectedFile.filePath} `
+          }
+          const before = inputValue.slice(0, mentionContext.startIndex)
+          const after = inputValue.slice(
+            mentionContext.startIndex + 1 + mentionContext.query.length,
+          )
+          setInputValue({
+            text: before + replacement + after,
+            cursorPosition: before.length + replacement.length,
+            lastEditDueToNav: false,
+          })
+          setAgentSelectedIndex(0)
+          return true
+        }
+
+        // Try current selection, fall back to first item
+        trySelectAtIndex(agentSelectedIndex) || trySelectAtIndex(0)
+      },
+      onMentionMenuComplete: () => {
+        // Complete the word without executing - same as select for mentions
+        if (mentionContext.startIndex < 0) return
+
+        let replacement: string
+        const index = agentSelectedIndex
+        if (index < agentMatches.length) {
+          const selected =
+            agentMatches.length > 0
+              ? agentMatches[index] || agentMatches[0]
+              : undefined
+          if (!selected) return
+          replacement = `@${selected.id} `
+        } else {
+          const fileIndex = index - agentMatches.length
+          const selectedFile =
+            fileMatches.length > 0
+              ? fileMatches[fileIndex] || fileMatches[0]
+              : undefined
+          if (!selectedFile) return
+          replacement = `@${selectedFile.filePath} `
+        }
+        const before = inputValue.slice(0, mentionContext.startIndex)
+        const after = inputValue.slice(
+          mentionContext.startIndex + 1 + mentionContext.query.length,
+        )
+        setInputValue({
+          text: before + replacement + after,
+          cursorPosition: before.length + replacement.length,
+          lastEditDueToNav: false,
+        })
+        setAgentSelectedIndex(0)
+      },
+      onOpenFileMenuWithTab: () => {
+        const safeCursor = Math.max(
+          0,
+          Math.min(cursorPosition, inputValue.length),
+        )
+        let wordStart = safeCursor
+        while (wordStart > 0 && !/\s/.test(inputValue[wordStart - 1]!)) {
+          wordStart--
+        }
+        if (wordStart < safeCursor) {
+          openFileMenuWithTab()
+          return true
+        }
+        return false
+      },
+      onHistoryUp: navigateUp,
+      onHistoryDown: navigateDown,
+      onToggleAgentMode: toggleAgentMode,
+      onUnfocusAgent: () => {
+        setFocusedAgentId(null)
+        setInputFocused(true)
+        inputRef.current?.focus()
+      },
+      onClearQueue: clearQueue,
+      onOpenQueuePanel: openQueuePanel,
+      onExitAppWarning: () => handleCtrlC(),
+      onExitApp: () => handleCtrlC(),
+      onBashHistoryUp: navigateUp,
+      onBashHistoryDown: navigateDown,
+      onPasteImage: () => {
+        const placeholderPath = addClipboardPlaceholder()
+
+        // Process the image in the background
+        setTimeout(() => {
+          const result = readClipboardImage()
+          if (!result.success || !result.imagePath) {
+            useChatStore.getState().removePendingImage(placeholderPath)
+            showClipboardMessage(result.error || 'Failed to paste image', {
+              durationMs: 3000,
+            })
+            return
+          }
+
+          const cwd = getProjectRoot() ?? process.cwd()
+          addPendingImageFromFile(result.imagePath, cwd, placeholderPath).catch(
+            (error) => {
+              logger.error({ error }, 'Failed to add pending image from file')
+              showClipboardMessage('Failed to add image', { durationMs: 3000 })
+            },
+          )
+        }, 0)
+      },
+      onPasteImagePath: (imagePath: string) => {
+        const cwd = getProjectRoot() ?? process.cwd()
+        validateAndAddImage(imagePath, cwd).catch((error) => {
+          logger.error({ error, imagePath }, 'Failed to validate and add image')
+          showClipboardMessage('Failed to add image', { durationMs: 3000 })
+        })
+      },
+      onPasteFilePath: (filePath: string, isDirectory: boolean) => {
+        addPendingFileFromPath(filePath, isDirectory)
+      },
+      onPasteText: (text: string) => {
+        setInputValue((prev) => {
+          const before = prev.text.slice(0, prev.cursorPosition)
+          const after = prev.text.slice(prev.cursorPosition)
+          return {
+            text: before + text + after,
+            cursorPosition: before.length + text.length,
+            lastEditDueToNav: false,
+          }
+        })
+      },
+      onScrollUp: scrollUp,
+      onScrollDown: scrollDown,
+      onToggleAll: handleToggleAll,
+      onOpenBuyCredits: () => {
+        // If credits have been restored, just return to default mode
+        if (areCreditsRestored()) {
+          setInputMode('default')
+          return
+        }
+        // Direct-to-DeepSeek mode has no Anvil credits to buy; the provider's
+        // own balance page is the correct destination, so fall through to the
+        // default input rather than opening the Anvil billing page.
+        if (isDirectDeepSeekMode()) {
+          setInputMode('default')
+          return
+        }
+        // Otherwise open the buy credits page
+        safeOpen(WEBSITE_URL + '/usage')
+      },
+    }),
+    [
+      setInputMode,
+      handleCloseFeedback,
+      setFeedbackText,
+      setInputValue,
+      setSlashSelectedIndex,
+      slashMatches,
+      slashSelectedIndex,
+      slashContext,
+      inputValue,
+      applySlashInsertText,
+      onSubmitPrompt,
+      agentMode,
+      handleCommandResult,
+      setAgentSelectedIndex,
+      agentMatches,
+      fileMatches,
+      agentSelectedIndex,
+      mentionContext,
+      cursorPosition,
+      openFileMenuWithTab,
+      navigateUp,
+      navigateDown,
+      toggleAgentMode,
+      setFocusedAgentId,
+      setInputFocused,
+      inputRef,
+      handleCtrlC,
+      clearQueue,
+      openQueuePanel,
+      scrollUp,
+      scrollDown,
+      handleToggleAll,
+    ],
+  )
+
+  // Use the chat keyboard hook
+  useChatKeyboard({
+    state: chatKeyboardState,
+    handlers: chatKeyboardHandlers,
+    disabled: askUserState !== null || reviewMode || queuePanelOpen,
+  })
+
+  // Sync message block context to zustand store for child components
+  const setMessageBlockContext = useMessageBlockStore(
+    (state) => state.setContext,
+  )
+  const setMessageBlockCallbacks = useMessageBlockStore(
+    (state) => state.setCallbacks,
+  )
+
+  // Update context when values change - useLayoutEffect ensures synchronous updates
+  // to prevent message loss during rapid streaming (race condition fix)
+  useLayoutEffect(() => {
+    setMessageBlockContext({
+      theme,
+      markdownPalette,
+      messageTree,
+      isWaitingForResponse,
+      timerStartTime,
+      availableWidth: messageAvailableWidth,
+      responseAds: showInlineAds ? responseAds : {},
+    })
+  }, [
+    theme,
+    markdownPalette,
+    messageTree,
+    isWaitingForResponse,
+    timerStartTime,
+    messageAvailableWidth,
+    responseAds,
+    showInlineAds,
+    setMessageBlockContext,
+  ])
+
+  // Update callbacks once (they're stable)
+  useEffect(() => {
+    setMessageBlockCallbacks({
+      onToggleCollapsed: handleCollapseToggle,
+      onBuildFast: handleBuildFast,
+      onBuildMax: handleBuildMax,
+      onBuildLite: handleBuildLite,
+      onFeedback: handleMessageFeedback,
+      onCloseFeedback: handleCloseFeedback,
+      onAdClick: handleAdClick,
+      onAdImpression: handleAdImpression,
+      onResponseAdsNeeded: handleResponseAdsNeeded,
+    })
+  }, [
+    handleCollapseToggle,
+    handleBuildFast,
+    handleBuildMax,
+    handleBuildLite,
+    handleMessageFeedback,
+    handleCloseFeedback,
+    handleAdClick,
+    handleAdImpression,
+    handleResponseAdsNeeded,
+    setMessageBlockCallbacks,
+  ])
+
+  const modeConfig = getInputModeConfig(inputMode)
+  const hasSlashSuggestions =
+    slashContext.active &&
+    slashSuggestionItems.length > 0 &&
+    !modeConfig.disableSlashSuggestions
+  const hasMentionSuggestions =
+    !slashContext.active &&
+    mentionContext.active &&
+    (agentSuggestionItems.length > 0 || fileSuggestionItems.length > 0)
+  const hasSuggestionMenu = hasSlashSuggestions || hasMentionSuggestions
+
+  // Show first-time onboarding starter prompts only on a pristine, idle,
+  // empty-input default-mode chat — and never while a menu/overlay is up.
+  const showOnboardingPrompts =
+    showSuggestedPrompts &&
+    messages.length === 0 &&
+    inputValue.length === 0 &&
+    inputMode === 'default' &&
+    !hasSuggestionMenu &&
+    !isStreaming &&
+    !isWaitingForResponse &&
+    !feedbackMode &&
+    !publishMode &&
+    !reviewMode &&
+    askUserState === null
+
+  // Fire a one-time impression so we can measure onboarding-prompt usage
+  // (click-through = SUGGESTED_PROMPT_CLICKED / SUGGESTED_PROMPT_SHOWN).
+  const suggestedPromptsShownRef = useRef(false)
+  useEffect(() => {
+    if (showOnboardingPrompts && !suggestedPromptsShownRef.current) {
+      suggestedPromptsShownRef.current = true
+      trackEvent(AnalyticsEvent.SUGGESTED_PROMPT_SHOWN, {
+        count: isCompactHeight
+          ? Math.min(2, DEFAULT_SUGGESTED_PROMPTS.length)
+          : DEFAULT_SUGGESTED_PROMPTS.length,
+        isCompactHeight,
+      })
+    }
+  }, [showOnboardingPrompts, isCompactHeight])
+
+  const inputLayoutMetrics = useMemo(() => {
+    // In bash mode, layout is based on the actual input (no ! prefix needed)
+    const text = inputValue ?? ''
+    const layoutContent = text.length > 0 ? text : ' '
+    const safeCursor = Math.max(
+      0,
+      Math.min(cursorPosition, layoutContent.length),
+    )
+    const cursorProbe =
+      safeCursor >= layoutContent.length
+        ? layoutContent
+        : layoutContent.slice(0, safeCursor)
+    const cols = Math.max(1, inputWidth)
+    return computeInputLayoutMetrics({
+      layoutContent,
+      cursorProbe,
+      cols,
+      maxHeight: Math.floor(terminalHeight / 2),
+    })
+  }, [inputValue, cursorPosition, inputWidth, terminalHeight])
+  const isMultilineInput = inputLayoutMetrics.heightLines > 1
+  const shouldCenterInputVertically = !hasSuggestionMenu && !isMultilineInput
+  const statusIndicatorState = getStatusIndicatorState({
+    statusMessage,
+    streamStatus,
+    nextCtrlCWillExit,
+    isConnected,
+    authStatus,
+    showReconnectionMessage,
+    isRetrying,
+    isCapacityWait,
+    isAskUserActive: askUserState !== null,
+  })
+  const hasStatusIndicatorContent = statusIndicatorState.kind !== 'idle'
+
+  // Auto-show subscription limit banner when rate limit becomes active
+  const subscriptionLimitShownRef = useRef(false)
+  const subscriptionRateLimit = subscriptionData?.hasSubscription
+    ? subscriptionData.rateLimit
+    : undefined
+  const fallbackToALaCarte = subscriptionData?.fallbackToALaCarte ?? false
+  useEffect(() => {
+    const isLimited = subscriptionRateLimit?.limited === true
+    if (isLimited && !subscriptionLimitShownRef.current) {
+      subscriptionLimitShownRef.current = true
+      // Skip showing the banner if user prefers to always fall back to a-la-carte
+      if (!fallbackToALaCarte) {
+        useChatStore.getState().setInputMode('subscriptionLimit')
+      }
+    } else if (!isLimited) {
+      subscriptionLimitShownRef.current = false
+      if (useChatStore.getState().inputMode === 'subscriptionLimit') {
+        useChatStore.getState().setInputMode('default')
+      }
+    }
+  }, [subscriptionRateLimit?.limited, fallbackToALaCarte])
+
+  const hasActiveAnvilSession =
+    IS_ANVIL && anvilSession?.status === 'active'
+  const isAnvilSessionOver =
+    IS_ANVIL && anvilSession?.status === 'ended'
+  const shouldShowStatusLine =
+    !feedbackMode &&
+    (hasStatusIndicatorContent ||
+      shouldShowQueuePreview ||
+      !isAtBottom ||
+      hasActiveAnvilSession)
+
+  // Track mouse movement for ad activity (throttled)
+  const lastMouseActivityRef = useRef<number>(0)
+  const handleMouseActivity = useCallback(() => {
+    const now = Date.now()
+    // Throttle to max once per second
+    if (now - lastMouseActivityRef.current > 1000) {
+      lastMouseActivityRef.current = now
+      reportActivity()
+    }
+  }, [])
+
+  return (
+    <box
+      onMouseMove={handleMouseActivity}
+      style={{
+        flexDirection: 'column',
+        gap: 0,
+        flexGrow: 1,
+      }}
+    >
+      <scrollbox
+        ref={scrollRef as React.Ref<ScrollBoxRenderable>}
+        stickyScroll
+        stickyStart="bottom"
+        scrollX={false}
+        scrollbarOptions={{ visible: false }}
+        verticalScrollbarOptions={{
+          visible: !isStreaming && !isWaitingForResponse && hasOverflow,
+          trackOptions: { width: 1 },
+        }}
+        {...appliedScrollboxProps}
+        style={{
+          flexGrow: 1,
+          rootOptions: {
+            flexGrow: 1,
+            padding: 0,
+            gap: 0,
+            flexDirection: 'row',
+            shouldFill: true,
+            backgroundColor: 'transparent',
+          },
+          wrapperOptions: {
+            flexGrow: 1,
+            border: false,
+            shouldFill: true,
+            backgroundColor: 'transparent',
+            flexDirection: 'column',
+          },
+          contentOptions: {
+            flexDirection: 'column',
+            gap: 0,
+            shouldFill: true,
+            justifyContent: 'flex-end',
+            backgroundColor: 'transparent',
+            paddingLeft: 1,
+            paddingRight: 2,
+          },
+        }}
+      >
+        <TopBanner gitRoot={gitRoot} onSwitchToGitRoot={onSwitchToGitRoot} />
+
+        <box
+          ref={headerRef as React.Ref<BoxRenderable>}
+          style={{ flexDirection: 'column' }}
+        >
+          <ChatHeader projectRoot={getProjectRoot()} animationEnabled={true} />
+        </box>
+        {IS_ANVIL && (
+          <AnvilActiveSessionSummary session={anvilSession} />
+        )}
+        {hiddenMessageCount > 0 && (
+          <LoadPreviousButton
+            hiddenCount={hiddenMessageCount}
+            onLoadMore={handleLoadPreviousMessages}
+          />
+        )}
+        {visibleTopLevelMessages.map((message, idx) => (
+          <MessageWithAgents
+            key={message.id}
+            message={message}
+            depth={0}
+            isLastMessage={idx === visibleTopLevelMessages.length - 1}
+            availableWidth={messageAvailableWidth}
+          />
+        ))}
+        {/* Pending bash messages as ghost messages (only show those not already in history) */}
+        {pendingBashMessages
+          .filter((msg) => !msg.addedToHistory)
+          .map((msg) => (
+            <PendingBashMessage key={`pending-bash-${msg.id}`} message={msg} />
+          ))}
+      </scrollbox>
+
+      <box
+        style={{
+          flexShrink: 0,
+          backgroundColor: 'transparent',
+        }}
+      >
+        {showOnboardingPrompts && !reviewMode && !isAnvilSessionOver && (
+          <SuggestedPrompts
+            onSelect={handleSelectSuggestedPrompt}
+            maxItems={isCompactHeight ? 2 : undefined}
+          />
+        )}
+
+        {shouldShowStatusLine && (
+          <StatusBar
+            timerStartTime={timerStartTime}
+            isAtBottom={isAtBottom}
+            scrollToLatest={scrollToLatest}
+            statusIndicatorState={statusIndicatorState}
+            onStop={chatKeyboardHandlers.onInterruptStream}
+            onEndSession={() => {
+              setMessages((prev) => [
+                ...prev,
+                getSystemMessage(END_SESSION_MESSAGE),
+              ])
+              returnToAnvilLanding({ resetChat: true }).catch(() => {})
+            }}
+            anvilSession={anvilSession}
+          />
+        )}
+
+        {ads?.[0] && showInlineAds && (
+          <SingleAdBanner
+            ad={ads[0]}
+            onClick={recordClick}
+            onImpression={recordImpression}
+          />
+        )}
+
+        {reviewMode ? (
+          // Review and ask_user take precedence over the session-ended banner:
+          // during the grace window the agent may still be asking to run tools
+          // or asking the user a question, and those approvals/answers must be
+          // reachable for the run to finish — otherwise the agent hangs
+          // waiting for input that can never be given.
+          <ReviewScreen
+            onSelectOption={handleReviewOptionSelect}
+            onCustom={handleReviewCustom}
+            onCancel={handleCloseReviewScreen}
+          />
+        ) : queuePanelOpen && !askUserState ? (
+          <QueuePanel
+            queuedMessages={queuedMessages}
+            onEdit={editQueuedMessage}
+            onDelete={removeQueuedMessage}
+            onMove={moveQueuedMessage}
+            onClose={handleCloseQueuePanel}
+            width={separatorWidth}
+            maxVisibleRows={isCompactHeight ? 4 : 8}
+          />
+        ) : isAnvilSessionOver && !askUserState ? (
+          <SessionEndedBanner
+            isStreaming={isStreaming || isWaitingForResponse}
+          />
+        ) : (
+          <>
+            <ChatInputBar
+              inputValue={inputValue}
+              cursorPosition={cursorPosition}
+              setInputValue={setInputValue}
+              inputFocused={inputFocused}
+              inputRef={inputRef}
+              inputPlaceholder={inputPlaceholder}
+              lastEditDueToNav={lastEditDueToNav}
+              agentMode={agentMode}
+              toggleAgentMode={toggleAgentMode}
+              setAgentMode={setAgentMode}
+              hasSlashSuggestions={hasSlashSuggestions}
+              hasMentionSuggestions={hasMentionSuggestions}
+              hasSuggestionMenu={hasSuggestionMenu}
+              slashSuggestionItems={slashSuggestionItems}
+              agentSuggestionItems={agentSuggestionItems}
+              fileSuggestionItems={fileSuggestionItems}
+              slashSelectedIndex={slashSelectedIndex}
+              agentSelectedIndex={agentSelectedIndex}
+              onSlashItemClick={handleSlashItemClick}
+              onMentionItemClick={handleMentionItemClick}
+              theme={theme}
+              terminalHeight={terminalHeight}
+              separatorWidth={separatorWidth}
+              shouldCenterInputVertically={shouldCenterInputVertically}
+              inputBoxTitle={inputBoxTitle}
+              onQueuePreviewClick={openQueuePanel}
+              isCompactHeight={isCompactHeight}
+              isNarrowWidth={isNarrowWidth}
+              feedbackMode={feedbackMode}
+              handleExitFeedback={handleExitFeedback}
+              publishMode={publishMode}
+              handleExitPublish={handleExitPublish}
+              handlePublish={handlePublish}
+              handleSubmit={handleSubmit}
+              onPaste={createPasteHandler({
+                text: inputValue,
+                cursorPosition,
+                onChange: setInputValue,
+                onPasteImage: chatKeyboardHandlers.onPasteImage,
+                onPasteImagePath: chatKeyboardHandlers.onPasteImagePath,
+                onPasteFilePath: chatKeyboardHandlers.onPasteFilePath,
+                onPasteLongText: (pastedText) => {
+                  const id = crypto.randomUUID()
+                  const preview = pastedText.slice(0, 100).replace(/\n/g, ' ')
+                  useChatStore.getState().addPendingTextAttachment({
+                    id,
+                    content: pastedText,
+                    preview,
+                    charCount: pastedText.length,
+                  })
+                  // Show temporary status message
+                  showClipboardMessage(
+                    `📋 Pasted text (${pastedText.length.toLocaleString()} chars)`,
+                    { durationMs: 5000 },
+                  )
+                },
+                cwd: getProjectRoot() ?? process.cwd(),
+              })}
+              onInterruptStream={chatKeyboardHandlers.onInterruptStream}
+            />
+          </>
+        )}
+      </box>
+    </box>
+  )
+}