claude-code/src/components/IdeAutoConnectDialog.tsx

import React, { useCallback } from 'react'
import { Text, Dialog } from '@anthropic/ink'
import { getGlobalConfig, saveGlobalConfig } from '../utils/config.js'
import { isSupportedTerminal } from '../utils/ide.js'
import { Select } from './CustomSelect/index.js'

type IdeAutoConnectDialogProps = {
  onComplete: () => void
}

export function IdeAutoConnectDialog({
  onComplete,
}: IdeAutoConnectDialogProps): React.ReactNode {
  const handleSelect = useCallback(
    async (value: string) => {
      const autoConnect = value === 'yes'

      // Save the preference and mark dialog as shown
      saveGlobalConfig(current => ({
        ...current,
        autoConnectIde: autoConnect,
        hasIdeAutoConnectDialogBeenShown: true,
      }))

      onComplete()
    },
    [onComplete],
  )

  const options = [
    { label: 'Yes', value: 'yes' },
    { label: 'No', value: 'no' },
  ]

  return (
    <Dialog
      title="Do you wish to enable auto-connect to IDE?"
      color="ide"
      onCancel={onComplete}
    >
      <Select options={options} onChange={handleSelect} defaultValue={'yes'} />
      <Text dimColor>
        You can also configure this in /config or with the --ide flag
      </Text>
    </Dialog>
  )
}

export function shouldShowAutoConnectDialog(): boolean {
  const config = getGlobalConfig()
  return (
    !isSupportedTerminal() &&
    config.autoConnectIde !== true &&
    config.hasIdeAutoConnectDialogBeenShown !== true
  )
}

type IdeDisableAutoConnectDialogProps = {
  onComplete: (disableAutoConnect: boolean) => void
}

export function IdeDisableAutoConnectDialog({
  onComplete,
}: IdeDisableAutoConnectDialogProps): React.ReactNode {
  const handleSelect = useCallback(
    (value: string) => {
      const disableAutoConnect = value === 'yes'

      if (disableAutoConnect) {
        saveGlobalConfig(current => ({
          ...current,
          autoConnectIde: false,
        }))
      }

      onComplete(disableAutoConnect)
    },
    [onComplete],
  )

  const handleCancel = useCallback(() => {
    onComplete(false)
  }, [onComplete])

  const options = [
    { label: 'No', value: 'no' },
    { label: 'Yes', value: 'yes' },
  ]

  return (
    <Dialog
      title="Do you wish to disable auto-connect to IDE?"
      subtitle="You can also configure this in /config"
      onCancel={handleCancel}
      color="ide"
    >
      <Select options={options} onChange={handleSelect} defaultValue={'no'} />
    </Dialog>
  )
}

export function shouldShowDisableAutoConnectDialog(): boolean {
  const config = getGlobalConfig()
  return !isSupportedTerminal() && config.autoConnectIde === true
}