savant-code 0.0.17 → 0.0.19

package/cli/src/chat.tsx

@@ -0,0 +1,2008 @@
+import { AnalyticsEvent } from '@savant-code/common/constants/analytics-events'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useShallow } from 'zustand/react/shallow'
+
+import { getAdsEnabled } from './commands/ads'
+import { getCheckpointDir } from './commands/rewind'
+import { routeUserPrompt, addBashMessageToHistory } from './commands/router'
+import { SingleAdBanner } from './components/ad-banner'
+import { ChatHeader } from './components/chat-header'
+import { ChatInputBar } from './components/chat-input-bar'
+import { LoadPreviousButton } from './components/load-previous-button'
+import { MessageWithAgents } from './components/message-with-agents'
+import { ModelPicker } from './components/model-picker'
+import { areCreditsRestored } from './components/out-of-credits-banner'
+import { PendingBashMessage } from './components/pending-bash-message'
+import { ProviderPicker } from './components/provider-picker'
+import { ReviewScreen } from './components/review-screen'
+import { RewindPicker } from './components/rewind-picker'
+import { RightSidebar } from './components/right-sidebar'
+import { SavantFreeActiveSessionSummary } from './components/savant-free-active-session-summary'
+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 { getSlashCommandsWithSkills } from './data/slash-commands'
+import { createLoopRunHandler } from './hooks/run-outcome'
+import { useAgentValidation } from './hooks/use-agent-validation'
+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 { useLoopScheduler } from './hooks/use-loop-scheduler'
+import { usePublishMutation } from './hooks/use-publish-mutation'
+import { returnToSavantFreeLanding } from './hooks/use-savant-free-session'
+import { useScaffoldRevertSubscriber } from './hooks/use-scaffold-revert-subscriber'
+import { useSendMessage } from './hooks/use-send-message'
+import { useSubscriptionQuery } from './hooks/use-subscription-query'
+import { useSuggestionEngine } from './hooks/use-suggestion-engine'
+import { useUsageMonitor } from './hooks/use-usage-monitor'
+import { WEBSITE_URL } from './login/constants'
+import { getProjectRoot, tryGetProjectRoot } from './project-files'
+import { useChatHistoryStore } from './state/chat-history-store'
+import { useChatStore } from './state/chat-store'
+import { useFeedbackStore } from './state/feedback-store'
+import { useGatewayCatalogStore } from './state/gateway-catalog-store'
+import { useMessageBlockStore } from './state/message-block-store'
+import { useModelPickerStore } from './state/model-picker-store'
+import { useProviderPickerStore } from './state/provider-picker-store'
+import { usePublishStore } from './state/publish-store'
+import { useReviewStore } from './state/review-store'
+import { useRewindPickerStore } from './state/rewind-picker-store'
+import { useSavantFreeModelStore } from './state/savant-free-model-store'
+import { reportActivity } from './utils/activity-tracker'
+import { trackEvent } from './utils/analytics'
+import { showClipboardMessage } from './utils/clipboard'
+import { readClipboardImage } from './utils/clipboard-image'
+import { END_SESSION_MESSAGE, IS_SAVANT_FREE } from './utils/constants'
+import { getInputModeConfig } from './utils/input-modes'
+import {
+  type ChatKeyboardState,
+  createDefaultChatKeyboardState,
+} from './utils/keyboard-actions'
+import { loadLocalAgents } from './utils/local-agent-registry'
+import { logger } from './utils/logger'
+import { getSystemMessage } from './utils/message-history'
+import { safeOpen } from './utils/open-url'
+import { resolveContextWindowForModel } from './utils/openrouter-models'
+import { formatCwd } from './utils/path-helpers'
+import {
+  addClipboardPlaceholder,
+  addPendingFileFromPath,
+  addPendingImageFromFile,
+  validateAndAddImage,
+} from './utils/pending-attachments'
+import {
+  beginProviderSetup,
+  getMissingProviderSetup,
+  getProviderSetupGuidance,
+  getProviderSetupInfo,
+} from './utils/provider-setup'
+import { executeRewind } from './utils/rewind'
+import {
+  hasSubmittedFirstPrompt,
+  loadSavantCodeModelPreference,
+  markFirstPromptSubmitted,
+  saveSavantCodeModelPreference,
+  saveSavantCodeModelProviderPreference,
+} from './utils/settings'
+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 { RewindMode } from './state/rewind-picker-store'
+import type { SavantFreeSession } from './types/savant-free-session'
+import type { User } from './utils/auth'
+import type { AgentMode } from './utils/constants'
+import type { OpenRouterModel } from './utils/openrouter-models'
+import type { ProviderSetupName } from './utils/provider-setup'
+import type { PermissionMode } from './utils/settings'
+import type { BoxRenderable, ScrollBoxRenderable } from '@opentui/core'
+import type { FeedbackCategory } from '@savant-code/common/constants/feedback'
+import type { FileTreeNode } from '@savant-code/common/util/file'
+import type { TurnSummary } from '@savant-code/sdk'
+import type { UseMutationResult } from '@tanstack/react-query'
+import type { Dispatch, SetStateAction } from 'react'
+
+// FID-007 S2: sidebar tool list — hoisted (stable identity so RightSidebar's
+// React.memo can skip) and cross-checked against
+// common/src/tools/constants.ts. The previous inline list named tools that do
+// NOT exist in the executor allowlist (read_file, search_files, bash).
+const SIDEBAR_TOOLS_AVAILABLE = [
+  'read_files',
+  'code_search',
+  'apply_patch',
+  'run_terminal_command',
+]
+
+// FID-007 D7: hoisted static style objects so the render loop stops
+// allocating fresh style identities every render/tick.
+const CHAT_ROOT_STYLE = {
+  flexDirection: 'row', // Horizontal split: chat + sidebar
+  gap: 0,
+  flexGrow: 1,
+} as const
+
+const HEADER_BOX_STYLE = { flexDirection: 'column' } as const
+
+const SCROLLBOX_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,
+  },
+} as const
+
+const BOTTOM_BOX_STYLE = {
+  flexShrink: 0,
+  backgroundColor: 'transparent',
+} as const
+
+export const Chat = ({
+  initialPrompt,
+  agentId,
+  fileTree,
+  inputRef,
+  setIsAuthenticated,
+  setUser,
+  logoutMutation,
+  continueChat,
+  continueChatId,
+  authStatus,
+  initialMode,
+  initialPermissionMode,
+  gitRoot,
+  onSwitchToGitRoot,
+  savantFreeSession,
+}: {
+  initialPrompt: string | null
+  agentId?: string
+  fileTree: FileTreeNode[]
+  inputRef: React.MutableRefObject<MultilineInputHandle | null>
+  setIsAuthenticated: Dispatch<SetStateAction<boolean | null>>
+  setUser: Dispatch<SetStateAction<User | null>>
+  logoutMutation: UseMutationResult<boolean, Error, void, unknown>
+  continueChat: boolean
+  continueChatId?: string
+  authStatus: AuthStatus
+  initialMode?: AgentMode
+  initialPermissionMode?: PermissionMode
+  gitRoot?: string | null
+  onSwitchToGitRoot?: () => void
+  savantFreeSession: SavantFreeSession | null
+}) => {
+  const [forceFileOnlyMentions, setForceFileOnlyMentions] = useState(false)
+  const headerRef = useRef<BoxRenderable | null>(null)
+  const [isHeaderVisible, setIsHeaderVisible] = useState(true)
+
+  // First-time onboarding: show clickable starter prompts until the user
+  // submits their first prompt ever (persisted in settings). SavantFree only.
+  const [showSuggestedPrompts, setShowSuggestedPrompts] = useState(
+    () => IS_SAVANT_FREE && !hasSubmittedFirstPrompt(),
+  )
+
+  const { validate: validateAgents } = useAgentValidation()
+
+  // Subscribe to ask_user bridge to trigger form display
+  useAskUserBridge()
+
+  // Auto-revert from SCAFFOLD to EDIT when the orchestrator declares the
+  // scaffold complete via the set_scaffold_complete tool.
+  useScaffoldRevertSubscriber()
+
+  // 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,
+    pendingBashMessages,
+    refs: {
+      activeAgentStreamsRef,
+      isChainInProgressRef,
+      activeSubagentsRef,
+      abortControllerRef,
+      sendMessageRef,
+    },
+  } = useChatState()
+
+  const providerGuidanceShownRef = useRef(false)
+  useEffect(() => {
+    // FID-007 U1: provider guidance is non-free builds only — SavantFree
+    // reaches inference via its own gateway, `/provider` is not registered
+    // there, and instructing free users to run it would produce
+    // "Command not found".
+    if (IS_SAVANT_FREE) return
+    if (providerGuidanceShownRef.current || messages.length !== 0) return
+
+    const missingProvider = getMissingProviderSetup()
+    if (!missingProvider) return
+
+    providerGuidanceShownRef.current = true
+    setMessages((prev) => [
+      ...prev,
+      getSystemMessage(getProviderSetupGuidance(missingProvider)),
+    ])
+  }, [messages.length, setMessages])
+
+  // Sidebar data from chat-store
+  const contextTokensUsed = useChatStore((s) => s.contextTokensUsed)
+  const contextTokensMax = useChatStore((s) => s.contextTokensMax)
+  // FID-007 S1: reactive selector — the previous getState() read during
+  // render was non-reactive (stale until some unrelated state forced a
+  // re-render).
+  const fsmPhase = useChatStore((s) => s.fsmPhase)
+  const toolsUsed = useChatStore((s) => s.toolsUsed)
+  const toolHistory = useChatStore((s) => s.toolHistory)
+  const filesChanged = useChatStore((s) => s.filesChanged)
+  const agentStack = useChatStore((s) => s.agentStack)
+  const sessionCost = useChatStore((s) => s.sessionCost)
+  const updateContextTokensMax = useChatStore((s) => s.updateContextTokensMax)
+  const sidebarModel = useSavantFreeModelStore((s) => s.selectedModel)
+
+  // Interactive /model picker overlay state.
+  const modelPickerOpen = useModelPickerStore((s) => s.isOpen)
+  const modelPickerQuery = useModelPickerStore((s) => s.query)
+  const modelPickerModels = useModelPickerStore((s) => s.models)
+  const modelPickerSelectedIndex = useModelPickerStore((s) => s.selectedIndex)
+  const setModelPickerQuery = useModelPickerStore((s) => s.setQuery)
+  const setModelPickerSelectedIndex = useModelPickerStore(
+    (s) => s.setSelectedIndex,
+  )
+  const closeModelPicker = useModelPickerStore((s) => s.close)
+
+  // Interactive /provider picker overlay state.
+  const providerPickerOpen = useProviderPickerStore((s) => s.isOpen)
+  const providerPickerProviders = useProviderPickerStore((s) => s.providers)
+  const providerPickerSelectedIndex = useProviderPickerStore(
+    (s) => s.selectedIndex,
+  )
+  const setProviderPickerSelectedIndex = useProviderPickerStore(
+    (s) => s.setSelectedIndex,
+  )
+  const closeProviderPicker = useProviderPickerStore((s) => s.close)
+
+  // Interactive /rewind picker overlay state (FID-2026-0803-004).
+  const rewindPickerOpen = useRewindPickerStore((s) => s.isOpen)
+  const rewindPickerTurns = useRewindPickerStore((s) => s.turns)
+  const rewindPickerSelectedIndex = useRewindPickerStore((s) => s.selectedIndex)
+  const rewindPickerStage = useRewindPickerStore((s) => s.stage)
+  const rewindPickerMode = useRewindPickerStore((s) => s.mode)
+  const setRewindPickerSelectedIndex = useRewindPickerStore(
+    (s) => s.setSelectedIndex,
+  )
+  const setRewindPickerStage = useRewindPickerStore((s) => s.setStage)
+  const setRewindPickerMode = useRewindPickerStore((s) => s.setMode)
+  const closeRewindPicker = useRewindPickerStore((s) => s.close)
+
+  const { statusMessage } = useClipboard()
+
+  // Fetch subscription data early - needed for session credits tracking and ad gating
+  const { data: subscriptionData } = useSubscriptionQuery({
+    refetchInterval: 60 * 1000,
+  })
+  const hasSubscription = subscriptionData?.hasSubscription ?? false
+
+  const {
+    ads,
+    responseAds,
+    requestResponseAds,
+    recordClick,
+    recordImpression,
+  } = useGravityAd({
+    enabled: IS_SAVANT_FREE || !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_SAVANT_FREE || 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)
+
+  // While the model or provider picker overlay is open, blur the text input
+  // so keystrokes route to the picker, not the input.
+  useEffect(() => {
+    if (modelPickerOpen || providerPickerOpen) {
+      setInputFocused(false)
+    }
+  }, [modelPickerOpen, providerPickerOpen, setInputFocused])
+
+  // FID-2026-0723-062: keep the sidebar context-token cap in sync with the
+  // active model. This fires on initial render (restored preference), when the
+  // model changes, and when the gateway catalog finishes loading asynchronously.
+  const gatewayCatalogLoadedAt = useGatewayCatalogStore((s) => s.lastLoadedAt)
+  useEffect(() => {
+    if (sidebarModel) {
+      const maxTokens = resolveContextWindowForModel(sidebarModel)
+      updateContextTokensMax(maxTokens)
+    }
+  }, [sidebarModel, updateContextTokensMax, gatewayCatalogLoadedAt])
+
+  // Commit a /rewind picker selection (FID-2026-0803-004): execute the chosen
+  // restore mode against the selected turn's checkpoint and report in-chat.
+  const handleRewindPickerConfirm = useCallback(
+    (turn: TurnSummary, mode: RewindMode) => {
+      closeRewindPicker()
+      const projectRoot = tryGetProjectRoot() ?? getProjectRoot()
+      const checkpointDir = getCheckpointDir()
+      const message = executeRewind({
+        checkpointDir,
+        projectRoot,
+        turnId: turn.turnId,
+        mode,
+        setMessages,
+      })
+      setMessages((prev) => [...prev, getSystemMessage(message)])
+      setInputFocused(true)
+      inputRef.current?.focus()
+    },
+    [closeRewindPicker, setMessages, setInputFocused, inputRef],
+  )
+
+  // Commit a provider pick: enter providerSetup mode for the chosen provider.
+  const handleProviderPickerSelect = useCallback(
+    (provider: ProviderSetupName) => {
+      closeProviderPicker()
+      beginProviderSetup(provider)
+      const info = getProviderSetupInfo(provider)
+      if (info) {
+        useChatStore.getState().setInputMode('providerSetup')
+        setInputFocused(true)
+        inputRef.current?.focus()
+        setMessages((prev) => [
+          ...prev,
+          getSystemMessage(
+            `${info.label} selected. Enter your API key below. It will be masked and stored locally in credentials.json. Environment variables take precedence.`,
+          ),
+        ])
+      }
+    },
+    [closeProviderPicker, setInputFocused, inputRef, setMessages],
+  )
+
+  // Commit a model pick: persist the override, confirm in-chat, and close.
+  const handleModelPickerSelect = useCallback(
+    (model: OpenRouterModel) => {
+      saveSavantCodeModelPreference(model.id)
+      saveSavantCodeModelProviderPreference(model.provider ?? 'openrouter')
+      useSavantFreeModelStore.getState().switchModel(model.id)
+      const current = loadSavantCodeModelPreference()
+      setMessages((prev) => [
+        ...prev,
+        getSystemMessage(
+          current
+            ? `Model switched to: ${current}`
+            : `Model switched to: ${model.id}`,
+        ),
+      ])
+      closeModelPicker()
+      setInputFocused(true)
+      inputRef.current?.focus()
+    },
+    [
+      saveSavantCodeModelPreference,
+      saveSavantCodeModelProviderPreference,
+      loadSavantCodeModelPreference,
+      setMessages,
+      closeModelPicker,
+      setInputFocused,
+      inputRef,
+    ],
+  )
+
+  // Set initial mode from CLI flag on mount
+  useEffect(() => {
+    if (initialMode) {
+      setAgentMode(initialMode)
+    }
+  }, [initialMode, setAgentMode])
+
+  // Set initial permission mode from CLI flag on mount (CLI takes precedence
+  // over saved setting because it is an explicit per-launch override).
+  useEffect(() => {
+    if (initialPermissionMode) {
+      useChatStore.getState().setPermissionMode(initialPermissionMode)
+    }
+  }, [initialPermissionMode])
+
+  // 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 })
+
+  const updateHeaderVisibility = useCallback(() => {
+    const header = headerRef.current
+    const viewport = scrollRef.current?.viewport
+    if (!header || !viewport) return
+
+    const headerTop = header.screenY
+    const headerBottom = headerTop + header.height
+    const viewportTop = viewport.screenY
+    const viewportBottom = viewportTop + viewport.height
+    const visible = headerTop < viewportBottom && headerBottom > viewportTop
+    setIsHeaderVisible((current) => (current === visible ? current : visible))
+  }, [scrollRef])
+
+  useEffect(() => {
+    const scrollbox = scrollRef.current
+    if (!scrollbox) return
+
+    const timeoutId = setTimeout(updateHeaderVisibility, 0)
+    scrollbox.verticalScrollBar.on('change', updateHeaderVisibility)
+    return () => {
+      clearTimeout(timeoutId)
+      scrollbox.verticalScrollBar.off('change', updateHeaderVisibility)
+    }
+  }, [scrollRef, updateHeaderVisibility])
+
+  useEffect(() => {
+    const timeoutId = setTimeout(updateHeaderVisibility, 0)
+    return () => clearTimeout(timeoutId)
+  }, [messages, terminalHeight, terminalWidth, updateHeaderVisibility])
+
+  const localAgents = useMemo(() => loadLocalAgents(agentMode), [agentMode])
+  const inputMode = useChatStore((state) => state.inputMode)
+  const setInputMode = useChatStore((state) => state.setInputMode)
+  const askUserState = useChatStore((state) => state.askUserState)
+  const adsEnabled = useChatStore((state) => state.adsEnabled)
+
+  // 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 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
+    })
+    // FID-007 P1: deps are the reactive ads store slice (updated by the ads
+    // commands) — NOT inputValue, whose only effect was to rebuild the command
+    // list and clear the suggestion-engine cache on every keystroke.
+  }, [loadedSkills, hasSubscription, adsEnabled])
+
+  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((): boolean => {
+    const safeCursor = Math.max(0, Math.min(cursorPosition, inputValue.length))
+
+    let wordStart = safeCursor
+    while (wordStart > 0 && !/\s/.test(inputValue[wordStart - 1]!)) {
+      wordStart--
+    }
+    // FID-007 D4: report whether a word precedes the cursor so the keyboard
+    // handler can fall through when there is nothing to complete (previously
+    // this scan was duplicated inline in onOpenFileMenuWithTab).
+    if (wordStart >= safeCursor) return false
+
+    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)
+    return 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,
+    mainAgentTimer,
+    timerStartTime,
+    streamStatus,
+    isWaitingForResponse,
+    isStreaming,
+    setStreamStatus,
+    queuedMessages,
+    queuePaused,
+    streamMessageIdRef,
+    addToQueue,
+    addToQueueFront,
+    stopStreaming,
+    setCanProcessQueue,
+    pauseQueue,
+    resumeQueue,
+    clearQueue,
+    isQueuePausedRef,
+    isProcessingQueueRef,
+    queuedCount,
+    shouldShowQueuePreview,
+    queuePreviewTitle,
+    pausedQueueText,
+    inputPlaceholder,
+    handleCtrlC,
+    ensureQueueActiveBeforeSubmit,
+    nextCtrlCWillExit,
+  } = useChatStreaming({
+    agentMode,
+    inputValue,
+    setInputValue,
+    terminalWidth,
+    separatorWidth,
+    isChainInProgressRef,
+    activeAgentStreamsRef,
+    sendMessageRef,
+  })
+
+  // 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 { sendMessage, clearMessages } = useSendMessage({
+    inputRef,
+    activeSubagentsRef,
+    isChainInProgressRef,
+    setStreamStatus,
+    setCanProcessQueue,
+    abortControllerRef,
+    agentId,
+    onBeforeMessageSend: validateAgents,
+    mainAgentTimer,
+    scrollToLatest,
+    onTimerEvent: () => {},
+    isQueuePausedRef,
+    isProcessingQueueRef,
+    resumeQueue,
+    requeueMessageAtFront: addToQueueFront,
+    continueChat,
+    continueChatId,
+    subscriptionData,
+  })
+
+  sendMessageRef.current = sendMessage
+
+  // FID-2026-0726-001: mount the loop scheduler so /loop cadence actually
+  // recurs. The callback re-submits the loop prompt using the current agentMode.
+  useLoopScheduler(
+    useCallback(createLoopRunHandler(sendMessage, agentMode), [
+      sendMessage,
+      agentMode,
+    ]),
+  )
+
+  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({
+          abortControllerRef,
+          agentMode: mode,
+          inputRef,
+          inputValue: content,
+          isChainInProgressRef,
+          isStreaming,
+          logoutMutation,
+          streamMessageIdRef,
+          addToQueue,
+          clearMessages,
+          saveToHistory,
+          scrollToLatest,
+          sendMessage,
+          setCanProcessQueue,
+          setInputFocused,
+          setInputValue,
+          setIsAuthenticated,
+          setMessages,
+          setUser,
+          stopStreaming,
+        })
+
+        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 only after the user submits a prompt.
+  // Provider guidance is a system message and must not count as submission.
+  // FID-007 D6: memoize the O(n) scan — it was re-run over the whole
+  // transcript on every render.
+  const hasSubmittedPrompt = useMemo(
+    () => messages.some((message) => message.variant === 'user'),
+    [messages],
+  )
+  useEffect(() => {
+    if (showSuggestedPrompts && hasSubmittedPrompt) {
+      markFirstPromptSubmitted()
+      setShowSuggestedPrompts(false)
+    }
+  }, [showSuggestedPrompts, hasSubmittedPrompt])
+
+  // 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(
+      'savant-code:send-followup',
+      handleFollowupClick,
+    )
+    return () => {
+      globalThis.removeEventListener(
+        'savant-code:send-followup',
+        handleFollowupClick,
+      )
+    }
+  }, [onSubmitPrompt, agentMode])
+
+  // handleSlashItemClick is defined later after feedback/publish stores are available
+
+  // FID-007 D3: single mention select-and-replace helper shared by the click
+  // handler and the two keyboard menu handlers (previously 3 copies).
+  const selectMentionAt = useCallback(
+    (index: number): boolean => {
+      if (mentionContext.startIndex < 0) return false
+
+      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
+    },
+    [
+      mentionContext,
+      agentMatches,
+      fileMatches,
+      inputValue,
+      setInputValue,
+      setAgentSelectedIndex,
+    ],
+  )
+
+  const handleMentionItemClick = useCallback(
+    (index: number) => {
+      selectMentionAt(index)
+    },
+    [selectMentionAt],
+  )
+
+  const { inputWidth, handleBuildFast, handleBuildMax, handleBuildLite } =
+    useChatInput({
+      setInputValue,
+      agentMode,
+      setAgentMode,
+      separatorWidth,
+      initialPrompt,
+      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 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()
+      }
+    },
+    [
+      saveCurrentInput,
+      openFeedbackForMessage,
+      openPublishMode,
+      preSelectAgents,
+    ],
+  )
+
+  // 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
+  // FID-007 D3/E1: single slash execute helper (insertText handling, selection
+  // reset, and error surfacing) shared by the click handler and keyboard menu.
+  const executeSlashCommand = useCallback(
+    async (selected: MatchedSlashCommand | undefined): Promise<void> => {
+      if (!selected) return
+
+      // If the command has insertText, insert it instead of executing
+      if (applySlashInsertText(selected)) return
+
+      setSlashSelectedIndex(0)
+      try {
+        const result = await onSubmitPrompt(`/${selected.id}`, agentMode)
+        handleCommandResult(result)
+      } catch (error) {
+        logger.error({ error }, '[slash] Failed to execute command')
+        showClipboardMessage('Failed to execute command', { durationMs: 3000 })
+      }
+    },
+    [
+      applySlashInsertText,
+      setSlashSelectedIndex,
+      onSubmitPrompt,
+      agentMode,
+      handleCommandResult,
+    ],
+  )
+
+  const handleSlashItemClick = useCallback(
+    async (index: number) => {
+      await executeSlashCommand(slashMatches[index])
+    },
+    [slashMatches, executeSlashCommand],
+  )
+
+  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])
+
+  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)
+    }
+    // FID-007 E1: surface submit failures instead of an unhandled rejection.
+    try {
+      const result = await onSubmitPrompt(inputValue, agentMode)
+      handleCommandResult(result)
+    } catch (error) {
+      logger.error({ error }, '[submit] Failed to submit prompt')
+      showClipboardMessage('Failed to send message', { durationMs: 3000 })
+    }
+  }, [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,
+      modelPickerOpen,
+      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: () => {
+        abortControllerRef.current?.abort()
+        if (queuedMessages.length > 0) {
+          pauseQueue()
+        }
+      },
+      onSlashMenuDown: () => setSlashSelectedIndex((prev) => prev + 1),
+      onSlashMenuUp: () => setSlashSelectedIndex((prev) => prev - 1),
+      onSlashMenuSelect: async () => {
+        await executeSlashCommand(
+          slashMatches[slashSelectedIndex] || slashMatches[0],
+        )
+      },
+      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: () => {
+        // Try current selection, fall back to first item
+        selectMentionAt(agentSelectedIndex) || selectMentionAt(0)
+      },
+      onMentionMenuComplete: () => {
+        // Complete the word without executing - same as select for mentions
+        selectMentionAt(agentSelectedIndex) || selectMentionAt(0)
+      },
+      onOpenFileMenuWithTab: () => openFileMenuWithTab(),
+      onHistoryUp: navigateUp,
+      onHistoryDown: navigateDown,
+      onToggleAgentMode: toggleAgentMode,
+      onUnfocusAgent: () => {
+        setFocusedAgentId(null)
+        setInputFocused(true)
+        inputRef.current?.focus()
+      },
+      onClearQueue: clearQueue,
+      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
+        }
+        // Otherwise open the buy credits page
+        safeOpen(WEBSITE_URL + '/usage')
+      },
+    }),
+    [
+      setInputMode,
+      handleCloseFeedback,
+      setFeedbackText,
+      setInputValue,
+      abortControllerRef,
+      queuedMessages.length,
+      pauseQueue,
+      setSlashSelectedIndex,
+      slashMatches,
+      slashSelectedIndex,
+      slashContext,
+      inputValue,
+      applySlashInsertText,
+      onSubmitPrompt,
+      agentMode,
+      handleCommandResult,
+      setAgentSelectedIndex,
+      agentSelectedIndex,
+      selectMentionAt,
+      openFileMenuWithTab,
+      navigateUp,
+      navigateDown,
+      toggleAgentMode,
+      setFocusedAgentId,
+      setInputFocused,
+      inputRef,
+      handleCtrlC,
+      clearQueue,
+      scrollUp,
+      scrollDown,
+      handleToggleAll,
+    ],
+  )
+
+  // Use the chat keyboard hook
+  useChatKeyboard({
+    state: chatKeyboardState,
+    handlers: chatKeyboardHandlers,
+    // Disable the global keyboard dispatcher while the model or provider picker
+    // overlay is open so its own useKeyboard handler has exclusive control.
+    disabled:
+      askUserState !== null ||
+      reviewMode ||
+      modelPickerOpen ||
+      providerPickerOpen,
+  })
+
+  // 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,
+    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 inputBoxTitle = useMemo(() => {
+    const segments: string[] = []
+
+    if (queuePreviewTitle) {
+      segments.push(queuePreviewTitle)
+    } else if (pausedQueueText) {
+      segments.push(`⏸ ${pausedQueueText}`)
+    }
+
+    if (segments.length === 0) {
+      return undefined
+    }
+
+    return ` ${segments.join('   ')} `
+  }, [queuePreviewTitle, pausedQueueText])
+
+  const hasActiveSavantFreeSession =
+    IS_SAVANT_FREE && savantFreeSession?.status === 'active'
+  const isSavantFreeSessionOver =
+    IS_SAVANT_FREE && savantFreeSession?.status === 'ended'
+  const shouldShowStatusLine =
+    !feedbackMode &&
+    (hasStatusIndicatorContent ||
+      shouldShowQueuePreview ||
+      !isAtBottom ||
+      hasActiveSavantFreeSession)
+
+  // 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()
+    }
+  }, [])
+
+  // FID-2026-0722-045: Hide the right sidebar on narrow terminals so the
+  // chat area keeps enough width to remain usable. The sidebar is 40 cols
+  // and supplemental; below this threshold the left column needs the space.
+  const SIDEBAR_MIN_TERMINAL_WIDTH = 100
+
+  const projectRootDisplay = formatCwd(getProjectRoot())
+  const showSidebar = terminalWidth >= SIDEBAR_MIN_TERMINAL_WIDTH
+  const directoryMaxWidth = showSidebar ? terminalWidth - 42 : terminalWidth - 2
+  const directoryDisplay =
+    projectRootDisplay.length > directoryMaxWidth && directoryMaxWidth > 10
+      ? `…${projectRootDisplay.slice(-directoryMaxWidth + 1)}`
+      : projectRootDisplay
+
+  return (
+    <box
+      onMouseMove={handleMouseActivity}
+      focusable={false}
+      style={CHAT_ROOT_STYLE}
+    >
+      {/* Left column: chat content + bottom section */}
+      <box
+        focusable={false}
+        style={{
+          flexDirection: 'column',
+          flexGrow: 1,
+          gap: 0,
+          borderStyle: 'single',
+          borderColor: theme.border,
+        }}
+      >
+        {/* Pinned header — outside scrollbox so it stays at top */}
+        <box
+          ref={headerRef as React.Ref<BoxRenderable>}
+          style={HEADER_BOX_STYLE}
+          focusable={false}
+        >
+          <ChatHeader
+            projectRoot={getProjectRoot()}
+            animationEnabled={isHeaderVisible && inputFocused}
+          />
+        </box>
+
+        <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={SCROLLBOX_STYLE}
+        >
+          <TopBanner gitRoot={gitRoot} onSwitchToGitRoot={onSwitchToGitRoot} />
+
+          {IS_SAVANT_FREE && (
+            <SavantFreeActiveSessionSummary session={savantFreeSession} />
+          )}
+          {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 focusable={false} style={BOTTOM_BOX_STYLE}>
+          {showOnboardingPrompts && !reviewMode && !isSavantFreeSessionOver && (
+            <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),
+                ])
+                returnToSavantFreeLanding({ resetChat: true }).catch(() => {})
+              }}
+              savantFreeSession={savantFreeSession}
+            />
+          )}
+
+          {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}
+            />
+          ) : isSavantFreeSessionOver && !askUserState ? (
+            <SessionEndedBanner
+              isStreaming={isStreaming || isWaitingForResponse}
+            />
+          ) : (
+            <>
+              {modelPickerOpen && (
+                <ModelPicker
+                  models={modelPickerModels}
+                  query={modelPickerQuery}
+                  selectedIndex={modelPickerSelectedIndex}
+                  onQueryChange={setModelPickerQuery}
+                  onSelectIndex={setModelPickerSelectedIndex}
+                  onSelect={handleModelPickerSelect}
+                  onClose={closeModelPicker}
+                />
+              )}
+              {providerPickerOpen && (
+                <ProviderPicker
+                  providers={providerPickerProviders}
+                  selectedIndex={providerPickerSelectedIndex}
+                  onSelectIndex={setProviderPickerSelectedIndex}
+                  onSelect={handleProviderPickerSelect}
+                  onClose={closeProviderPicker}
+                />
+              )}
+              {rewindPickerOpen && (
+                <RewindPicker
+                  turns={rewindPickerTurns}
+                  selectedIndex={rewindPickerSelectedIndex}
+                  stage={rewindPickerStage}
+                  mode={rewindPickerMode}
+                  onSelectIndex={setRewindPickerSelectedIndex}
+                  onSetStage={setRewindPickerStage}
+                  onSetMode={setRewindPickerMode}
+                  onConfirm={handleRewindPickerConfirm}
+                  onClose={closeRewindPicker}
+                />
+              )}
+              <box flexDirection="row" paddingLeft={1} focusable={false}>
+                <text fg={theme.muted} wrapMode="none" selectable={false}>
+                  {`cwd: ${directoryDisplay}`}
+                </text>
+              </box>
+              <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}
+                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>
+
+      {/* Right sidebar — session info, tools, history.
+          Hidden on narrow terminals so the chat column remains usable. */}
+      {showSidebar && (
+        <RightSidebar
+          tokensUsed={contextTokensUsed}
+          tokensMax={contextTokensMax}
+          cost={sessionCost}
+          model={sidebarModel || 'unknown'}
+          mode={agentMode}
+          agent={agentId ?? 'Savant'}
+          toolsUsed={toolsUsed}
+          toolsAvailable={SIDEBAR_TOOLS_AVAILABLE}
+          filesChanged={filesChanged}
+          agentStack={agentStack}
+          toolHistory={toolHistory}
+          isStreaming={isStreaming}
+          isWaitingForResponse={isWaitingForResponse}
+          fsmPhase={fsmPhase}
+        />
+      )}
+    </box>
+  )
+}