frontend/src/components/ai-elements/connection.tsx

import type { ConnectionLineComponent } from '@xyflow/react';

const HALF = 0.5;

export const Connection: ConnectionLineComponent = ({ fromX, fromY, toX, toY }) => (
  <g>
    <path
      className='animated'
      d={`M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`}
      fill='none'
      stroke='var(--color-ring)'
      strokeWidth={1}
    />
    <circle cx={toX} cy={toY} fill='#fff' r={3} stroke='var(--color-ring)' strokeWidth={1} />
  </g>
);