claude-code/src/components/MCPServerMultiselectDialog.tsx

import partition from 'lodash-es/partition.js'
import React, { useCallback } from 'react'
import { logEvent } from 'src/services/analytics/index.js'
import { Box, Text } from '@anthropic/ink'
import {
  getSettings_DEPRECATED,
  updateSettingsForSource,
} from '../utils/settings/settings.js'
import { ConfigurableShortcutHint } from './ConfigurableShortcutHint.js'
import { SelectMulti } from './CustomSelect/SelectMulti.js'
import { Byline, Dialog, KeyboardShortcutHint } from '@anthropic/ink'
import { MCPServerDialogCopy } from './MCPServerDialogCopy.js'

type Props = {
  serverNames: string[]
  onDone(): void
}

export function MCPServerMultiselectDialog({
  serverNames,
  onDone,
}: Props): React.ReactNode {
  function onSubmit(selectedServers: string[]) {
    const currentSettings = getSettings_DEPRECATED() || {}
    const enabledServers = currentSettings.enabledMcpjsonServers || []
    const disabledServers = currentSettings.disabledMcpjsonServers || []

    // Use partition to separate approved and rejected servers
    const [approvedServers, rejectedServers] = partition(serverNames, server =>
      selectedServers.includes(server),
    )

    logEvent('tengu_mcp_multidialog_choice', {
      approved: approvedServers.length,
      rejected: rejectedServers.length,
    })

    // Update settings with approved servers
    if (approvedServers.length > 0) {
      const newEnabledServers = [
        ...new Set([...enabledServers, ...approvedServers]),
      ]
      updateSettingsForSource('localSettings', {
        enabledMcpjsonServers: newEnabledServers,
      })
    }

    // Update settings with rejected servers
    if (rejectedServers.length > 0) {
      const newDisabledServers = [
        ...new Set([...disabledServers, ...rejectedServers]),
      ]
      updateSettingsForSource('localSettings', {
        disabledMcpjsonServers: newDisabledServers,
      })
    }

    onDone()
  }

  // Handle ESC to reject all servers
  const handleEscRejectAll = useCallback(() => {
    const currentSettings = getSettings_DEPRECATED() || {}
    const disabledServers = currentSettings.disabledMcpjsonServers || []

    const newDisabledServers = [
      ...new Set([...disabledServers, ...serverNames]),
    ]

    updateSettingsForSource('localSettings', {
      disabledMcpjsonServers: newDisabledServers,
    })

    onDone()
  }, [serverNames, onDone])

  return (
    <>
      <Dialog
        title={`${serverNames.length} new MCP servers found in .mcp.json`}
        subtitle="Select any you wish to enable."
        color="warning"
        onCancel={handleEscRejectAll}
        hideInputGuide
      >
        <MCPServerDialogCopy />

        <SelectMulti
          options={serverNames.map(server => ({
            label: server,
            value: server,
          }))}
          defaultValue={serverNames}
          onSubmit={onSubmit}
          onCancel={handleEscRejectAll}
          hideIndexes
        />
      </Dialog>
      <Box paddingX={1}>
        <Text dimColor italic>
          <Byline>
            <KeyboardShortcutHint shortcut="Space" action="select" />
            <KeyboardShortcutHint shortcut="Enter" action="confirm" />
            <ConfigurableShortcutHint
              action="confirm:no"
              context="Confirmation"
              fallback="Esc"
              description="reject all"
            />
          </Byline>
        </Text>
      </Box>
    </>
  )
}